Code comments

Author: jonkafton

frontends/api/src/ssr/prefetch.ts

@@ -18,6 +18,8 @@ export const prefetch = async (queries: (Query | unknown)[]) => {
     .getQueriesData([])
     .map((item) => JSON.stringify(item[0]))
 
+  /* Set the prefetched keys so we can check them after first
+   * render to make sure we are not prefetching anything unnecessarily */
   queryClient.setQueryData(["prefetchedKeys"], prefetchedKeys)
 
   return dehydrate(queryClient)

frontends/api/src/ssr/useQuery.tsx

@@ -25,10 +25,12 @@ export const useQuery = <
 ): UseQueryResult<TData, TError> => {
   const queryClient = useQueryClient()
 
-  const cached = queryClient.getQueryState(options.queryKey!)
-
+  /* This flag is set to true when we get the window load event */
   const initialLoaded = queryClient.getQueryData(["initialRenderComplete"])
 
+  /* Check if the item is in the cache (implying prefetched, until initialLoaded) */
+  const cached = queryClient.getQueryState(options.queryKey!)
+
   if (!initialLoaded) {
     if (!cached) {
       console.warn(
@@ -42,6 +44,7 @@ export const useQuery = <
 
     const key = JSON.stringify(options.queryKey)
     if (!initialQueries.includes(key)) {
+      /* Track the queries made during initial render so we can compare to the prefetched list */
       queryClient.setQueryData(["initialKeys"], [...initialQueries, key])
     }
   }

frontends/api/src/ssr/useQueryCacheWarning.ts

@@ -7,19 +7,23 @@ export const useQueryCacheWarning = (queryClient: QueryClient) => {
       queryClient.setQueryData(["initialRenderComplete"], true)
       window.removeEventListener("load", onLoad)
 
+      /* These are the known keys set while prefetching on the server before dehydrating (serializing) for the client */
       const prefetchedKeys = queryClient.getQueryData<string[]>([
         "prefetchedKeys",
       ])
 
+      /* These are the cache entries we set ourselves that are not queries, so we ignore below */
       const nonQueryKeys = new Set([
         '["prefetchedKeys"]',
         '["initialRenderComplete"]',
       ])
 
+      /* These are set as the components request useQuery() during initial render */
       const initialKeys = new Set(
         queryClient.getQueryData<string[]>(["initialKeys"]),
       )
 
+      /* We can find the keys prefetched but not used by any component during initial render */
       const superfluousKeys = prefetchedKeys?.filter(
         (key) => !nonQueryKeys.has(key) && !initialKeys.has(key),
       )