[NextJS] configure query client like on main

frontends/api/package.json

@@ -11,8 +11,7 @@
     "./hooks/*": "./src/hooks/*/index.ts",
     "./constants": "./src/common/constants.ts",
     "./test-utils/factories": "./src/test-utils/factories/index.ts",
-    "./test-utils": "./src/test-utils/index.ts",
-    "./ssr": "./src/ssr.ts"
+    "./test-utils": "./src/test-utils/index.ts"
   },
   "peerDependencies": {
     "react": "18.3.1"

frontends/main/package.json

@@ -14,6 +14,7 @@
     "@emotion/cache": "^11.13.1",
     "@mitodl/course-search-utils": "mitodl/course-search-utils.git#jk/5244-support-for-nextjs",
     "@remixicon/react": "^4.2.0",
+    "@tanstack/react-query": "^4.36.1",
     "api": "workspace:*",
     "formik": "^2.4.6",
     "lodash": "^4.17.21",

frontends/main/src/app/getQueryClient.test.tsx

@@ -0,0 +1,41 @@
+import React from "react"
+import { renderHook, waitFor } from "@testing-library/react"
+import { allowConsoleErrors } from "ol-test-utilities"
+import { QueryClientProvider, useQuery } from "@tanstack/react-query"
+import { makeQueryClient } from "./getQueryClient"
+
+const getWrapper = () => {
+  const queryClient = makeQueryClient()
+  const wrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  )
+  return wrapper
+}
+
+test.each([
+  { status: 408, retries: 3 },
+  { status: 429, retries: 3 },
+  { status: 502, retries: 3 },
+  { status: 503, retries: 3 },
+  { status: 504, retries: 3 },
+])(
+  "should retry $status failures $retries times",
+  async ({ status, retries }) => {
+    allowConsoleErrors()
+    const wrapper = getWrapper()
+    const queryFn = jest.fn().mockRejectedValue({ response: { status } })
+    const { result } = renderHook(
+      () =>
+        useQuery(["test"], {
+          queryFn,
+          retryDelay: 0,
+        }),
+      { wrapper },
+    )
+
+    await waitFor(() => {
+      expect(result.current.isError).toBe(true)
+    })
+    expect(queryFn).toHaveBeenCalledTimes(retries + 1)
+  },
+)

frontends/main/src/app/getQueryClient.ts

@@ -1,11 +1,35 @@
 // Based on https://tanstack.com/query/v5/docs/framework/react/guides/advanced-ssr
 
-import { QueryClient, isServer } from "api/ssr"
+import { QueryClient, isServer } from "@tanstack/react-query"
 
-function makeQueryClient() {
+type MaybeHasStatus = {
+  response?: {
+    status?: number
+  }
+}
+
+const RETRY_STATUS_CODES = [408, 429, 502, 503, 504]
+const MAX_RETRIES = 3
+
+const makeQueryClient = (): QueryClient => {
   return new QueryClient({
     defaultOptions: {
-      queries: {},
+      queries: {
+        refetchOnWindowFocus: false,
+        staleTime: Infinity,
+        retry: (failureCount, error) => {
+          const status = (error as MaybeHasStatus)?.response?.status
+          /**
+           * React Query's default behavior is to retry all failed queries 3
+           * times. Many things (e.g., 403, 404) are not worth retrying. Let's
+           * just retry some explicit whitelist of status codes.
+           */
+          if (status !== undefined && RETRY_STATUS_CODES.includes(status)) {
+            return failureCount < MAX_RETRIES
+          }
+          return false
+        },
+      },
     },
   })
 }

frontends/main/src/app/page.tsx

@@ -1,11 +1,6 @@
 import React from "react"
 import type { Metadata } from "next"
-import { dehydrate, Hydrate } from "api/ssr"
 import HomePage from "@/app-pages/HomePage/HomePage"
-import * as carousels from "@/app-pages/HomePage/carousels"
-import { learningResourcesKeyFactory } from "api/hooks/learningResources"
-import { FeaturedApiFeaturedListRequest } from "api/v1"
-import { getQueryClient } from "./getQueryClient"
 import { getMetadataAsync } from "@/common/metadata"
 
 export async function generateMetadata({
@@ -22,25 +17,7 @@ export async function generateMetadata({
 }
 
 const Page: React.FC = async () => {
-  const queryClient = getQueryClient()
-
-  /*
-   * Prefetch the first tab (All) of the carousel
-   */
-  await queryClient.prefetchQuery(
-    learningResourcesKeyFactory.featured(
-      carousels.FEATURED_RESOURCES_CAROUSEL[0].data
-        .params as FeaturedApiFeaturedListRequest,
-    ),
-  )
-
-  const dehydratedState = dehydrate(queryClient)
-
-  return (
-    <Hydrate state={JSON.parse(JSON.stringify(dehydratedState))}>
-      <HomePage />
-    </Hydrate>
-  )
+  return <HomePage />
 }
 
 export default Page

frontends/main/src/app/providers.tsx

@@ -2,7 +2,7 @@
 
 import React from "react"
 import { getQueryClient } from "./getQueryClient"
-import { QueryClientProvider } from "api/ssr"
+import { QueryClientProvider } from "@tanstack/react-query"
 import { ThemeProvider, NextJsAppRouterCacheProvider } from "ol-components"
 import { Provider as NiceModalProvider } from "@ebay/nice-modal-react"
 

frontends/main/src/page-components/ResourceCarousel/ResourceCarousel.tsx

@@ -15,7 +15,11 @@ import {
 import type { TabConfig } from "./types"
 import { LearningResource, PaginatedLearningResourceList } from "api"
 import { ResourceCard } from "../ResourceCard/ResourceCard"
-import { useQueries, UseQueryResult, UseQueryOptions } from "api/ssr"
+import {
+  useQueries,
+  UseQueryResult,
+  UseQueryOptions,
+} from "@tanstack/react-query"
 
 const StyledCarousel = styled(Carousel)({
   /**

frontends/main/src/test-utils/index.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import React from "react"
-import { QueryClientProvider } from "api/ssr"
+import { QueryClientProvider } from "@tanstack/react-query"
 import { ThemeProvider } from "ol-components"
 import { Provider as NiceModalProvider } from "@ebay/nice-modal-react"
-import type { QueryClient } from "api/ssr"
+import type { QueryClient } from "@tanstack/react-query"
 
 import { makeQueryClient } from "@/app/getQueryClient"
 import { render } from "@testing-library/react"