ref: Migrate useGenerateUserToken to TSQ V5 (#3735)

Author: nsdeschenes

src/pages/AccountSettings/tabs/Access/CreateTokenModal.jsx

@@ -2,29 +2,25 @@ import PropTypes from 'prop-types'
 import { useState } from 'react'
 import { useForm } from 'react-hook-form'
 
-import { useGenerateUserToken } from 'services/access'
+import { useGenerateUserToken } from 'services/access/useGenerateUserToken'
 import Button from 'ui/Button'
 import { CopyClipboard } from 'ui/CopyClipboard'
 import Modal from 'ui/Modal'
 import TextInput from 'ui/TextInput/TextInput'
 
 function CreateTokenModal({ closeModal, provider }) {
+  const [token, setToken] = useState(null)
   const { register, handleSubmit, watch } = useForm({
-    defaultValues: {
-      name: '',
-    },
+    defaultValues: { name: '' },
   })
   const nameValue = watch('name', '')
-
-  const [token, setToken] = useState(null)
-
   const { mutate, isLoading } = useGenerateUserToken({ provider })
 
   const submit = ({ name }) => {
     mutate(
       { name },
       {
-        onSuccess: ({ data }) => {
+        onSuccess: (data) => {
           setToken(data?.createUserToken?.fullToken)
         },
       }

src/pages/AccountSettings/tabs/Access/CreateTokenModal.test.jsx

@@ -1,32 +1,55 @@
-import { render, screen, waitFor } from 'custom-testing-library'
-
+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 { useGenerateUserToken } from 'services/access'
+import { graphql, HttpResponse } from 'msw'
+import { setupServer } from 'msw/node'
 
 import CreateTokenModal from './CreateTokenModal'
 
-vi.mock('services/access')
+const queryClientV5 = new QueryClientV5({
+  defaultOptions: { queries: { retry: false } },
+})
+
+const wrapper = ({ children }) => (
+  <QueryClientProviderV5 client={queryClientV5}>
+    {children}
+  </QueryClientProviderV5>
+)
+
+const server = setupServer()
+
+beforeAll(() => {
+  server.listen()
+})
+
+beforeEach(() => {
+  queryClientV5.clear()
+  server.resetHandlers()
+})
+
+afterAll(() => {
+  server.close()
+})
 
 describe('CreateTokenModal', () => {
   function setup() {
     const user = userEvent.setup()
     const closeModal = vi.fn()
-    const success = {
-      data: {
-        createUserToken: {
-          fullToken: '111-222-333',
-        },
-      },
-    }
-    const mutate = vi.fn((_, { onSuccess }) => {
-      return onSuccess(success)
-    })
-    useGenerateUserToken.mockReturnValue({
-      mutate,
-    })
+    const mutateMock = vi.fn()
+
+    server.use(
+      graphql.mutation('CreateUserToken', (info) => {
+        mutateMock(info.variables)
+        return HttpResponse.json({
+          data: { createUserToken: { fullToken: '111-222-333', error: null } },
+        })
+      })
+    )
 
-    return { mutate, closeModal, user }
+    return { mutateMock, closeModal, user }
   }
 
   describe('renders initial CreateTokenModal', () => {
@@ -38,7 +61,8 @@ describe('CreateTokenModal', () => {
           provider="gh"
           showModal={true}
           closeModal={closeModal}
-        />
+        />,
+        { wrapper }
       )
 
       const title = screen.getByText(/Generate new API access token/)
@@ -52,7 +76,8 @@ describe('CreateTokenModal', () => {
           provider="gh"
           showModal={true}
           closeModal={closeModal}
-        />
+        />,
+        { wrapper }
       )
 
       const label = screen.getByText(/Token Name/)
@@ -68,7 +93,8 @@ describe('CreateTokenModal', () => {
           provider="gh"
           showModal={true}
           closeModal={closeModal}
-        />
+        />,
+        { wrapper }
       )
 
       const buttons = screen.getAllByRole('button')
@@ -78,21 +104,25 @@ describe('CreateTokenModal', () => {
 
   describe('when the user types a token name and submits', () => {
     it('calls the mutation', async () => {
-      const { mutate, closeModal, user } = setup()
+      const { mutateMock, closeModal, user } = setup()
       render(
         <CreateTokenModal
           provider="gh"
           showModal={true}
           closeModal={closeModal}
-        />
+        />,
+        { wrapper }
       )
 
       const input = screen.getByRole('textbox')
       await user.type(input, '2333')
       const generateToken = screen.getByText('Generate Token')
       await user.click(generateToken)
 
-      expect(mutate).toHaveBeenCalled()
+      await waitFor(() => expect(mutateMock).toHaveBeenCalled())
+      expect(mutateMock).toHaveBeenCalledWith({
+        input: { name: '2333', tokenType: 'api' },
+      })
     })
 
     describe('when mutation is successful', () => {
@@ -103,7 +133,8 @@ describe('CreateTokenModal', () => {
             provider="gh"
             showModal={true}
             closeModal={closeModal}
-          />
+          />,
+          { wrapper }
         )
 
         const title = await screen.findByText(/API access token/)
@@ -117,7 +148,8 @@ describe('CreateTokenModal', () => {
             provider="gh"
             showModal={true}
             closeModal={closeModal}
-          />
+          />,
+          { wrapper }
         )
 
         const input = screen.getByRole('textbox')
@@ -136,41 +168,48 @@ describe('CreateTokenModal', () => {
         const warning = screen.getByText(/Make sure to copy your token now/)
         expect(warning).toBeInTheDocument()
       })
+
       it('renders footer', async () => {
         const { closeModal, user } = setup()
         render(
           <CreateTokenModal
             provider="gh"
             showModal={true}
             closeModal={closeModal}
-          />
+          />,
+          { wrapper }
         )
 
         const input = screen.getByRole('textbox')
         await user.type(input, '2333')
+
         const generateToken = screen.getByText('Generate Token')
         await user.click(generateToken)
 
-        const button = screen.getByRole('button', {
+        const button = await screen.findByRole('button', {
           name: /done/i,
         })
         expect(button).toBeInTheDocument()
       })
+
       it('close modals', async () => {
         const { closeModal, user } = setup()
         render(
           <CreateTokenModal
             provider="gh"
             showModal={true}
             closeModal={closeModal}
-          />
+          />,
+          { wrapper }
         )
 
         const input = screen.getByRole('textbox')
         await user.type(input, '2333')
+
         const generateToken = screen.getByText('Generate Token')
         await user.click(generateToken)
-        const done = screen.getByText('Done')
+
+        const done = await screen.findByText('Done')
         await user.click(done)
 
         await waitFor(() => {

src/services/access/index.ts

@@ -1,21 +1,24 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import {
+  QueryClientProvider as QueryClientProviderV5,
+  QueryClient as QueryClientV5,
+} from '@tanstack/react-queryV5'
 import { renderHook, waitFor } from '@testing-library/react'
 import { graphql, HttpResponse } from 'msw'
 import { setupServer } from 'msw/node'
 import { PropsWithChildren } from 'react'
 import { MemoryRouter, Route } from 'react-router-dom'
 
-import { useGenerateUserToken } from './index'
+import { useGenerateUserToken } from './useGenerateUserToken'
 
-const queryClient = new QueryClient({
+const queryClientV5 = new QueryClientV5({
   defaultOptions: { queries: { retry: false } },
 })
 const wrapper: React.FC<PropsWithChildren> = ({ children }) => (
-  <MemoryRouter initialEntries={['/gh']}>
-    <Route path="/:provider">
-      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-    </Route>
-  </MemoryRouter>
+  <QueryClientProviderV5 client={queryClientV5}>
+    <MemoryRouter initialEntries={['/gh']}>
+      <Route path="/:provider">{children}</Route>
+    </MemoryRouter>
+  </QueryClientProviderV5>
 )
 
 const provider = 'gh'
@@ -27,7 +30,7 @@ beforeAll(() => {
 
 beforeEach(() => {
   server.resetHandlers()
-  queryClient.clear()
+  queryClientV5.clear()
 })
 
 afterAll(() => {

src/services/access/useGenerateUserToken.test.tsx

@@ -1,14 +1,19 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query'
+import {
+  useMutation as useMutationV5,
+  useQueryClient as useQueryClientV5,
+} from '@tanstack/react-queryV5'
 import { z } from 'zod'
 
 import Api from 'shared/api'
-import { NetworkErrorObject, rejectNetworkError } from 'shared/api/helpers'
+import { rejectNetworkError } from 'shared/api/helpers'
 
 import { USER_TOKEN_TYPE } from './constants'
+import { SessionsQueryOpts } from './SessionsQueryOpts'
 
 const UseGenerateTokenResponseSchema = z.object({
   createUserToken: z
     .object({
+      fullToken: z.string().nullable(),
       error: z
         .discriminatedUnion('__typename', [
           z.object({
@@ -21,45 +26,47 @@ const UseGenerateTokenResponseSchema = z.object({
           }),
         ])
         .nullable(),
-      fullToken: z.string().nullable(),
     })
     .nullable(),
 })
 
+const query = `mutation CreateUserToken($input: CreateUserTokenInput!) {
+  createUserToken(input: $input) {
+    fullToken
+    error {
+      __typename
+    }
+  }
+}`
+
 export function useGenerateUserToken({ provider }: { provider: string }) {
-  const queryClient = useQueryClient()
-  return useMutation({
+  const queryClientV5 = useQueryClientV5()
+  return useMutationV5({
     mutationFn: ({ name }: { name: string }) => {
-      const query = `
-        mutation CreateUserToken($input: CreateUserTokenInput!) {
-          createUserToken(input: $input) {
-            error {
-              __typename
-            }
-            fullToken
-          }
-        }
-      `
       const variables = { input: { name, tokenType: USER_TOKEN_TYPE.API } }
       return Api.graphqlMutation({
         provider,
         query,
         variables,
         mutationPath: 'createUserToken',
+      }).then((res) => {
+        const parsedData = UseGenerateTokenResponseSchema.safeParse(res?.data)
+        if (!parsedData.success) {
+          return rejectNetworkError({
+            status: 404,
+            data: {},
+            dev: 'useGenerateUserToken - 404 failed to parse',
+          })
+        }
+
+        return parsedData.data
       })
     },
-    useErrorBoundary: true,
-    onSuccess: ({ data }) => {
-      queryClient.invalidateQueries(['sessions'])
-
-      const parsedData = UseGenerateTokenResponseSchema.safeParse(data)
-      if (!parsedData.success) {
-        return rejectNetworkError({
-          status: 404,
-          data: {},
-          dev: 'useGenerateUserToken - 404 failed to parse',
-        } satisfies NetworkErrorObject)
-      }
+    throwOnError: true,
+    onSuccess: () => {
+      queryClientV5.invalidateQueries({
+        queryKey: SessionsQueryOpts({ provider }).queryKey,
+      })
     },
   })
 }