Populating initial pageParam for infinite queries

[lmcq]

I'm looking for a way to populate the pageParam when using the useInfiniteQuery hook - the reason being is we use a query parameter to load the initial page (e.g. /products?page=3)

I've tried something like this:

useInfiniteQuery(
  ['products', filters],
  ({ pageParam = searchParams.get('page')} ) => ...)`
)

To pull the page param from the search string if it's undefined, which works to a certain degree, howver the problem is that results are still cached under an undefined pageParam.

This is an issue because when we update the filters, we revert back to page 1, but then when the filters are reset back to the initial filters the already cached page for those filters is loaded, rather than page 1, because in both instances pageParam is undefined.

One solution is wiping the cache for products when the filters changed, however this isn't ideal because we still want to leverage caching between filters.

Can anyone think of an alternative solution we might be missing?

[TkDodo]

however the problem is that results are still cached under an undefined pageParam.

this should work in v5 (released yesterday) because the syntax changed:

useInfiniteQuery({
  queryKey: ['products', filters],
  queryFn: ({ pageParam }) => ...)
  initialPageParam: searchParams.get('page')
)

we don't cache under undefined anymore, but under whatever initialPageParam returns.

[lmcq]

Talk about good timing! We'll look at getting migrated to v5, thank you!