chore: better DX around for @cacheable

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<string, RouteMatcher[] | null> {

src/app/system/relay/helpers/cacheHeaderMiddlewareHelpers.ts

@@ -19,11 +19,11 @@ export const hasNoCacheParamPresent = (url: string) => {
   return false
 }
 
+export const SKIP_CACHE_ARGUMENTS = ["includeArtworksByFollowedArtists", "collectionID"]
 // 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])
 }

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
     }