ref: Migrate useRevokeUserToken to TSQ V5 (#3719)

Author: nsdeschenes

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

@@ -3,11 +3,11 @@ import userEvent from '@testing-library/user-event'
 import { MemoryRouter, Route } from 'react-router-dom'
 import { type Mock } from 'vitest'
 
-import { useRevokeUserToken } from 'services/access'
+import { useRevokeUserToken } from 'services/access/useRevokeUserToken'
 
 import TokensTable from './TokensTable'
 
-vi.mock('services/access')
+vi.mock('services/access/useRevokeUserToken')
 const mockedUseRevokeUserToken = useRevokeUserToken as Mock
 
 window.confirm = () => true

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

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

src/services/access/index.ts

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

src/services/access/useRevokeUserToken.test.tsx

@@ -1,20 +1,23 @@
-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 { MemoryRouter, Route } from 'react-router-dom'
 
-import { useRevokeUserToken } from './index'
+import { useRevokeUserToken } from './useRevokeUserToken'
 
-const queryClient = new QueryClient({
+const queryClientV5 = new QueryClientV5({
   defaultOptions: { queries: { retry: false } },
 })
 const wrapper: React.FC<React.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'
@@ -26,7 +29,7 @@ beforeAll(() => {
 
 beforeEach(() => {
   server.resetHandlers()
-  queryClient.clear()
+  queryClientV5.clear()
 })
 
 afterAll(() => {

src/services/access/useRevokeUserToken.ts

@@ -1,9 +1,13 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query'
+import {
+  useMutation as useMutationV5,
+  useQueryClient as useQueryClientV5,
+} from '@tanstack/react-queryV5'
 
 import Api from 'shared/api'
 
-const query = `
-mutation RevokeUserToken($input: RevokeUserTokenInput!) {
+import { SessionsQueryOpts } from './SessionsQueryOpts'
+
+const query = `mutation RevokeUserToken($input: RevokeUserTokenInput!) {
   revokeUserToken(input: $input) {
     error {
       __typename
@@ -12,8 +16,8 @@ mutation RevokeUserToken($input: RevokeUserTokenInput!) {
 }`
 
 export function useRevokeUserToken({ provider }: { provider: string }) {
-  const queryClient = useQueryClient()
-  return useMutation({
+  const queryClient = useQueryClientV5()
+  return useMutationV5({
     mutationFn: ({ tokenid }: { tokenid: string }) => {
       return Api.graphqlMutation({
         provider,
@@ -22,10 +26,13 @@ export function useRevokeUserToken({ provider }: { provider: string }) {
           input: { tokenid },
         },
         mutationPath: 'revokeUserToken',
-      }).then(() => {
-        queryClient.invalidateQueries(['sessions'])
       })
     },
-    useErrorBoundary: true,
+    throwOnError: true,
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: SessionsQueryOpts({ provider }).queryKey,
+      })
+    },
   })
 }