ref: Migrate useSessions to TSQ V5 (#3715)

Author: nicholas-codecov

src/pages/AccountSettings/tabs/Access/Access.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 userEvent from '@testing-library/user-event'
 import { subDays } from 'date-fns'
@@ -80,31 +84,32 @@ const mockSessionInfo = {
 }
 
 const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      suspense: true,
-    },
-  },
+  defaultOptions: { queries: { retry: false, suspense: true } },
+})
+const queryClientV5 = new QueryClientV5({
+  defaultOptions: { queries: { retry: false } },
 })
 
 let testLocation: ReturnType<typeof useLocation>
 const wrapper: (initialEntries?: string) => React.FC<React.PropsWithChildren> =
   (initialEntries = '/account/gh/janedoe/access') =>
   ({ children }) => (
-    <QueryClientProvider client={queryClient}>
-      <MemoryRouter initialEntries={[initialEntries]}>
-        <Suspense fallback={<p>loading</p>}>
-          <Route path="/account/:provider/:owner/access">{children}</Route>
-          <Route
-            path="*"
-            render={({ location }) => {
-              testLocation = location
-              return null
-            }}
-          />
-        </Suspense>
-      </MemoryRouter>
-    </QueryClientProvider>
+    <QueryClientProviderV5 client={queryClientV5}>
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={[initialEntries]}>
+          <Suspense fallback={<p>loading</p>}>
+            <Route path="/account/:provider/:owner/access">{children}</Route>
+            <Route
+              path="*"
+              render={({ location }) => {
+                testLocation = location
+                return null
+              }}
+            />
+          </Suspense>
+        </MemoryRouter>
+      </QueryClientProvider>
+    </QueryClientProviderV5>
   )
 
 const server = setupServer()
