ref: Migrate useRepoConfigurationStatus to TS Query V5 (#3618)

codecov · Jan 9, 2025 · 382246a · 382246a
1 parent 0922fa3
commit 382246a
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 68 deletions.
diff --git a/src/pages/RepoPage/ConfigTab/tabs/ConfigurationManager/ConfigurationManager.test.tsx b/src/pages/RepoPage/ConfigTab/tabs/ConfigurationManager/ConfigurationManager.test.tsx
@@ -1,4 +1,8 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import {
+  QueryClientProvider as QueryClientProviderV5,
+  QueryClient as QueryClientV5,
+} from '@tanstack/react-queryV5'
 import { render, screen, waitFor } from '@testing-library/react'
 import { graphql, HttpResponse } from 'msw'
 import { setupServer } from 'msw/node'
@@ -7,7 +11,7 @@ import { MemoryRouter, Route } from 'react-router'
 import { TierNames, TTierNames } from 'services/tier'
 
 import ConfigurationManager from './ConfigurationManager'
-import { RepositoryConfiguration } from './hooks/useRepoConfigurationStatus/useRepoConfigurationStatus'
+import { RepositoryConfiguration } from './hooks/useRepoConfigurationStatus/RepoConfigurationStatusQueryOpts'
 
 interface mockRepoConfigArgs {
   tierName?: TTierNames
@@ -52,26 +56,28 @@ function mockRepoConfig({
 }
 
 const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      retry: false,
-    },
-  },
+  defaultOptions: { queries: { retry: false } },
+})
+const queryClientV5 = new QueryClientV5({
+  defaultOptions: { queries: { retry: false } },
 })
 const server = setupServer()
 const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
