chore: Migrate useSyncProviders to TS Query V5 (#3573)

Author: nsdeschenes

src/pages/SyncProviderPage/SyncProviderPage.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, http, HttpResponse } from 'msw'
 import { setupServer } from 'msw/node'
@@ -22,30 +26,35 @@ const createMockedInternalUser = (
   owners: owner !== undefined ? [owner] : [],
 })
 
+const server = setupServer()
 const queryClient = new QueryClient({
-  defaultOptions: { queries: { suspense: true } },
+  defaultOptions: { queries: { retry: false, suspense: true } },
+})
+const queryClientV5 = new QueryClientV5({
+  defaultOptions: { queries: { retry: false } },
 })
-const server = setupServer()
 
 const testLocation: { pathname: string } = {
   pathname: '',
 }
 
 const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
-  <QueryClientProvider client={queryClient}>
-    <MemoryRouter initialEntries={['/sync']}>
-      <Route path="/sync">
-        <Suspense fallback={<p>Loading</p>}>{children}</Suspense>
-      </Route>
-      <Route
-        path="*"
-        render={({ location }) => {
-          testLocation.pathname = location.pathname
-          return null
-        }}
-      />
-    </MemoryRouter>
-  </QueryClientProvider>
+  <QueryClientProviderV5 client={queryClientV5}>
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={['/sync']}>
+        <Route path="/sync">
+          <Suspense fallback={<p>Loading</p>}>{children}</Suspense>
+        </Route>
+        <Route
+          path="*"
+          render={({ location }) => {
+            testLocation.pathname = location.pathname
+            return null
+          }}
+        />
+      </MemoryRouter>
+    </QueryClientProvider>
+  </QueryClientProviderV5>
 )
 
 beforeAll(() => {
@@ -54,6 +63,7 @@ beforeAll(() => {
 
 afterEach(() => {
   queryClient.clear()
+  queryClientV5.clear()
   server.resetHandlers()
 })
 

src/pages/SyncProviderPage/SyncProviderPage.tsx

@@ -1,20 +1,17 @@
+import { useSuspenseQuery as useSuspenseQueryV5 } from '@tanstack/react-queryV5'
 import gt from 'lodash/gt'
 import isEmpty from 'lodash/isEmpty'
 import { Redirect } from 'react-router-dom'
 
-import { useSyncProviders } from 'services/config'
+import { SyncProvidersQueryOpts } from 'services/config/SyncProvidersQueryOpts'
 import { useInternalUser } from 'services/user/useInternalUser'
 import { loginProviderToShortName } from 'shared/utils/loginProviders'
 import A from 'ui/A'
 
 import SyncButton from './SyncButton'
 
-interface SyncButtonProps {
-  hasSynced: boolean
-}
-
-const SyncButtons: React.FC<SyncButtonProps> = ({ hasSynced }) => {
-  const { data: syncProviders } = useSyncProviders({ enabled: !hasSynced })
+const SyncButtons: React.FC = () => {
+  const { data: syncProviders } = useSuspenseQueryV5(SyncProvidersQueryOpts())
 
   if (isEmpty(syncProviders)) {
     return (
@@ -80,7 +77,7 @@ const SyncProviderPage: React.FC = () => {
         </p>
       </div>
       <div className="mx-auto mt-2 w-96 space-y-4 border-t border-ds-gray-secondary pt-4">
-        <SyncButtons hasSynced={hasSynced} />
+        <SyncButtons />
       </div>
     </div>
   )

src/services/config/useSyncProviders.test.tsx renamed to src/services/config/SyncProvidersQueryOpts.test.tsx

@@ -1,31 +1,45 @@
 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 { MemoryRouter, Route } from 'react-router-dom'
 
-import { EnterpriseSyncProviders, useSyncProviders } from './useSyncProviders'
+import {
+  EnterpriseSyncProviders,
+  SyncProvidersQueryOpts,
+} from './SyncProvidersQueryOpts'
 
 const server = setupServer()
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
 })
+const queryClientV5 = new QueryClientV5({
+  defaultOptions: { queries: { retry: false } },
+})
 
 const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
-  <QueryClientProvider client={queryClient}>
-    <MemoryRouter initialEntries={['/']}>
-      <Route path="/">{children}</Route>
-    </MemoryRouter>
-  </QueryClientProvider>
+  <QueryClientProviderV5 client={queryClientV5}>
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={['/']}>
+        <Route path="/">{children}</Route>
+      </MemoryRouter>
+    </QueryClientProvider>
+  </QueryClientProviderV5>
 )
 
 beforeAll(() => {
   server.listen()
 })
 
 beforeEach(() => {
-  server.resetHandlers()
   queryClient.clear()
+  queryClientV5.clear()
+  server.resetHandlers()
 })
 
 afterAll(() => {
@@ -54,13 +68,13 @@ describe('useSyncProviders', () => {
 
   describe('third party services are configured providers', () => {
     it('returns data', async () => {
-      setup({
-        syncProviders: ['GITHUB', 'GITLAB', 'BITBUCKET'],
-      })
-      const { result } = renderHook(() => useSyncProviders({}), { wrapper })
+      setup({ syncProviders: ['GITHUB', 'GITLAB', 'BITBUCKET'] })
+      const { result } = renderHook(
+        () => useQueryV5(SyncProvidersQueryOpts()),
+        { wrapper }
+      )
 
       await waitFor(() => result.current.isSuccess)
-
       await waitFor(() =>
         expect(result.current.data).toStrictEqual(['gh', 'gl', 'bb'])
       )
@@ -76,10 +90,12 @@ describe('useSyncProviders', () => {
           'BITBUCKET_SERVER',
         ],
       })
-      const { result } = renderHook(() => useSyncProviders({}), { wrapper })
+      const { result } = renderHook(
+        () => useQueryV5(SyncProvidersQueryOpts()),
+        { wrapper }
+      )
 
       await waitFor(() => result.current.isSuccess)
-
       await waitFor(() =>
         expect(result.current.data).toStrictEqual(['ghe', 'gle', 'bbs'])
       )
@@ -96,14 +112,13 @@ describe('useSyncProviders', () => {
     })
 
     it('throws an error', async () => {
-      setup({
-        hasParsingError: true,
-      })
-
-      const { result } = renderHook(() => useSyncProviders({}), { wrapper })
+      setup({ hasParsingError: true })
+      const { result } = renderHook(
+        () => useQueryV5(SyncProvidersQueryOpts()),
+        { wrapper }
+      )
 
       await waitFor(() => expect(result.current.isError).toBeTruthy())
-
       expect(result.current.error).toEqual(
         expect.objectContaining({ status: 404 })
       )

src/services/config/useSyncProviders.ts renamed to src/services/config/SyncProvidersQueryOpts.ts

@@ -1,7 +1,8 @@
-import { useQuery } from '@tanstack/react-query'
+import { queryOptions as queryOptionsV5 } from '@tanstack/react-queryV5'
 import { z } from 'zod'
 
 import Api from 'shared/api'
+import { rejectNetworkError } from 'shared/api/helpers'
 
 const EnterpriseSyncProvidersUnionSchema = z.union([
   z.literal('GITHUB'),
@@ -29,12 +30,8 @@ query GetSyncProviders {
   }
 }`
 
-interface UseSyncProvidersArgs {
-  enabled?: boolean
-}
-
-export const useSyncProviders = ({ enabled = true }: UseSyncProvidersArgs) => {
-  return useQuery({
+export const SyncProvidersQueryOpts = () => {
+  return queryOptionsV5({
     queryKey: ['GetSyncProviders'],
     queryFn: ({ signal }) => {
       return Api.graphql({
@@ -45,8 +42,11 @@ export const useSyncProviders = ({ enabled = true }: UseSyncProvidersArgs) => {
         const parsedRes = GetSyncProvidersSchema.safeParse(res?.data)
 
         if (!parsedRes.success) {
-          return Promise.reject({
+          return rejectNetworkError({
             status: 404,
+            data: {},
+            dev: `SyncProvidersQueryOpts - 404 Failed to parse`,
+            error: parsedRes.error,
           })
         }
 
@@ -81,6 +81,5 @@ export const useSyncProviders = ({ enabled = true }: UseSyncProvidersArgs) => {
         return syncProviders
       })
     },
-    enabled,
   })
 }