From 382246a8c893c53dc7e327e8268d50b95beb4efe Mon Sep 17 00:00:00 2001 From: nicholas-codecov Date: Thu, 9 Jan 2025 11:30:14 -0400 Subject: [PATCH] ref: Migrate useRepoConfigurationStatus to TS Query V5 (#3618) --- .../ConfigurationManager.test.tsx | 28 ++++--- .../ConfigurationManager.tsx | 17 ++-- ...RepoConfigurationStatusQueryOpts.test.tsx} | 84 +++++++++++-------- ...x => RepoConfigurationStatusQueryOpts.tsx} | 34 ++++---- 4 files changed, 95 insertions(+), 68 deletions(-) rename src/pages/RepoPage/ConfigTab/tabs/ConfigurationManager/hooks/useRepoConfigurationStatus/{useRepoConfigurationStatus.test.tsx => RepoConfigurationStatusQueryOpts.test.tsx} (73%) rename src/pages/RepoPage/ConfigTab/tabs/ConfigurationManager/hooks/useRepoConfigurationStatus/{useRepoConfigurationStatus.tsx => RepoConfigurationStatusQueryOpts.tsx} (78%) diff --git a/src/pages/RepoPage/ConfigTab/tabs/ConfigurationManager/ConfigurationManager.test.tsx b/src/pages/RepoPage/ConfigTab/tabs/ConfigurationManager/ConfigurationManager.test.tsx index 209aac36e7..227005791d 100644 --- a/src/pages/RepoPage/ConfigTab/tabs/ConfigurationManager/ConfigurationManager.test.tsx +++ b/src/pages/RepoPage/ConfigTab/tabs/ConfigurationManager/ConfigurationManager.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, HttpResponse } from 'msw' import { setupServer } from 'msw/node' @@ -7,7 +11,7 @@ import { MemoryRouter, Route } from 'react-router' import { TierNames, TTierNames } from 'services/tier' import ConfigurationManager from './ConfigurationManager' -import { RepositoryConfiguration } from './hooks/useRepoConfigurationStatus/useRepoConfigurationStatus' +import { RepositoryConfiguration } from './hooks/useRepoConfigurationStatus/RepoConfigurationStatusQueryOpts' interface mockRepoConfigArgs { tierName?: TTierNames @@ -52,19 +56,20 @@ function mockRepoConfig({ } const queryClient = new QueryClient({ - defaultOptions: { - queries: { - retry: false, - }, - }, + defaultOptions: { queries: { retry: false } }, +}) +const queryClientV5 = new QueryClientV5({ + defaultOptions: { queries: { retry: false } }, }) const server = setupServer() const wrapper: React.FC = ({ children }) => ( - - - {children} - - + + + + {children} + + + ) beforeAll(() => { @@ -72,6 +77,7 @@ beforeAll(() => { }) afterEach(() => { queryClient.clear() + queryClientV5.clear() server.resetHandlers() }) afterAll(() => { diff --git a/src/pages/RepoPage/ConfigTab/tabs/ConfigurationManager/ConfigurationManager.tsx b/src/pages/RepoPage/ConfigTab/tabs/ConfigurationManager/ConfigurationManager.tsx index b5969e35e7..db15317422 100644 --- a/src/pages/RepoPage/ConfigTab/tabs/ConfigurationManager/ConfigurationManager.tsx +++ b/src/pages/RepoPage/ConfigTab/tabs/ConfigurationManager/ConfigurationManager.tsx @@ -1,3 +1,4 @@ +import { useSuspenseQuery as useSuspenseQueryV5 } from '@tanstack/react-queryV5' import { useParams } from 'react-router' import { TierNames } from 'services/tier' @@ -5,9 +6,9 @@ import { TierNames } from 'services/tier' import FeatureGroup from './components/FeatureGroup' import FeatureItem from './components/FeatureItem/FeatureItem' import { + RepoConfigurationStatusQueryOpts, RepositoryConfiguration, - useRepoConfigurationStatus, -} from './hooks/useRepoConfigurationStatus/useRepoConfigurationStatus' +} from './hooks/useRepoConfigurationStatus/RepoConfigurationStatusQueryOpts' interface URLParams { provider: string @@ -17,11 +18,13 @@ interface URLParams { function ConfigurationManager() { const { provider, owner, repo } = useParams() - const { data: repoConfiguration } = useRepoConfigurationStatus({ - provider, - owner, - repo, - }) + const { data: repoConfiguration } = useSuspenseQueryV5( + RepoConfigurationStatusQueryOpts({ + provider, + owner, + repo, + }) + ) return (
diff --git a/src/pages/RepoPage/ConfigTab/tabs/ConfigurationManager/hooks/useRepoConfigurationStatus/useRepoConfigurationStatus.test.tsx b/src/pages/RepoPage/ConfigTab/tabs/ConfigurationManager/hooks/useRepoConfigurationStatus/RepoConfigurationStatusQueryOpts.test.tsx similarity index 73% rename from src/pages/RepoPage/ConfigTab/tabs/ConfigurationManager/hooks/useRepoConfigurationStatus/useRepoConfigurationStatus.test.tsx rename to src/pages/RepoPage/ConfigTab/tabs/ConfigurationManager/hooks/useRepoConfigurationStatus/RepoConfigurationStatusQueryOpts.test.tsx index 073f5d5477..0e33bdbad3 100644 --- a/src/pages/RepoPage/ConfigTab/tabs/ConfigurationManager/hooks/useRepoConfigurationStatus/useRepoConfigurationStatus.test.tsx +++ b/src/pages/RepoPage/ConfigTab/tabs/ConfigurationManager/hooks/useRepoConfigurationStatus/RepoConfigurationStatusQueryOpts.test.tsx @@ -1,9 +1,13 @@ -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 { useRepoConfigurationStatus } from './useRepoConfigurationStatus' +import { RepoConfigurationStatusQueryOpts } from './RepoConfigurationStatusQueryOpts' const mockRepoNotFound = { owner: { @@ -49,20 +53,22 @@ const mockGoodResponse = { }, } -const queryClient = new QueryClient({ +const queryClientV5 = new QueryClientV5({ defaultOptions: { queries: { retry: false } }, }) const server = setupServer() const wrapper: React.FC = ({ children }) => ( - {children} + + {children} + ) beforeAll(() => { server.listen() }) afterEach(() => { - queryClient.clear() + queryClientV5.clear() server.resetHandlers() }) afterAll(() => { @@ -76,7 +82,7 @@ interface SetupArgs { nullOwner?: boolean } -describe('useRepoConfigurationStatus', () => { +describe('RepoConfigurationStatusQueryOpts', () => { function setup({ badResponse = false, repoNotFound = false, @@ -104,11 +110,13 @@ describe('useRepoConfigurationStatus', () => { console.error = () => {} const { result } = renderHook( () => - useRepoConfigurationStatus({ - provider: 'gh', - owner: 'codecov', - repo: 'cool-repo', - }), + useQueryV5( + RepoConfigurationStatusQueryOpts({ + provider: 'gh', + owner: 'codecov', + repo: 'cool-repo', + }) + ), { wrapper } ) @@ -118,7 +126,7 @@ describe('useRepoConfigurationStatus', () => { expect(result.current.failureReason).toMatchObject({ status: 404, data: {}, - dev: 'useRepoConfigurationStatus - 404 Failed to parse data', + dev: 'RepoConfigurationStatusQueryOpts - 404 Failed to parse data', }) ) }) @@ -128,11 +136,13 @@ describe('useRepoConfigurationStatus', () => { console.error = () => {} const { result } = renderHook( () => - useRepoConfigurationStatus({ - provider: 'gh', - owner: 'codecov', - repo: 'cool-repo', - }), + useQueryV5( + RepoConfigurationStatusQueryOpts({ + provider: 'gh', + owner: 'codecov', + repo: 'cool-repo', + }) + ), { wrapper } ) @@ -142,7 +152,7 @@ describe('useRepoConfigurationStatus', () => { expect(result.current.failureReason).toMatchObject({ status: 404, data: {}, - dev: 'useRepoConfigurationStatus - 404 Not found error', + dev: 'RepoConfigurationStatusQueryOpts - 404 Not found error', }) ) }) @@ -152,11 +162,13 @@ describe('useRepoConfigurationStatus', () => { console.error = () => {} const { result } = renderHook( () => - useRepoConfigurationStatus({ - provider: 'gh', - owner: 'codecov', - repo: 'cool-repo', - }), + useQueryV5( + RepoConfigurationStatusQueryOpts({ + provider: 'gh', + owner: 'codecov', + repo: 'cool-repo', + }) + ), { wrapper } ) @@ -166,7 +178,7 @@ describe('useRepoConfigurationStatus', () => { expect(result.current.failureReason).toMatchObject({ status: 403, data: {}, - dev: 'useRepoConfigurationStatus - 403 Owner not activated error', + dev: 'RepoConfigurationStatusQueryOpts - 403 Owner not activated error', }) ) }) @@ -175,11 +187,13 @@ describe('useRepoConfigurationStatus', () => { setup({ nullOwner: true }) const { result } = renderHook( () => - useRepoConfigurationStatus({ - provider: 'gh', - owner: 'codecov', - repo: 'cool-repo', - }), + useQueryV5( + RepoConfigurationStatusQueryOpts({ + provider: 'gh', + owner: 'codecov', + repo: 'cool-repo', + }) + ), { wrapper } ) @@ -197,11 +211,13 @@ describe('useRepoConfigurationStatus', () => { setup({}) const { result } = renderHook( () => - useRepoConfigurationStatus({ - provider: 'gh', - owner: 'codecov', - repo: 'cool-repo', - }), + useQueryV5( + RepoConfigurationStatusQueryOpts({ + provider: 'gh', + owner: 'codecov', + repo: 'cool-repo', + }) + ), { wrapper } ) diff --git a/src/pages/RepoPage/ConfigTab/tabs/ConfigurationManager/hooks/useRepoConfigurationStatus/useRepoConfigurationStatus.tsx b/src/pages/RepoPage/ConfigTab/tabs/ConfigurationManager/hooks/useRepoConfigurationStatus/RepoConfigurationStatusQueryOpts.tsx similarity index 78% rename from src/pages/RepoPage/ConfigTab/tabs/ConfigurationManager/hooks/useRepoConfigurationStatus/useRepoConfigurationStatus.tsx rename to src/pages/RepoPage/ConfigTab/tabs/ConfigurationManager/hooks/useRepoConfigurationStatus/RepoConfigurationStatusQueryOpts.tsx index 4c6ef18737..e5695ee5a3 100644 --- a/src/pages/RepoPage/ConfigTab/tabs/ConfigurationManager/hooks/useRepoConfigurationStatus/useRepoConfigurationStatus.tsx +++ b/src/pages/RepoPage/ConfigTab/tabs/ConfigurationManager/hooks/useRepoConfigurationStatus/RepoConfigurationStatusQueryOpts.tsx @@ -1,4 +1,4 @@ -import { useQuery } from '@tanstack/react-query' +import { queryOptions as queryOptionsV5 } from '@tanstack/react-queryV5' import { z } from 'zod' import { @@ -7,7 +7,7 @@ import { } from 'services/repo' import { TierNames } from 'services/tier' import Api from 'shared/api/api' -import { NetworkErrorObject } from 'shared/api/helpers' +import { rejectNetworkError } from 'shared/api/helpers' import A from 'ui/A' const RepositorySchema = z.object({ @@ -51,7 +51,8 @@ const RequestSchema = z.object({ .nullable(), }) -const query = `query GetRepoConfigurationStatus($owner: String!, $repo: String!){ +const query = ` +query GetRepoConfigurationStatus($owner: String!, $repo: String!) { owner(username: $owner) { plan { tierName @@ -79,18 +80,18 @@ const query = `query GetRepoConfigurationStatus($owner: String!, $repo: String!) } }` -interface UseRepoConfigurationStatusArgs { +interface RepoConfigurationStatusQueryArgs { provider: string owner: string repo: string } -export function useRepoConfigurationStatus({ +export function RepoConfigurationStatusQueryOpts({ provider, owner, repo, -}: UseRepoConfigurationStatusArgs) { - return useQuery({ +}: RepoConfigurationStatusQueryArgs) { + return queryOptionsV5({ queryKey: ['GetRepoConfigurationStatus', provider, owner, repo], queryFn: ({ signal }) => { return Api.graphql({ @@ -105,25 +106,26 @@ export function useRepoConfigurationStatus({ const parsedRes = RequestSchema.safeParse(res?.data) if (!parsedRes.success) { - return Promise.reject({ + return rejectNetworkError({ status: 404, data: {}, - dev: 'useRepoConfigurationStatus - 404 Failed to parse data', - } satisfies NetworkErrorObject) + dev: 'RepoConfigurationStatusQueryOpts - 404 Failed to parse data', + error: parsedRes.error, + }) } const data = parsedRes.data if (data?.owner?.repository?.__typename === 'NotFoundError') { - return Promise.reject({ + return rejectNetworkError({ status: 404, data: {}, - dev: 'useRepoConfigurationStatus - 404 Not found error', - } satisfies NetworkErrorObject) + dev: 'RepoConfigurationStatusQueryOpts - 404 Not found error', + }) } if (data?.owner?.repository?.__typename === 'OwnerNotActivatedError') { - return Promise.reject({ + return rejectNetworkError({ status: 403, data: { detail: ( @@ -135,8 +137,8 @@ export function useRepoConfigurationStatus({

), }, - dev: 'useRepoConfigurationStatus - 403 Owner not activated error', - } satisfies NetworkErrorObject) + dev: 'RepoConfigurationStatusQueryOpts - 403 Owner not activated error', + }) } return {