-  <QueryClientProvider client={queryClient}>
-    <MemoryRouter initialEntries={['/gh/codecov/cool-repo/config']}>
-      <Route path="/:provider/:owner/:repo/config">{children}</Route>
-    </MemoryRouter>
-  </QueryClientProvider>
+  <QueryClientProviderV5 client={queryClientV5}>
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={['/gh/codecov/cool-repo/config']}>
+        <Route path="/:provider/:owner/:repo/config">{children}</Route>
+      </MemoryRouter>
+    </QueryClientProvider>
+  </QueryClientProviderV5>
 )
 
 beforeAll(() => {
   server.listen()
 })
 afterEach(() => {
   queryClient.clear()
+  queryClientV5.clear()
   server.resetHandlers()
 })
 afterAll(() => {

diff --git a/src/pages/RepoPage/ConfigTab/tabs/ConfigurationManager/ConfigurationManager.tsx b/src/pages/RepoPage/ConfigTab/tabs/ConfigurationManager/ConfigurationManager.tsx
@@ -1,13 +1,14 @@
+import { useSuspenseQuery as useSuspenseQueryV5 } from '@tanstack/react-queryV5'
 import { useParams } from 'react-router'
 
 import { TierNames } from 'services/tier'
 
 import FeatureGroup from './components/FeatureGroup'
 import FeatureItem from './components/FeatureItem/FeatureItem'
 import {
+  RepoConfigurationStatusQueryOpts,
   RepositoryConfiguration,
-  useRepoConfigurationStatus,
-} from './hooks/useRepoConfigurationStatus/useRepoConfigurationStatus'
+} from './hooks/useRepoConfigurationStatus/RepoConfigurationStatusQueryOpts'
 
 interface URLParams {
   provider: string
@@ -17,11 +18,13 @@ interface URLParams {
 
 function ConfigurationManager() {
   const { provider, owner, repo } = useParams<URLParams>()
-  const { data: repoConfiguration } = useRepoConfigurationStatus({
-    provider,
-    owner,
-    repo,
-  })
+  const { data: repoConfiguration } = useSuspenseQueryV5(
+    RepoConfigurationStatusQueryOpts({
+      provider,
+      owner,
+      repo,
+    })
+  )
 
   return (
     <div className="flex flex-col gap-6 lg:w-3/4">

diff --git a/...tatus/useRepoConfigurationStatus.test.tsx → ...RepoConfigurationStatusQueryOpts.test.tsx b/...tatus/useRepoConfigurationStatus.test.tsx → ...RepoConfigurationStatusQueryOpts.test.tsx
@@ -1,9 +1,13 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import {
+  QueryClientProvider as QueryClientProviderV5,
+  QueryClient as QueryClientV5,
+  useQuery as useQueryV5,
+} from '@tanstack/react-queryV5'
 import { renderHook, waitFor } from '@testing-library/react'
 import { graphql, HttpResponse } from 'msw'
 import { setupServer } from 'msw/node'
 
-import { useRepoConfigurationStatus } from './useRepoConfigurationStatus'
+import { RepoConfigurationStatusQueryOpts } from './RepoConfigurationStatusQueryOpts'
 
 const mockRepoNotFound = {
   owner: {
@@ -49,20 +53,22 @@ const mockGoodResponse = {
   },
 }
 
-const queryClient = new QueryClient({
+const queryClientV5 = new QueryClientV5({
   defaultOptions: { queries: { retry: false } },
 })
 const server = setupServer()
 
 const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
-  <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  <QueryClientProviderV5 client={queryClientV5}>
+    {children}
+  </QueryClientProviderV5>
 )
 
 beforeAll(() => {
   server.listen()
 })
 afterEach(() => {
-  queryClient.clear()
+  queryClientV5.clear()
   server.resetHandlers()
 })
 afterAll(() => {
@@ -76,7 +82,7 @@ interface SetupArgs {
   nullOwner?: boolean
 }
 
-describe('useRepoConfigurationStatus', () => {
+describe('RepoConfigurationStatusQueryOpts', () => {
   function setup({
     badResponse = false,
     repoNotFound = false,
@@ -104,11 +110,13 @@ describe('useRepoConfigurationStatus', () => {
     console.error = () => {}
     const { result } = renderHook(
       () =>
-        useRepoConfigurationStatus({
-          provider: 'gh',
-          owner: 'codecov',
-          repo: 'cool-repo',
-        }),
+        useQueryV5(
+          RepoConfigurationStatusQueryOpts({
+            provider: 'gh',
+            owner: 'codecov',
+            repo: 'cool-repo',
+          })
+        ),
       { wrapper }
     )
 
@@ -118,7 +126,7 @@ describe('useRepoConfigurationStatus', () => {
       expect(result.current.failureReason).toMatchObject({
         status: 404,
         data: {},
-        dev: 'useRepoConfigurationStatus - 404 Failed to parse data',
+        dev: 'RepoConfigurationStatusQueryOpts - 404 Failed to parse data',
       })
     )
   })
@@ -128,11 +136,13 @@ describe('useRepoConfigurationStatus', () => {
     console.error = () => {}
     const { result } = renderHook(
       () =>
-        useRepoConfigurationStatus({
-          provider: 'gh',
-          owner: 'codecov',
-          repo: 'cool-repo',
-        }),
+        useQueryV5(
+          RepoConfigurationStatusQueryOpts({
+            provider: 'gh',
+            owner: 'codecov',
+            repo: 'cool-repo',
+          })
+        ),
       { wrapper }
     )
 
@@ -142,7 +152,7 @@ describe('useRepoConfigurationStatus', () => {
       expect(result.current.failureReason).toMatchObject({
         status: 404,
         data: {},
-        dev: 'useRepoConfigurationStatus - 404 Not found error',
+        dev: 'RepoConfigurationStatusQueryOpts - 404 Not found error',
       })
     )
   })
@@ -152,11 +162,13 @@ describe('useRepoConfigurationStatus', () => {
     console.error = () => {}
     const { result } = renderHook(
       () =>
-        useRepoConfigurationStatus({
-          provider: 'gh',
-          owner: 'codecov',
-          repo: 'cool-repo',
-        }),
+        useQueryV5(
+          RepoConfigurationStatusQueryOpts({
+            provider: 'gh',
+            owner: 'codecov',
+            repo: 'cool-repo',
+          })
+        ),
       { wrapper }
     )
 
@@ -166,7 +178,7 @@ describe('useRepoConfigurationStatus', () => {
       expect(result.current.failureReason).toMatchObject({
         status: 403,
         data: {},
-        dev: 'useRepoConfigurationStatus - 403 Owner not activated error',
+        dev: 'RepoConfigurationStatusQueryOpts - 403 Owner not activated error',
       })
     )
   })
@@ -175,11 +187,13 @@ describe('useRepoConfigurationStatus', () => {
     setup({ nullOwner: true })
     const { result } = renderHook(
       () =>
-        useRepoConfigurationStatus({
-          provider: 'gh',
-          owner: 'codecov',
-          repo: 'cool-repo',
-        }),
+        useQueryV5(
+          RepoConfigurationStatusQueryOpts({
+            provider: 'gh',
+            owner: 'codecov',
+            repo: 'cool-repo',
+          })
+        ),
       { wrapper }
     )
 
@@ -197,11 +211,13 @@ describe('useRepoConfigurationStatus', () => {
     setup({})
     const { result } = renderHook(
       () =>
-        useRepoConfigurationStatus({
-          provider: 'gh',
-          owner: 'codecov',
-          repo: 'cool-repo',
-        }),
+        useQueryV5(
+          RepoConfigurationStatusQueryOpts({
+            provider: 'gh',
+            owner: 'codecov',
+            repo: 'cool-repo',
+          })
+        ),
       { wrapper }
     )
 

diff --git a/...tionStatus/useRepoConfigurationStatus.tsx → ...atus/RepoConfigurationStatusQueryOpts.tsx b/...tionStatus/useRepoConfigurationStatus.tsx → ...atus/RepoConfigurationStatusQueryOpts.tsx
@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query'
+import { queryOptions as queryOptionsV5 } from '@tanstack/react-queryV5'
 import { z } from 'zod'
 
 import {
@@ -7,7 +7,7 @@ import {
 } from 'services/repo'
 import { TierNames } from 'services/tier'
 import Api from 'shared/api/api'
-import { NetworkErrorObject } from 'shared/api/helpers'
+import { rejectNetworkError } from 'shared/api/helpers'
 import A from 'ui/A'
 
 const RepositorySchema = z.object({
@@ -51,7 +51,8 @@ const RequestSchema = z.object({
     .nullable(),
 })
 
-const query = `query GetRepoConfigurationStatus($owner: String!, $repo: String!){
+const query = `
+query GetRepoConfigurationStatus($owner: String!, $repo: String!) {
   owner(username: $owner) {
     plan {
       tierName
@@ -79,18 +80,18 @@ const query = `query GetRepoConfigurationStatus($owner: String!, $repo: String!)
   }
 }`
 
-interface UseRepoConfigurationStatusArgs {
+interface RepoConfigurationStatusQueryArgs {
   provider: string
   owner: string
   repo: string
 }
 
-export function useRepoConfigurationStatus({
+export function RepoConfigurationStatusQueryOpts({
   provider,
   owner,
   repo,
-}: UseRepoConfigurationStatusArgs) {
-  return useQuery({
+}: RepoConfigurationStatusQueryArgs) {
+  return queryOptionsV5({
     queryKey: ['GetRepoConfigurationStatus', provider, owner, repo],
     queryFn: ({ signal }) => {
       return Api.graphql({
@@ -105,25 +106,26 @@ export function useRepoConfigurationStatus({
         const parsedRes = RequestSchema.safeParse(res?.data)
 
         if (!parsedRes.success) {
-          return Promise.reject({
+          return rejectNetworkError({
             status: 404,
             data: {},
-            dev: 'useRepoConfigurationStatus - 404 Failed to parse data',
-          } satisfies NetworkErrorObject)
+            dev: 'RepoConfigurationStatusQueryOpts - 404 Failed to parse data',
+            error: parsedRes.error,
+          })
         }
 
         const data = parsedRes.data
 
         if (data?.owner?.repository?.__typename === 'NotFoundError') {
-          return Promise.reject({
+          return rejectNetworkError({
             status: 404,
             data: {},
-            dev: 'useRepoConfigurationStatus - 404 Not found error',
-          } satisfies NetworkErrorObject)
+            dev: 'RepoConfigurationStatusQueryOpts - 404 Not found error',
+          })
         }
 
         if (data?.owner?.repository?.__typename === 'OwnerNotActivatedError') {
-          return Promise.reject({
+          return rejectNetworkError({
             status: 403,
             data: {
               detail: (
@@ -135,8 +137,8 @@ export function useRepoConfigurationStatus({
                 </p>
               ),
             },
-            dev: 'useRepoConfigurationStatus - 403 Owner not activated error',
-          } satisfies NetworkErrorObject)
+            dev: 'RepoConfigurationStatusQueryOpts - 403 Owner not activated error',
+          })
         }
 
         return {