From c729790fcfd04a95b8899daa425abcbe54650830 Mon Sep 17 00:00:00 2001 From: nicholas-codecov Date: Wed, 11 Dec 2024 14:45:57 -0500 Subject: [PATCH] chore: Migrate useInfiniteAccountOrganizations to TS Query V5 (#3569) --- .../AccountOrgs/AccountOrgs.test.tsx | 29 ++++++----- .../AccountOrgs/AccountOrgs.tsx | 17 ++++--- ...iteAccountOrganizationsQueryOpts.test.tsx} | 51 ++++++++++++------- .../InfiniteAccountOrganizationsQueryOpts.ts} | 27 +++++----- 4 files changed, 75 insertions(+), 49 deletions(-) rename src/pages/PlanPage/subRoutes/CurrentOrgPlan/{hooks/useInfiniteAccountOrganizations.test.tsx => queries/InfiniteAccountOrganizationsQueryOpts.test.tsx} (81%) rename src/pages/PlanPage/subRoutes/CurrentOrgPlan/{hooks/useInfiniteAccountOrganizations.ts => queries/InfiniteAccountOrganizationsQueryOpts.ts} (80%) diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/AccountOrgs/AccountOrgs.test.tsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/AccountOrgs/AccountOrgs.test.tsx index 36bffde563..9e01293cb6 100644 --- a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/AccountOrgs/AccountOrgs.test.tsx +++ b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/AccountOrgs/AccountOrgs.test.tsx @@ -1,4 +1,7 @@ -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 { delay, graphql, HttpResponse } from 'msw' @@ -102,16 +105,11 @@ const mockReversedOrgs = { let testLocation: ReturnType -const queryClient = new QueryClient({ - defaultOptions: { - queries: { - retry: false, - suspense: true, - }, - }, +const queryClientV5 = new QueryClientV5({ + defaultOptions: { queries: { retry: false } }, }) const wrapper: React.FC = ({ children }) => ( - + {children} = ({ children }) => ( }} /> - + ) const server = setupServer() +beforeAll(() => { + server.listen() +}) -beforeAll(() => server.listen()) afterEach(() => { - queryClient.clear() + queryClientV5.clear() server.resetHandlers() }) -afterAll(() => server.close()) + +afterAll(() => { + server.close() +}) describe('AccountOrgs', () => { function setup() { diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/AccountOrgs/AccountOrgs.tsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/AccountOrgs/AccountOrgs.tsx index 8f51a83b15..c5b343b8a7 100644 --- a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/AccountOrgs/AccountOrgs.tsx +++ b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/AccountOrgs/AccountOrgs.tsx @@ -1,3 +1,4 @@ +import { useInfiniteQuery as useInfiniteQueryV5 } from '@tanstack/react-queryV5' import { createColumnHelper, flexRender, @@ -16,7 +17,7 @@ import Spinner from 'ui/Spinner' import { Tooltip } from 'ui/Tooltip' import { Account } from '../hooks/useEnterpriseAccountDetails' -import { useInfiniteAccountOrganizations } from '../hooks/useInfiniteAccountOrganizations' +import { InfiniteAccountOrganizationsQueryOpts } from '../queries/InfiniteAccountOrganizationsQueryOpts' interface AccountOrgsArgs { account: Account @@ -122,12 +123,14 @@ export default function AccountOrgs({ account }: AccountOrgsArgs) { ]) const { data, isLoading, hasNextPage, fetchNextPage, isFetchingNextPage } = - useInfiniteAccountOrganizations({ - provider, - owner, - first: 20, - orderingDirection: sorting[0]?.desc ? 'DESC' : 'ASC', - }) + useInfiniteQueryV5( + InfiniteAccountOrganizationsQueryOpts({ + provider, + owner, + first: 20, + orderingDirection: sorting[0]?.desc ? 'DESC' : 'ASC', + }) + ) const accountOrgs: AccountOrgRow[] = useMemo(() => { if (!data) return [] diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/hooks/useInfiniteAccountOrganizations.test.tsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/queries/InfiniteAccountOrganizationsQueryOpts.test.tsx similarity index 81% rename from src/pages/PlanPage/subRoutes/CurrentOrgPlan/hooks/useInfiniteAccountOrganizations.test.tsx rename to src/pages/PlanPage/subRoutes/CurrentOrgPlan/queries/InfiniteAccountOrganizationsQueryOpts.test.tsx index 26d03402f8..0935354435 100644 --- a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/hooks/useInfiniteAccountOrganizations.test.tsx +++ b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/queries/InfiniteAccountOrganizationsQueryOpts.test.tsx @@ -1,10 +1,14 @@ -import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +import { + QueryClientProvider as QueryClientProviderV5, + QueryClient as QueryClientV5, + useInfiniteQuery as useInfiniteQueryV5, +} 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' -import { useInfiniteAccountOrganizations } from './useInfiniteAccountOrganizations' +import { InfiniteAccountOrganizationsQueryOpts } from './InfiniteAccountOrganizationsQueryOpts' const org1 = { username: 'org1', @@ -63,29 +67,30 @@ const mockPageTwo = { }, } -const queryClient = new QueryClient({ - defaultOptions: { - queries: { - retry: false, - }, - }, +const queryClientV5 = new QueryClientV5({ + defaultOptions: { queries: { retry: false } }, }) const wrapper: React.FC = ({ children }) => ( - + {children} - + ) const server = setupServer() +beforeAll(() => { + server.listen() +}) -beforeAll(() => server.listen()) afterEach(() => { - queryClient.clear() + queryClientV5.clear() server.resetHandlers() }) -afterAll(() => server.close()) + +afterAll(() => { + server.close() +}) interface SetupArgs { invalidResponse?: boolean @@ -124,7 +129,10 @@ describe('useInfiniteAccountOrganizations', () => { it('returns 404 when bad response from api', async () => { setup({ invalidResponse: true }) const { result } = renderHook( - () => useInfiniteAccountOrganizations({ provider, owner }), + () => + useInfiniteQueryV5( + InfiniteAccountOrganizationsQueryOpts({ provider, owner }) + ), { wrapper } ) @@ -144,7 +152,10 @@ describe('useInfiniteAccountOrganizations', () => { it('returns 404 when no account for owner', async () => { setup({ noAccount: true }) const { result } = renderHook( - () => useInfiniteAccountOrganizations({ provider, owner }), + () => + useInfiniteQueryV5( + InfiniteAccountOrganizationsQueryOpts({ provider, owner }) + ), { wrapper } ) @@ -164,7 +175,10 @@ describe('useInfiniteAccountOrganizations', () => { it('returns organizations for account', async () => { setup({}) const { result } = renderHook( - () => useInfiniteAccountOrganizations({ provider, owner }), + () => + useInfiniteQueryV5( + InfiniteAccountOrganizationsQueryOpts({ provider, owner }) + ), { wrapper } ) @@ -184,7 +198,10 @@ describe('useInfiniteAccountOrganizations', () => { it('returns second page of orgs for account', async () => { setup({}) const { result } = renderHook( - () => useInfiniteAccountOrganizations({ provider, owner }), + () => + useInfiniteQueryV5( + InfiniteAccountOrganizationsQueryOpts({ provider, owner }) + ), { wrapper } ) diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/hooks/useInfiniteAccountOrganizations.ts b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/queries/InfiniteAccountOrganizationsQueryOpts.ts similarity index 80% rename from src/pages/PlanPage/subRoutes/CurrentOrgPlan/hooks/useInfiniteAccountOrganizations.ts rename to src/pages/PlanPage/subRoutes/CurrentOrgPlan/queries/InfiniteAccountOrganizationsQueryOpts.ts index a5c0efee0c..34780bb099 100644 --- a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/hooks/useInfiniteAccountOrganizations.ts +++ b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/queries/InfiniteAccountOrganizationsQueryOpts.ts @@ -1,10 +1,10 @@ -import { useInfiniteQuery } from '@tanstack/react-query' +import { infiniteQueryOptions as infiniteQueryOptionsV5 } from '@tanstack/react-queryV5' import { z } from 'zod' import { OrderingDirection } from 'types' import Api from 'shared/api/api' -import { NetworkErrorObject } from 'shared/api/helpers' +import { rejectNetworkError } from 'shared/api/helpers' import { mapEdges } from 'shared/utils/graphql' const RequestSchema = z.object({ @@ -65,25 +65,25 @@ const query = `query InfiniteAccountOrganizations( } }` -interface UseInfiniteAccountOrganizationsArgs { +interface InfiniteAccountOrganizationsQueryArgs { provider: string owner: string first?: number orderingDirection?: OrderingDirection } -export function useInfiniteAccountOrganizations({ +export function InfiniteAccountOrganizationsQueryOpts({ provider, owner, first = 20, orderingDirection = 'DESC', -}: UseInfiniteAccountOrganizationsArgs) { +}: InfiniteAccountOrganizationsQueryArgs) { const variables = { first, direction: orderingDirection, } - return useInfiniteQuery({ + return infiniteQueryOptionsV5({ queryKey: ['InfiniteAccountOrganizations', provider, owner, variables], queryFn: ({ pageParam, signal }) => Api.graphql({ @@ -99,21 +99,22 @@ export function useInfiniteAccountOrganizations({ const parsedRes = RequestSchema.safeParse(res.data) if (!parsedRes.success) { - return Promise.reject({ + return rejectNetworkError({ status: 404, data: {}, dev: 'useInfiniteAccountOrganizations - 404 Failed to parse data', - } satisfies NetworkErrorObject) + error: parsedRes.error, + }) } const account = parsedRes?.data?.owner?.account if (!account) { - return Promise.reject({ + return rejectNetworkError({ status: 404, data: {}, dev: 'useInfiniteAccountOrganizations - 404 Cannot find Account for Owner', - } satisfies NetworkErrorObject) + }) } return { @@ -121,7 +122,9 @@ export function useInfiniteAccountOrganizations({ pageInfo: account.organizations.pageInfo, } }), - suspense: false, - getNextPageParam: (data) => data.pageInfo.endCursor, + initialPageParam: '', + getNextPageParam: (data) => { + return data?.pageInfo?.hasNextPage ? data?.pageInfo?.endCursor : null + }, }) }