ref: Migrate useReposTeam to TS Query V5 (#3615)

Author: nsdeschenes

src/services/repos/useReposTeam.test.tsx renamed to src/services/repos/ReposTeamQueryOpts.test.tsx

@@ -1,21 +1,25 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import {
+  QueryClientProvider as QueryClientProviderV5,
+  QueryClient as QueryClientV5,
+  useInfiniteQuery as useInfiniteQueryV5,
+} from '@tanstack/react-queryV5'
 import { renderHook, waitFor } from '@testing-library/react'
 import { graphql, HttpResponse } from 'msw'
 import { setupServer } from 'msw/node'
 import { MemoryRouter, Route } from 'react-router-dom'
 import { MockInstance } from 'vitest'
 
-import { useReposTeam } from './useReposTeam'
+import { ReposTeamQueryOpts } from './ReposTeamQueryOpts'
 
-const queryClient = new QueryClient({
+const queryClientV5 = new QueryClientV5({
   defaultOptions: { queries: { retry: false } },
 })
 const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
-  <QueryClientProvider client={queryClient}>
+  <QueryClientProviderV5 client={queryClientV5}>
     <MemoryRouter initialEntries={['/gh/some-owner']}>
       <Route path="/:provider/:owner">{children}</Route>
     </MemoryRouter>
-  </QueryClientProvider>
+  </QueryClientProviderV5>
 )
 
 const repo1 = {
@@ -88,8 +92,8 @@ beforeAll(() => {
 })
 
 beforeEach(() => {
+  queryClientV5.clear()
   server.resetHandlers()
-  queryClient.clear()
 })
 
 afterAll(() => {
@@ -129,7 +133,14 @@ describe('useReposTeam', () => {
     it('returns repositories', async () => {
       setup()
       const { result } = renderHook(
-        () => useReposTeam({ activated: true, owner: 'codecov' }),
+        () =>
+          useInfiniteQueryV5(
+            ReposTeamQueryOpts({
+              provider: 'gh',
+              activated: true,
+              owner: 'codecov',
+            })
+          ),
         { wrapper }
       )
 
@@ -145,7 +156,7 @@ describe('useReposTeam', () => {
               },
             },
           ],
-          pageParams: [undefined],
+          pageParams: [''],
         })
       )
     })
@@ -155,7 +166,15 @@ describe('useReposTeam', () => {
     it('returns repositories of the user', async () => {
       setup()
       const { result } = renderHook(
-        () => useReposTeam({ owner: 'codecov', activated: true, first: 2 }),
+        () =>
+          useInfiniteQueryV5(
+            ReposTeamQueryOpts({
+              provider: 'gh',
+              activated: true,
+              owner: 'codecov',
+              first: 2,
+            })
+          ),
         { wrapper }
       )
 
@@ -178,13 +197,10 @@ describe('useReposTeam', () => {
             {
               repos: [repo3, repo4],
               isCurrentUserPartOfOrg: true,
-              pageInfo: {
-                hasNextPage: false,
-                endCursor: 'aa',
-              },
+              pageInfo: { hasNextPage: false, endCursor: 'aa' },
             },
           ],
-          pageParams: [undefined, 'MjAyMC0wOC0xMSAxNzozMDowMiswMDowMHwxMDA='],
+          pageParams: ['', 'MjAyMC0wOC0xMSAxNzozMDowMiswMDowMHwxMDA='],
         })
       )
     })
@@ -204,13 +220,24 @@ describe('useReposTeam', () => {
     it('throws an error', async () => {
       setup({ invalidResponse: true })
       const { result } = renderHook(
-        () => useReposTeam({ owner: 'codecov', activated: true, first: 2 }),
+        () =>
+          useInfiniteQueryV5(
+            ReposTeamQueryOpts({
+              provider: 'gh',
+              activated: true,
+              owner: 'codecov',
+              first: 2,
+            })
+          ),
         { wrapper }
       )
 
       await waitFor(() =>
         expect(result.current.error).toEqual(
-          expect.objectContaining({ status: 404 })
+          expect.objectContaining({
+            status: 404,
+            dev: 'ReposTeamQueryOpts - 404 Failed to parse schema',
+          })
         )
       )
     })

src/services/repos/useReposTeam.tsx renamed to src/services/repos/ReposTeamQueryOpts.tsx

@@ -1,11 +1,16 @@
-import { useInfiniteQuery } from '@tanstack/react-query'
-import { useParams } from 'react-router-dom'
+import { infiniteQueryOptions as infiniteQueryOptionsV5 } from '@tanstack/react-queryV5'
 import { z } from 'zod'
 
 import Api from 'shared/api'
+import { rejectNetworkError } from 'shared/api/helpers'
 import { mapEdges } from 'shared/utils/graphql'
 
-import { orderingOptions } from './config'
+import {
+  nonActiveOrderingOptions,
+  OrderingDirection,
+  orderingOptions,
+  TeamOrdering,
+} from './orderingOptions'
 
 const RepositorySchema = z
   .object({
@@ -27,7 +32,7 @@ const RepositorySchema = z
   })
   .nullable()
 
-export type Repository = z.infer<typeof RepositorySchema>
+type Repository = z.infer<typeof RepositorySchema>
 
 const RequestSchema = z.object({
   owner: z
@@ -92,7 +97,8 @@ const query = `query GetReposTeam(
   }
 }`
 
-interface UseReposTeamArgs {
+interface ReposTeamQueryArgs {
+  provider: string
   activated?: boolean
   term?: string
   owner: string
@@ -104,24 +110,23 @@ interface UseReposTeamArgs {
   repoNames?: string[]
 }
 
-export function useReposTeam({
+function ReposTeamQueryOpts({
+  provider,
   activated,
   term,
   owner,
   sortItem = orderingOptions[0],
   first = 20,
   repoNames,
-  ...options
-}: UseReposTeamArgs) {
-  const { provider } = useParams<{ provider: string }>()
+}: ReposTeamQueryArgs) {
   const variables = {
     filters: { activated, term, repoNames },
     ordering: sortItem?.ordering,
     direction: sortItem?.direction,
     first,
   }
 
-  return useInfiniteQuery({
+  return infiniteQueryOptionsV5({
     queryKey: ['GetReposTeam', provider, variables, owner],
     queryFn: ({ pageParam, signal }) => {
       return Api.graphql({
@@ -137,9 +142,11 @@ export function useReposTeam({
         const parsedRes = RequestSchema.safeParse(res?.data)
 
         if (!parsedRes.success) {
-          return Promise.reject({
+          return rejectNetworkError({
             status: 404,
-            data: null,
+            data: {},
+            dev: 'ReposTeamQueryOpts - 404 Failed to parse schema',
+            error: parsedRes.error,
           })
         }
 
@@ -152,8 +159,21 @@ export function useReposTeam({
         }
       })
     },
-    getNextPageParam: (data) =>
-      data?.pageInfo?.hasNextPage ? data.pageInfo.endCursor : undefined,
-    ...options,
+    initialPageParam: '',
+    getNextPageParam: (data) => {
+      if (data?.pageInfo?.hasNextPage) {
+        return data.pageInfo.endCursor
+      }
+      return null
+    },
   })
 }
+
+export {
+  type Repository,
+  orderingOptions,
+  nonActiveOrderingOptions,
+  OrderingDirection,
+  ReposTeamQueryOpts,
+  TeamOrdering,
+}

src/services/repos/index.ts

@@ -1,3 +1,2 @@
 export * from './useRepos'
-export * from './config'
-export * from './useReposTeam'
+export * from './orderingOptions'

src/services/repos/config.ts renamed to src/services/repos/orderingOptions.ts

@@ -5,7 +5,7 @@ import { RepositoryConfigSchema } from 'services/repo/useRepoConfig'
 import Api from 'shared/api'
 import { mapEdges } from 'shared/utils/graphql'
 
-import { orderingOptions } from './config'
+import { orderingOptions } from './orderingOptions'
 
 const RepositorySchema = z
   .object({