diff --git a/src/app/routes.ts b/src/app/routes.ts index 6ae23e20642..0749298b78f 100644 --- a/src/app/routes.ts +++ b/src/app/routes.ts @@ -164,13 +164,25 @@ export const getCurrentURL = () => { let { route: path } = currentModule + const queryParams = [] as { [key: string]: string }[] + if (currentModuleProps) { Object.entries(currentModuleProps).map(([key, value]) => { - path = path.replace(`:${key}`, value as string) + if (path.includes(`:${key}`)) { + path = path.replace(`:${key}`, value as string) + } else { + queryParams.push({ [key]: value as string }) + } }) } - return encodeURI(`${webURL}${path}`) + const queryParamsString = queryParams.map((params) => + Object.entries(params) + .map(([key, value]) => `${key}=${value}`) + .join("&") + ) + + return encodeURI(`${webURL}${path}?${queryParamsString}`) } export function getDomainMap(): Record { diff --git a/src/app/system/relay/helpers/cacheHeaderMiddlewareHelpers.ts b/src/app/system/relay/helpers/cacheHeaderMiddlewareHelpers.ts index 09b983f069f..db380f6fc42 100644 --- a/src/app/system/relay/helpers/cacheHeaderMiddlewareHelpers.ts +++ b/src/app/system/relay/helpers/cacheHeaderMiddlewareHelpers.ts @@ -19,11 +19,11 @@ export const hasNoCacheParamPresent = (url: string) => { return false } +export const SKIP_CACHE_ARGUMENTS = ["includeArtworksByFollowedArtists"] // Important - Add any new personalized argument checks to this list. That way, logged-in queries // _without_ this argument can still be `@cacheable`, and when queries include this argument, // those queries will not be cached. export const hasPersonalizedArguments = (variables: Variables) => { - const SKIP_CACHE_ARGUMENTS = ["includeArtworksByFollowedArtists"] // return true if variables has at least one of the SKIP_CACHE_ARGUMENTS that is truthy return SKIP_CACHE_ARGUMENTS.some((arg) => !!variables[arg]) } diff --git a/src/app/system/relay/middlewares/cacheHeaderMiddleware.ts b/src/app/system/relay/middlewares/cacheHeaderMiddleware.ts index 86c55cee0d7..c3aedfcb5ea 100644 --- a/src/app/system/relay/middlewares/cacheHeaderMiddleware.ts +++ b/src/app/system/relay/middlewares/cacheHeaderMiddleware.ts @@ -3,6 +3,7 @@ import { hasNoCacheParamPresent, hasPersonalizedArguments, isRequestCacheable, + SKIP_CACHE_ARGUMENTS, } from "app/system/relay/helpers/cacheHeaderMiddlewareHelpers" import { GraphQLRequest } from "app/system/relay/middlewares/types" import { Middleware } from "react-relay-network-modern" @@ -16,18 +17,34 @@ export const shouldSkipCDNCache = (req: GraphQLRequest) => { // - a known personalized argument is present in the query (for example `include_artworks_by_followed_artists`) // - nocache param is present in the url - if (req.cacheConfig?.force === true) { - return true - } - if (isRequestCacheable(req)) { + if (req.cacheConfig?.force === true) { + if (__DEV__) { + console.warn( + "You are setting force: true on a cacheable request, CDN cache will be ignored." + ) + } + return true + } + const url = getCurrentURL() if (url && hasNoCacheParamPresent(url)) { + if (__DEV__) { + console.warn( + "You are setting nocache param in the url on a cacheable request, CDN cache will be ignored." + ) + } // Don't use CDN cache if the url has the nocache param return true } if (hasPersonalizedArguments(req.variables)) { + if (__DEV__) { + console.warn( + "You are setting a personalized argument on a cacheable request, CDN cache will be ignored.\nList of personalized arguments: ", + SKIP_CACHE_ARGUMENTS.join(", ") + ) + } // Don't use CDN cache if the query has a personalized argument return true }