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 77% 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..6cd04b8300 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(() => { @@ -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 } ) @@ -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 } ) @@ -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 } ) @@ -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 84% 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..dc93e0a425 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) + 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) + }) } if (data?.owner?.repository?.__typename === 'OwnerNotActivatedError') { - return Promise.reject({ + return rejectNetworkError({ status: 403, data: { detail: ( @@ -136,7 +138,7 @@ export function useRepoConfigurationStatus({ ), }, dev: 'useRepoConfigurationStatus - 403 Owner not activated error', - } satisfies NetworkErrorObject) + }) } return {