@@ -114,6 +119,7 @@ beforeAll(() => {
 
 afterEach(() => {
   queryClient.clear()
+  queryClientV5.clear()
   server.resetHandlers()
 })
 

src/pages/AccountSettings/tabs/Access/Access.tsx

@@ -1,7 +1,8 @@
+import { useSuspenseQuery as useSuspenseQueryV5 } from '@tanstack/react-queryV5'
 import { useState } from 'react'
 import { Redirect, useParams } from 'react-router-dom'
 
-import { useSessions } from 'services/access'
+import { SessionsQueryOpts } from 'services/access/SessionsQueryOpts'
 import { useUser } from 'services/user'
 import Button from 'ui/Button'
 
@@ -18,9 +19,9 @@ function Access() {
   const { provider, owner } = useParams<URLParams>()
   const [showModal, setShowModal] = useState(false)
 
-  const { data: sessionData } = useSessions({
-    provider,
-  })
+  const { data: sessionData } = useSuspenseQueryV5(
+    SessionsQueryOpts({ provider })
+  )
 
   const { data: currentUser } = useUser()
 

src/pages/AccountSettings/tabs/Access/SessionsTable.test.tsx

@@ -6,7 +6,7 @@ import { setupServer } from 'msw/node'
 import { MemoryRouter, Route } from 'react-router-dom'
 import { type Mock } from 'vitest'
 
-import { Session } from 'services/access'
+import { Session } from 'services/access/SessionsQueryOpts'
 import { formatTimeToNow } from 'shared/utils/dates'
 
 import SessionsTable from './SessionsTable'

src/pages/AccountSettings/tabs/Access/SessionsTable.tsx

@@ -8,7 +8,8 @@ import isNull from 'lodash/isNull'
 import { useCallback, useMemo } from 'react'
 import { useParams } from 'react-router-dom'
 
-import { Session, useDeleteSession } from 'services/access'
+import { useDeleteSession } from 'services/access'
+import { Session } from 'services/access/SessionsQueryOpts'
 import { cn } from 'shared/utils/cn'
 import { formatTimeToNow } from 'shared/utils/dates'
 import Button from 'ui/Button'

src/pages/AccountSettings/tabs/Access/TokensTable.tsx

@@ -8,7 +8,8 @@ import isNull from 'lodash/isNull'
 import { useCallback, useMemo } from 'react'
 import { useParams } from 'react-router-dom'
 
-import { useRevokeUserToken, UserToken } from 'services/access'
+import { useRevokeUserToken } from 'services/access'
+import { UserToken } from 'services/access/SessionsQueryOpts'
 import { cn } from 'shared/utils/cn'
 import Button from 'ui/Button'
 

src/services/access/useSessions.test.tsx src/services/access/SessionsQueryOpts.test.tsx

@@ -1,4 +1,8 @@
-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'
@@ -7,18 +11,7 @@ import { MemoryRouter, Route } from 'react-router-dom'
 
 import { mapEdges } from 'shared/utils/graphql'
 
-import { Session, UserToken, useSessions } from './useSessions'
-
-const queryClient = new QueryClient({
-  defaultOptions: { queries: { retry: false } },
-})
-const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
-  <MemoryRouter initialEntries={['/gh']}>
-    <Route path="/:provider">
-      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-    </Route>
-  </MemoryRouter>
-)
+import { Session, SessionsQueryOpts, UserToken } from './SessionsQueryOpts'
 
 const provider = 'gh'
 
@@ -71,14 +64,25 @@ const tokens: { edges: { node: UserToken }[] } = {
   ],
 }
 
+const queryClientV5 = new QueryClientV5({
+  defaultOptions: { queries: { retry: false } },
+})
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
+  <QueryClientProviderV5 client={queryClientV5}>
+    <MemoryRouter initialEntries={['/gh']}>
+      <Route path="/:provider">{children}</Route>
+    </MemoryRouter>
+  </QueryClientProviderV5>
+)
+
 const server = setupServer()
 beforeAll(() => {
   server.listen()
 })
 
 beforeEach(() => {
   server.resetHandlers()
-  queryClient.clear()
+  queryClientV5.clear()
 })
 
 afterAll(() => {
@@ -119,14 +123,12 @@ describe('useSessions', () => {
   }
 
   describe('when called and response parsing fails', () => {
-    beforeEach(() => {
-      setup({ isUnsuccessfulParseError: true })
-    })
-
     it('throws a 404', async () => {
-      const { result } = renderHook(() => useSessions({ provider }), {
-        wrapper,
-      })
+      setup({ isUnsuccessfulParseError: true })
+      const { result } = renderHook(
+        () => useQueryV5(SessionsQueryOpts({ provider })),
+        { wrapper }
+      )
 
       await waitFor(() => expect(result.current.isError).toBeTruthy())
       await waitFor(() =>
@@ -141,43 +143,32 @@ describe('useSessions', () => {
   })
 
   describe('when called and user is unauthenticated', () => {
-    beforeEach(() => {
-      setup({
-        dataReturned: {
-          me: null,
-        },
-      })
-    })
-
     it('returns null', async () => {
-      const { result } = renderHook(() => useSessions({ provider }), {
-        wrapper,
-      })
+      setup({ dataReturned: { me: null } })
+      const { result } = renderHook(
+        () => useQueryV5(SessionsQueryOpts({ provider })),
+        { wrapper }
+      )
 
       await waitFor(() => expect(result.current.data).toEqual(null))
     })
   })
 
   describe('when called and user is authenticated', () => {
-    beforeEach(() => {
+    it('returns sessions', async () => {
       setup({
         dataReturned: {
           me: {
-            sessions: {
-              edges: [...sessions.edges],
-            },
-            tokens: {
-              edges: [...tokens.edges],
-            },
+            sessions: { edges: [...sessions.edges] },
+            tokens: { edges: [...tokens.edges] },
           },
         },
       })
-    })
 
-    it('returns sessions', async () => {
-      const { result } = renderHook(() => useSessions({ provider }), {
-        wrapper,
-      })
+      const { result } = renderHook(
+        () => useQueryV5(SessionsQueryOpts({ provider })),
+        { wrapper }
+      )
 
       await waitFor(() =>
         expect(result.current.data).toEqual({

src/services/access/useSessions.ts src/services/access/SessionsQueryOpts.ts

@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query'
+import { queryOptions as queryOptionsV5 } from '@tanstack/react-queryV5'
 import { z } from 'zod'
 
 import Api from 'shared/api'
@@ -47,42 +47,40 @@ const RequestSchema = z.object({
     .nullable(),
 })
 
-interface UseSessionsArgs {
-  provider: string
-}
-
-export function useSessions({ provider }: UseSessionsArgs) {
-  const query = `
-    query MySessions {
-      me {
-        sessions {
-          edges {
-            node{
-              sessionid
-              name
-              ip
-              lastseen
-              useragent
-              type
-              lastFour
-            }
-          }
+const query = `query MySessions {
+  me {
+    sessions {
+      edges {
+        node {
+          sessionid
+          name
+          ip
+          lastseen
+          useragent
+          type
+          lastFour
         }
-        tokens {
-          edges {
-            node {
-              type
-              name
-              lastFour
-              id
-            }
-          }
+      }
+    }
+    tokens {
+      edges {
+        node {
+          type
+          name
+          lastFour
+          id
         }
       }
     }
-  `
+  }
+}`
+
+interface SessionsQueryArgs {
+  provider: string
+}
 
-  return useQuery({
+export function SessionsQueryOpts({ provider }: SessionsQueryArgs) {
+  return queryOptionsV5({
     queryKey: ['sessions', provider, query],
     queryFn: ({ signal }) =>
       Api.graphql({

src/services/access/index.ts

@@ -1,4 +1,3 @@
-export * from './useSessions'
 export * from './useDeleteSession'
 export * from './useRevokeUserToken'
 export * from './useGenerateUserToken'