Skip to content

Commit 7e9087a

Browse files
committed
Only pass initialPageParams option through query hook
1 parent 1ce26cb commit 7e9087a

File tree

2 files changed

+107
-58
lines changed

2 files changed

+107
-58
lines changed

packages/toolkit/src/query/react/buildHooks.ts

Lines changed: 18 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -758,7 +758,9 @@ export type LazyInfiniteQueryTrigger<
758758
): InfiniteQueryActionCreatorResult<D>
759759
}
760760

761-
interface UseInfiniteQuerySubscriptionOptions extends SubscriptionOptions {
761+
interface UseInfiniteQuerySubscriptionOptions<
762+
D extends InfiniteQueryDefinition<any, any, any, any, any>,
763+
> extends SubscriptionOptions {
762764
/**
763765
* Prevents a query from automatically running.
764766
*
@@ -801,6 +803,7 @@ interface UseInfiniteQuerySubscriptionOptions extends SubscriptionOptions {
801803
* If you specify this option alongside `skip: true`, this **will not be evaluated** until `skip` is false.
802804
*/
803805
refetchOnMountOrArgChange?: boolean | number
806+
initialPageParam?: PageParamFrom<D>
804807
}
805808

806809
export type TypedUseInfiniteQuerySubscription<
@@ -852,19 +855,14 @@ export type UseInfiniteQuery<
852855
D extends InfiniteQueryDefinition<any, any, any, any, any>,
853856
> = <R extends Record<string, any> = UseInfiniteQueryStateDefaultResult<D>>(
854857
arg: InfiniteQueryArgFrom<D> | SkipToken,
855-
options?: UseInfiniteQuerySubscriptionOptions &
856-
UseInfiniteQueryStateOptions<D, R> &
857-
InfiniteQueryConfigOptions<ResultTypeFrom<D>, PageParamFrom<D>>,
858+
options?: UseInfiniteQuerySubscriptionOptions<D> &
859+
UseInfiniteQueryStateOptions<D, R>,
858860
) => UseInfiniteQueryHookResult<D, R>
859861

860862
export type UseInfiniteQueryState<
861863
D extends InfiniteQueryDefinition<any, any, any, any, any>,
862864
> = <R extends Record<string, any> = UseInfiniteQueryStateDefaultResult<D>>(
863865
arg: QueryArgFrom<D> | SkipToken,
864-
InfiniteQueryConfigOptions: InfiniteQueryConfigOptions<
865-
ResultTypeFrom<D>,
866-
PageParamFrom<D>
867-
>,
868866
options?: UseInfiniteQueryStateOptions<D, R>,
869867
) => UseInfiniteQueryStateResult<D, R>
870868

@@ -888,7 +886,7 @@ export type UseInfiniteQuerySubscription<
888886
D extends InfiniteQueryDefinition<any, any, any, any, any>,
889887
> = (
890888
arg: QueryArgFrom<D> | SkipToken,
891-
options?: UseInfiniteQuerySubscriptionOptions,
889+
options?: UseInfiniteQuerySubscriptionOptions<D>,
892890
) => readonly [
893891
LazyInfiniteQueryTrigger<D>,
894892
QueryArgFrom<D> | UninitializedValue,
@@ -1706,6 +1704,7 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
17061704
skip = false,
17071705
pollingInterval = 0,
17081706
skipPollingIfUnfocused = false,
1707+
initialPageParam,
17091708
} = {},
17101709
) => {
17111710
const { initiate } = api.endpoints[
@@ -1806,6 +1805,7 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
18061805
lastPromise?.unsubscribe()
18071806
const promise = dispatch(
18081807
initiate(stableArg, {
1808+
initialPageParam,
18091809
subscriptionOptions: stableSubscriptionOptions,
18101810
forceRefetch: refetchOnMountOrArgChange,
18111811
}),
@@ -1822,6 +1822,7 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
18221822
stableArg,
18231823
stableSubscriptionOptions,
18241824
subscriptionRemoved,
1825+
initialPageParam,
18251826
])
18261827

18271828
const subscriptionOptionsRef = useRef(stableSubscriptionOptions)
@@ -1861,7 +1862,6 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
18611862

18621863
const useInfiniteQueryState: UseInfiniteQueryState<any> = (
18631864
arg: any,
1864-
{ getNextPageParam, getPreviousPageParam },
18651865
{ skip = false, selectFromResult, trigger } = {},
18661866
) => {
18671867
const { select, initiate } = api.endpoints[
@@ -1932,22 +1932,14 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
19321932
useInfiniteQuerySubscription,
19331933
useInfiniteQuery(arg, options) {
19341934
const [trigger] = useInfiniteQuerySubscription(arg, options)
1935-
const queryStateResults = useInfiniteQueryState(
1936-
arg,
1937-
{
1938-
initialPageParam: options?.initialPageParam!,
1939-
getNextPageParam: options?.getNextPageParam!,
1940-
getPreviousPageParam: options?.getPreviousPageParam,
1941-
},
1942-
{
1943-
selectFromResult:
1944-
arg === skipToken || options?.skip
1945-
? undefined
1946-
: noPendingQueryStateSelector,
1947-
trigger,
1948-
...options,
1949-
},
1950-
)
1935+
const queryStateResults = useInfiniteQueryState(arg, {
1936+
selectFromResult:
1937+
arg === skipToken || options?.skip
1938+
? undefined
1939+
: noPendingQueryStateSelector,
1940+
trigger,
1941+
...options,
1942+
})
19511943

19521944
const {
19531945
data,

packages/toolkit/src/query/tests/buildHooks.test.tsx

Lines changed: 89 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1498,6 +1498,14 @@ describe('hooks tests', () => {
14981498
lastPageParam,
14991499
allPageParams,
15001500
) => lastPageParam + 1,
1501+
getPreviousPageParam: (
1502+
firstPage,
1503+
allPages,
1504+
firstPageParam,
1505+
allPageParams,
1506+
) => {
1507+
return firstPageParam > 0 ? firstPageParam - 1 : undefined
1508+
},
15011509
},
15021510
query(pageParam) {
15031511
return `https://example.com/listItems?page=${pageParam}`
@@ -1507,37 +1515,44 @@ describe('hooks tests', () => {
15071515
})
15081516

15091517
function PokemonList({
1518+
arg = 'fire',
15101519
initialPageParam = 0,
15111520
}: {
1521+
arg?: string
15121522
initialPageParam?: number
15131523
}) {
1514-
const { data, isFetching, isUninitialized, fetchNextPage } =
1515-
pokemonApi.endpoints.getInfinitePokemon.useInfiniteQuery('a', {
1516-
initialPageParam,
1517-
getNextPageParam: (
1518-
lastPage,
1519-
allPages,
1520-
// Page param type should be `number`
1521-
lastPageParam,
1522-
allPageParams,
1523-
) => lastPageParam + 1,
1524-
})
1524+
const {
1525+
data,
1526+
isFetching,
1527+
isUninitialized,
1528+
fetchNextPage,
1529+
fetchPreviousPage,
1530+
} = pokemonApi.endpoints.getInfinitePokemon.useInfiniteQuery(arg, {
1531+
initialPageParam,
1532+
})
1533+
1534+
const handlePreviousPage = async () => {
1535+
const res = await fetchPreviousPage()
1536+
}
15251537

1526-
const handleClick = async () => {
1527-
const promise = fetchNextPage()
1528-
const res = await promise
1538+
const handleNextPage = async () => {
1539+
const res = await fetchNextPage()
15291540
}
15301541

15311542
return (
15321543
<div>
15331544
<div data-testid="isUninitialized">{String(isUninitialized)}</div>
15341545
<div data-testid="isFetching">{String(isFetching)}</div>
1546+
<div>Type: {arg}</div>
15351547
<div data-testid="data">
1536-
{data?.pages.map((page: any, i: number | null | undefined) => (
1537-
<div key={i}>{JSON.stringify(page)}</div>
1548+
{data?.pages.map((page, i: number | null | undefined) => (
1549+
<div key={i}>{page.name}</div>
15381550
))}
15391551
</div>
1540-
<button data-testid="nextPage" onClick={() => handleClick()}>
1552+
<button data-testid="prevPage" onClick={() => handlePreviousPage()}>
1553+
nextPage
1554+
</button>
1555+
<button data-testid="nextPage" onClick={() => handleNextPage()}>
15411556
nextPage
15421557
</button>
15431558
</div>
@@ -1567,34 +1582,76 @@ describe('hooks tests', () => {
15671582
const checkNumQueries = (count: number) => {
15681583
const cacheEntries = Object.keys(storeRef.store.getState().api.queries)
15691584
const queries = cacheEntries.length
1570-
console.log('queries', queries, storeRef.store.getState().api.queries)
1585+
//console.log('queries', queries, storeRef.store.getState().api.queries)
15711586

15721587
expect(queries).toBe(count)
15731588
}
15741589

1575-
render(<PokemonList />, { wrapper: storeRef.wrapper })
1590+
const checkPageRows = (type: string, ids: number[]) => {
1591+
expect(screen.getByText(`Type: ${type}`)).toBeTruthy()
1592+
for (const id of ids) {
1593+
expect(screen.getByText(`Pokemon ${id}`)).toBeTruthy()
1594+
}
1595+
}
1596+
1597+
async function waitForFetch() {
1598+
await waitFor(() =>
1599+
expect(screen.getByTestId('isFetching').textContent).toBe('true'),
1600+
)
1601+
await waitFor(() =>
1602+
expect(screen.getByTestId('isFetching').textContent).toBe('false'),
1603+
)
1604+
}
1605+
1606+
const utils = render(<PokemonList />, { wrapper: storeRef.wrapper })
15761607
expect(screen.getByTestId('data').textContent).toBe('')
15771608
checkNumQueries(1)
15781609

15791610
await waitFor(() =>
15801611
expect(screen.getByTestId('isUninitialized').textContent).toBe('false'),
15811612
)
1582-
await waitFor(() =>
1583-
expect(screen.getByTestId('isFetching').textContent).toBe('false'),
1584-
)
1613+
1614+
// Initial load
1615+
await waitForFetch()
1616+
checkNumQueries(1)
1617+
checkPageRows('fire', [0])
1618+
15851619
act(() => {
15861620
fireEvent.click(screen.getByTestId('nextPage'))
15871621
})
1588-
await waitFor(() =>
1589-
expect(screen.getByTestId('isFetching').textContent).toBe('false'),
1590-
)
1591-
checkNumQueries(1)
1592-
await waitFor(() =>
1593-
expect(screen.getByTestId('isFetching').textContent).toBe('false'),
1594-
)
1595-
expect(screen.getByTestId('data').textContent).toBe(
1596-
'{"id":"0","name":"Pokemon 0"}{"id":"1","name":"Pokemon 1"}',
1597-
)
1622+
1623+
await waitForFetch()
1624+
1625+
// Added one page
1626+
checkPageRows('fire', [0, 1])
1627+
1628+
act(() => {
1629+
fireEvent.click(screen.getByTestId('nextPage'))
1630+
})
1631+
await waitForFetch()
1632+
1633+
checkPageRows('fire', [0, 1, 2])
1634+
1635+
utils.rerender(<PokemonList arg="water" initialPageParam={3} />)
1636+
1637+
await waitForFetch()
1638+
1639+
checkNumQueries(2)
1640+
checkPageRows('water', [3])
1641+
1642+
act(() => {
1643+
fireEvent.click(screen.getByTestId('nextPage'))
1644+
})
1645+
await waitForFetch()
1646+
1647+
checkPageRows('water', [3, 4])
1648+
1649+
act(() => {
1650+
fireEvent.click(screen.getByTestId('prevPage'))
1651+
})
1652+
await waitForFetch()
1653+
1654+
checkPageRows('water', [2, 3, 4])
15981655
})
15991656
})
16001657

0 commit comments

Comments
 (0)