Server rendering for homepage, units and topics listing pages (#1822)

* Warn on API calls during initial render not prefetched

* Full prefetch for homepage (commented)

* Prefetch utility

* Check for queries prefetched that are not needed during render and warn

* No need to stringify

* Replace useQuery overrides with decoupled cache check (wip)

* Observer count for unnecessary prefetch warnings

* Remove useQuery override

* Test prefetch warnings

* Remove inadvertent/unnecessary diff

* Remove comments

* Prefetch homepage. Invalidate learning resource cache items

* Remove comment

* Update comment

* Temp remove featured resource list shuffle

* Remove unused

* Prefetch calls

* Prefetch topics page

* Rename key factory re-exports

* Units page prefetch

* Single request for all unit channel details

* Update unit listing page tests

* Page arg types

* Optional route params

* Remove comment

* Remove unused

* Remove comment

Author: jonkafton

frontends/api/src/hooks/channels/index.ts

@@ -55,5 +55,5 @@ export {
   useChannelsList,
   useChannelPartialUpdate,
   useChannelCounts,
-  channels as channelsKeyFactory,
+  channels,
 }

frontends/api/src/hooks/learningResources/index.ts

@@ -531,5 +531,5 @@ export {
   useListItemMove,
   usePlatformsList,
   useSchoolsList,
-  learningResources as learningResourcesKeyFactory,
+  learningResources,
 }

frontends/api/src/hooks/learningResources/keyFactory.ts

@@ -33,6 +33,11 @@ import type {
 
 import { createQueryKeys } from "@lukemorales/query-key-factory"
 
+/* TODO we can add this back in once resource user list membership is implemented in the front end
+ * Currently we fetch on the server for public resources and then refetch on the client for the
+ * user lists parents. Randomizing therefore causes a content flicker as the client loaded
+ * sequence replaces the server rendered sequence.
+
 const shuffle = ([...arr]) => {
   let m = arr.length
   while (m) {
@@ -61,6 +66,7 @@ const randomizeResults = ([...results]) => {
     })
   return randomizedResults
 }
+*/
 
 const learningResources = createQueryKeys("learningResources", {
   detail: (id: number) => ({
@@ -81,7 +87,7 @@ const learningResources = createQueryKeys("learningResources", {
     queryKey: [params],
     queryFn: () => {
       return featuredApi.featuredList(params).then((res) => {
-        res.data.results = randomizeResults(res.data?.results)
+        // res.data.results = randomizeResults(res.data?.results)
         return res.data
       })
     },

frontends/api/src/hooks/newsEvents/index.ts

@@ -19,5 +19,5 @@ export {
   useNewsEventsList,
   useNewsEventsDetail,
   NewsEventsListFeedTypeEnum,
-  newsEvents as newsEventsKeyFactory,
+  newsEvents,
 }

frontends/api/src/hooks/testimonials/index.ts

@@ -23,8 +23,4 @@ const useTestimonialDetail = (id: number | undefined) => {
   })
 }
 
-export {
-  useTestimonialDetail,
-  useTestimonialList,
-  testimonials as testimonialsKeyFactory,
-}
+export { useTestimonialDetail, useTestimonialList, testimonials }

frontends/api/src/ssr/prefetch.ts

@@ -1,13 +1,19 @@
 import { QueryClient, dehydrate } from "@tanstack/react-query"
 import type { Query } from "@tanstack/react-query"
 
-// Utility to avoid repetition in server components
-export const prefetch = async (queries: (Query | unknown)[]) => {
-  const queryClient = new QueryClient()
+/* Utility to avoid repetition in server components
+ * Optionally pass the queryClient returned from a previous prefetch
+ * where queries are dependent on previous results
+ */
+export const prefetch = async (
+  queries: (Query | unknown)[],
+  queryClient?: QueryClient,
+) => {
+  queryClient = queryClient || new QueryClient()
 
   await Promise.all(
     queries.map((query) => queryClient.prefetchQuery(query as Query)),
   )
 
-  return dehydrate(queryClient)
+  return { dehydratedState: dehydrate(queryClient), queryClient }
 }

frontends/api/src/ssr/usePrefetchWarnings.test.ts

@@ -4,7 +4,7 @@ import { usePrefetchWarnings } from "./usePrefetchWarnings"
 import { setupReactQueryTest } from "../hooks/test-utils"
 import { urls, factories, setMockResponse } from "../test-utils"
 import {
-  learningResourcesKeyFactory,
+  learningResources,
   useLearningResourcesDetail,
 } from "../hooks/learningResources"
 
@@ -45,7 +45,7 @@ describe("SSR prefetch warnings", () => {
         expect.objectContaining({
           disabled: false,
           initialStatus: "loading",
-          key: learningResourcesKeyFactory.detail(1).queryKey,
+          key: learningResources.detail(1).queryKey,
           observerCount: 1,
         }),
       ],
@@ -65,7 +65,7 @@ describe("SSR prefetch warnings", () => {
       wrapper,
       initialProps: {
         queryClient,
-        exemptions: [learningResourcesKeyFactory.detail(1).queryKey],
+        exemptions: [learningResources.detail(1).queryKey],
       },
     })
 
@@ -83,7 +83,7 @@ describe("SSR prefetch warnings", () => {
     const { unmount } = renderHook(
       () =>
         useQuery({
-          ...learningResourcesKeyFactory.detail(1),
+          ...learningResources.detail(1),
           initialData: data,
         }),
       { wrapper },
@@ -105,9 +105,9 @@ describe("SSR prefetch warnings", () => {
       [
         {
           disabled: false,
-          hash: JSON.stringify(learningResourcesKeyFactory.detail(1).queryKey),
+          hash: JSON.stringify(learningResources.detail(1).queryKey),
           initialStatus: "success",
-          key: learningResourcesKeyFactory.detail(1).queryKey,
+          key: learningResources.detail(1).queryKey,
           observerCount: 0,
           status: "success",
         },

frontends/api/src/ssr/usePrefetchWarnings.ts

@@ -45,6 +45,13 @@ export const usePrefetchWarnings = ({
    */
   useEffect(
     () => {
+      /* Invalidate all learning resource queries so they are re-fetched in the client
+       * for session specific data (user list memberships).
+       * This is interim, until the memberships endpoint is implemented in the frontend
+       * TODO remove once complete (see https://github.com/mitodl/hq/issues/5159)
+       */
+      queryClient.invalidateQueries(["learningResources"])
+
       if (process.env.NODE_ENV === "production") {
         return
       }

frontends/api/src/test-utils/factories/channels.ts

@@ -148,6 +148,7 @@ const _channelShared = (): Partial<Omit<Channel, "channel_type">> => {
       key: faker.lorem.slug(),
       value: faker.lorem.slug(),
     }),
+    channel_url: `${faker.internet.url({ appendSlash: false })}${faker.system.directoryPath()}`,
   }
 }
 

frontends/api/src/test-utils/urls.ts

@@ -8,6 +8,7 @@
 import type {
   NewsEventsApiNewsEventsListRequest,
   TestimonialsApi,
+  ChannelsApi,
 } from "../generated/v0"
 import type {
   LearningResourcesApi as LRApi,
@@ -179,6 +180,8 @@ const channels = {
   details: (channelType: string, name: string) =>
     `${API_BASE_URL}/api/v0/channels/type/${channelType}/${name}/`,
   patch: (id: number) => `${API_BASE_URL}/api/v0/channels/${id}/`,
+  list: (params?: Paramsv0<ChannelsApi, "channelsList">) =>
+    `${API_BASE_URL}/api/v0/channels/${query(params)}`,
 }
 
 const widgetLists = {

frontends/main/src/app-pages/UnitsListingPage/UnitCard.tsx

@@ -1,5 +1,6 @@
 import React from "react"
-import { LearningResourceOfferorDetail, OfferedByEnum } from "api"
+import type { OfferedByEnum } from "api"
+import type { UnitChannel } from "api/v0"
 import {
   Card,
   Skeleton,
@@ -8,7 +9,6 @@ import {
   theme,
   UnitLogo,
 } from "ol-components"
-import { useChannelDetail } from "api/hooks/channels"
 import Link from "next/link"
 
 const CardStyled = styled(Card)({
@@ -102,25 +102,23 @@ const CountsText = styled(Typography)(({ theme }) => ({
 }))
 
 interface UnitCardsProps {
-  units: LearningResourceOfferorDetail[] | undefined
+  channels: UnitChannel[] | undefined
   courseCounts: Record<string, number>
   programCounts: Record<string, number>
 }
 
 interface UnitCardProps {
-  unit: LearningResourceOfferorDetail
+  channel: UnitChannel
   courseCount: number
   programCount: number
 }
 
 const UnitCard: React.FC<UnitCardProps> = (props) => {
-  const { unit, courseCount, programCount } = props
-  const channelDetailQuery = useChannelDetail("unit", unit.code)
-  const channelDetail = channelDetailQuery.data
-  const unitUrl = channelDetail?.channel_url
+  const { channel, courseCount, programCount } = props
+  const unit = channel.unit_detail.unit
 
-  if (!unitUrl) return null
-  const href = unitUrl && new URL(unitUrl).pathname
+  if (!channel.channel_url) return null
+  const href = new URL(channel.channel_url).pathname
 
   return (
     <CardStyled forwardClicksToLink data-testid={`unit-card-${unit.code}`}>
@@ -134,9 +132,7 @@ const UnitCard: React.FC<UnitCardProps> = (props) => {
             </LogoContainer>
             <CardBottom>
               <ValuePropContainer>
-                <HeadingText>
-                  {channelDetail?.configuration?.heading}
-                </HeadingText>
+                <HeadingText>{channel?.configuration?.heading}</HeadingText>
               </ValuePropContainer>
               <CountsTextContainer>
                 <CountsText data-testid={`course-count-${unit.code}`}>
@@ -174,17 +170,18 @@ export const UnitCardLoading = () => {
 }
 
 export const UnitCards: React.FC<UnitCardsProps> = (props) => {
-  const { units, courseCounts, programCounts } = props
+  const { channels, courseCounts, programCounts } = props
   return (
     <>
-      {units?.map((unit) => {
+      {channels?.map((channel) => {
+        const unit = channel.unit_detail.unit
         const courseCount = courseCounts[unit.code] || 0
         const programCount = programCounts[unit.code] || 0
 
         return unit.value_prop ? (
           <UnitCard
             key={unit.code}
-            unit={unit}
+            channel={channel}
             courseCount={courseCount}
             programCount={programCount}
           />