Fix hydration error, remove prefetch helper (#2697)

* remove prefetch helper, co-locate queryclient creation

* fix typo

Author: ChristopherChudzicki

frontends/api/src/ssr/prefetch.ts

@@ -14,7 +14,7 @@ import { useQuery } from "@tanstack/react-query"
 import { userEnrollmentsToDashboardCourses } from "./transform"
 import { DashboardCard } from "./DashboardCard"
 import { DashboardCourse, EnrollmentStatus } from "./types"
-import { MaybeHasStatusAndDetail } from "@/app/getQueryClient"
+import type { AxiosError } from "axios"
 
 const Wrapper = styled.div(({ theme }) => ({
   marginTop: "32px",
@@ -183,7 +183,7 @@ const EnrollmentDisplay = () => {
     ...enrollmentQueries.courseRunEnrollmentsList(),
     select: userEnrollmentsToDashboardCourses,
     throwOnError: (error) => {
-      const err = error as MaybeHasStatusAndDetail
+      const err = error as AxiosError<{ detail?: string }>
       const status = err?.response?.status
       if (
         status === 403 &&

frontends/api/src/ssr/serverQueryClient.ts

@@ -1,21 +1,20 @@
 import React from "react"
-import { HydrationBoundary } from "@tanstack/react-query"
+import { HydrationBoundary, dehydrate } from "@tanstack/react-query"
 import { safeGenerateMetadata, standardizeMetadata } from "@/common/metadata"
-import { prefetch } from "api/ssr/prefetch"
 import CoursePage from "@/app-pages/ProductPages/CoursePage"
 import { notFound } from "next/navigation"
 import { pagesQueries } from "api/mitxonline-hooks/pages"
 import { coursesQueries } from "api/mitxonline-hooks/courses"
 import { DEFAULT_RESOURCE_IMG } from "ol-utilities"
-import { getServerQueryClient } from "api/ssr/serverQueryClient"
+import { getQueryClient } from "@/app/getQueryClient"
 
 export const generateMetadata = async (
   props: PageProps<"/courses/[readable_id]">,
 ) => {
   const params = await props.params
 
   return safeGenerateMetadata(async () => {
-    const queryClient = getServerQueryClient()
+    const queryClient = getQueryClient()
 
     const data = await queryClient.fetchQuery(
       pagesQueries.coursePages(decodeURIComponent(params.readable_id)),
@@ -44,12 +43,17 @@ const Page: React.FC<PageProps<"/courses/[readable_id]">> = async (props) => {
    * fetching via client, and calling notFound() if data missing.
    * This approach blocked by wagtail api requiring auth.
    */
-  const { dehydratedState } = await prefetch([
-    pagesQueries.coursePages(readableId),
-    coursesQueries.coursesList({ readable_id: readableId }),
+  const queryClient = getQueryClient()
+
+  await Promise.all([
+    queryClient.prefetchQuery(pagesQueries.coursePages(readableId)),
+    queryClient.prefetchQuery(
+      coursesQueries.coursesList({ readable_id: readableId }),
+    ),
   ])
+
   return (
-    <HydrationBoundary state={dehydratedState}>
+    <HydrationBoundary state={dehydrate(queryClient)}>
       <CoursePage readableId={readableId} />
     </HydrationBoundary>
   )

frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx

@@ -1,21 +1,20 @@
 import React from "react"
-import { HydrationBoundary } from "@tanstack/react-query"
+import { HydrationBoundary, dehydrate } from "@tanstack/react-query"
 import { safeGenerateMetadata, standardizeMetadata } from "@/common/metadata"
-import { prefetch } from "api/ssr/prefetch"
 import ProgramPage from "@/app-pages/ProductPages/ProgramPage"
 import { notFound } from "next/navigation"
 import { pagesQueries } from "api/mitxonline-hooks/pages"
 import { programsQueries } from "api/mitxonline-hooks/programs"
 import { DEFAULT_RESOURCE_IMG } from "ol-utilities"
-import { getServerQueryClient } from "api/ssr/serverQueryClient"
+import { getQueryClient } from "@/app/getQueryClient"
 
 export const generateMetadata = async (
   props: PageProps<"/programs/[readable_id]">,
 ) => {
   const params = await props.params
 
   return safeGenerateMetadata(async () => {
-    const queryClient = getServerQueryClient()
+    const queryClient = getQueryClient()
 
     const data = await queryClient.fetchQuery(
       pagesQueries.programPages(decodeURIComponent(params.readable_id)),
@@ -46,12 +45,17 @@ const Page: React.FC<PageProps<"/programs/[readable_id]">> = async (props) => {
    * fetching via client, and calling notFound() if data missing.
    * This approach blocked by wagtail api requiring auth.
    */
-  const { dehydratedState } = await prefetch([
-    pagesQueries.programPages(readableId),
-    programsQueries.programsList({ readable_id: readableId }),
+  const queryClient = getQueryClient()
+
+  await Promise.all([
+    queryClient.prefetchQuery(pagesQueries.programPages(readableId)),
+    queryClient.prefetchQuery(
+      programsQueries.programsList({ readable_id: readableId }),
+    ),
   ])
+
   return (
-    <HydrationBoundary state={dehydratedState}>
+    <HydrationBoundary state={dehydrate(queryClient)}>
       <ProgramPage readableId={readableId} />
     </HydrationBoundary>
   )

frontends/main/src/app/(products)/courses/[readable_id]/page.tsx

@@ -1,6 +1,5 @@
 import React from "react"
 import ChannelPage from "@/app-pages/ChannelPage/ChannelPage"
-import { getServerQueryClient } from "api/ssr/serverQueryClient"
 import { ChannelTypeEnum, UnitChannel } from "api/v0"
 import {
   FeaturedListOfferedByEnum,
@@ -9,8 +8,7 @@ import {
   LearningResourceOfferorDetail,
 } from "api"
 import { getMetadataAsync, safeGenerateMetadata } from "@/common/metadata"
-import { HydrationBoundary } from "@tanstack/react-query"
-import { prefetch } from "api/ssr/prefetch"
+import { HydrationBoundary, dehydrate } from "@tanstack/react-query"
 import {
   learningResourceQueries,
   offerorQueries,
@@ -25,6 +23,7 @@ import {
 } from "@/app-pages/ChannelPage/searchRequests"
 import { isInEnum } from "@/common/utils"
 import { notFound } from "next/navigation"
+import { getQueryClient } from "@/app/getQueryClient"
 
 export async function generateMetadata({
   searchParams,
@@ -33,7 +32,7 @@ export async function generateMetadata({
   const { channelType, name } = await params
 
   return safeGenerateMetadata(async () => {
-    const queryClient = getServerQueryClient()
+    const queryClient = getQueryClient()
 
     const data = await queryClient.fetchQuery(
       channelQueries.detailByType(channelType, name),
@@ -58,16 +57,20 @@ const Page: React.FC<PageProps<"/c/[channelType]/[name]">> = async ({
 
   const search = await searchParams
 
-  const { queryClient } = await prefetch([
-    offerorQueries.list({}),
+  const queryClient = getQueryClient()
+
+  await Promise.all([
+    queryClient.prefetchQuery(offerorQueries.list({})),
     channelType === ChannelTypeEnum.Unit &&
-      learningResourceQueries.featured({
-        limit: 12,
-        offered_by: [name as FeaturedListOfferedByEnum],
-      }),
+      queryClient.prefetchQuery(
+        learningResourceQueries.featured({
+          limit: 12,
+          offered_by: [name as FeaturedListOfferedByEnum],
+        }),
+      ),
     channelType === ChannelTypeEnum.Unit &&
-      testimonialsQueries.list({ offerors: [name] }),
-    channelQueries.detailByType(channelType, name),
+      queryClient.prefetchQuery(testimonialsQueries.list({ offerors: [name] })),
+    queryClient.prefetchQuery(channelQueries.detailByType(channelType, name)),
   ])
 
   const channel = queryClient.getQueryData<UnitChannel>(
@@ -102,13 +105,12 @@ const Page: React.FC<PageProps<"/c/[channelType]/[name]">> = async ({
     page: Number(search.page ?? 1),
   })
 
-  const { dehydratedState } = await prefetch(
-    [learningResourceQueries.search(searchRequest as LRSearchRequest)],
-    queryClient,
+  await queryClient.prefetchQuery(
+    learningResourceQueries.search(searchRequest as LRSearchRequest),
   )
 
   return (
-    <HydrationBoundary state={dehydratedState}>
+    <HydrationBoundary state={dehydrate(queryClient)}>
       <ChannelPage />
     </HydrationBoundary>
   )

frontends/main/src/app/(products)/programs/[readable_id]/page.tsx

@@ -1,13 +1,12 @@
 import React from "react"
 import { Metadata } from "next"
 import CertificatePage from "@/app-pages/CertificatePage/CertificatePage"
-import { prefetch } from "api/ssr/prefetch"
 import { certificateQueries } from "api/mitxonline-hooks/certificates"
-import { HydrationBoundary } from "@tanstack/react-query"
+import { HydrationBoundary, dehydrate } from "@tanstack/react-query"
 import { isInEnum } from "@/common/utils"
 import { notFound } from "next/navigation"
 import { safeGenerateMetadata, standardizeMetadata } from "@/common/metadata"
-import { getServerQueryClient } from "api/ssr/serverQueryClient"
+import { getQueryClient } from "@/app/getQueryClient"
 
 const { NEXT_PUBLIC_ORIGIN } = process.env
 
@@ -24,7 +23,7 @@ export async function generateMetadata({
   return safeGenerateMetadata(async () => {
     let title, displayType, userName
 
-    const queryClient = getServerQueryClient()
+    const queryClient = getQueryClient()
 
     if (certificateType === CertificateType.Course) {
       const data = await queryClient.fetchQuery(
@@ -68,18 +67,24 @@ const Page: React.FC<
     notFound()
   }
 
-  const { dehydratedState } = await prefetch([
-    certificateType === CertificateType.Course
-      ? certificateQueries.courseCertificatesRetrieve({
-          cert_uuid: uuid,
-        })
-      : certificateQueries.programCertificatesRetrieve({
-          cert_uuid: uuid,
-        }),
-  ])
+  const queryClient = getQueryClient()
+
+  if (certificateType === CertificateType.Course) {
+    await queryClient.prefetchQuery(
+      certificateQueries.courseCertificatesRetrieve({
+        cert_uuid: uuid,
+      }),
+    )
+  } else {
+    await queryClient.prefetchQuery(
+      certificateQueries.programCertificatesRetrieve({
+        cert_uuid: uuid,
+      }),
+    )
+  }
 
   return (
-    <HydrationBoundary state={dehydratedState}>
+    <HydrationBoundary state={dehydrate(queryClient)}>
       <CertificatePage
         certificateType={certificateType}
         uuid={uuid}

frontends/main/src/app/c/[channelType]/[name]/page.tsx

@@ -4,7 +4,7 @@ import type { AxiosError } from "axios"
 import type { NextRequest } from "next/server"
 import * as Sentry from "@sentry/nextjs"
 import moment from "moment"
-import { getServerQueryClient } from "api/ssr/serverQueryClient"
+import { getQueryClient } from "@/app/getQueryClient"
 import { certificateQueries } from "api/mitxonline-hooks/certificates"
 import {
   V2CourseRunCertificate,
@@ -562,7 +562,7 @@ type RouteContext = {
 export async function GET(req: NextRequest, ctx: RouteContext) {
   const { certificateType, uuid } = await ctx.params
 
-  const queryClient = getServerQueryClient()
+  const queryClient = getQueryClient()
 
   let pdfDoc