How does initialData work with useInfiniteQuery

[josephfarina]

Hey!

I am working with Next.js and trying to have the first page of an infinite scroll query be SSR'd. It seems to work fine if I pass in the data and write some logic to start the fetching at page 2 in the query function. But TypeScript is saying initialData should have the shape of: { pages: T[]; pageParams: unknown[] } which makes me curious if it's possible to pass the page number into initialData. This way react-query would just automatically start fetching the second page? I can't find much info on this in the docs.

Appreciate any help!

[joelrojo]

@josephfarina I ran into a similar issue and ended up figuring out that you have to pass in the next page into page params when you set initial data. For instance, my page starts at 0, but if there is initial data loaded from the cache (from another page), then I make sure pageParams is 1.

It seems you also have to build out the data structure specific to useInifiniteQuery since it's not just a data object, but rather a hash with pages array and pageParams array. @tannerlinsley would be great to see this specific detail or example in the docs on useInfiniteQuery.

Here is the code I ended up with (I'm using a function to avoid performing a getQueryState call on every render).

Open to any suggestions or improvements, just started using react-query and I'm already loving it!

  const queryClient = useQueryClient()
  const initialData = () => queryClient.getQueryState(['logs', 'home'])?.data

  const {
    data,
    error,
    isError,
    isLoading,
    isFetching,
    isFetchingNextPage,
    fetchNextPage,
    hasNextPage
  } = useInfiniteQuery(
    ['logs', 'books'],
    async ({ pageParam = initialData() ? 1 : 0 }) =>
      api.User.logs({ page: pageParam }),
    {
      initialData: () => {
        const data = initialData()
        if (data) {
          return {
            pageParams: [undefined],
            pages: [data]
          }
        }
      },
      getNextPageParam: (lastPage, allPages) =>
        lastPage.length !== 0 ? allPages.length : undefined
    }
  )

[joelrojo]

Just a quick follow up to this as I discovered that passing in a different pageParam wasn't necessary. In fact, it actually made refetching data break since it would only load data after the the first page and I would be missing the initialData upon refetch. Here's the updated code to reflect (I abstracted it into it's own hook):

const useInfiniteQueryWithInitialData = (queryKey, initialDataQueryKey, apiCall) => {
  return useInfiniteQuery(
    queryKey,
    async ({ pageParam = 0 }) => apiCall({ page: pageParam }),
    {
      initialData: () => {
        const queryClient = useQueryClient()
        const queryCacheData = queryClient.getQueryState(initialDataQueryKey)?.data
        if (queryCacheData) {
          return {
            pageParams: [undefined, 1],
            pages: [queryCacheData]
          }
        }
      },
      getNextPageParam: (lastPage, allPages) =>
        lastPage.length !== 0 ? allPages.length : undefined
    }
  )
}

[ybot1122]

I am seeing that initialData gives you the ability to surface some data immediately. In the meantime, the first page is being fetched

However, once that first fetch returns, it will actually overwrite initialData completely. So it doesn't respect that you tried to make the first page with initialData.

See the minimal repro here: https://codesandbox.io/s/useinfinitequery-with-initialdata-forked-9crb4u?file=/pages/index.js

[ybot1122]

works great. thanks for the article, it makes sense.

https://codesandbox.io/s/useinfinitequery-initialdata-staletime-57fptb?file=/pages/index.js

[iSplasher]

you can set a staleTime to avoid re-fetching the first page. see: https://tkdodo.eu/blog/placeholder-and-initial-data-in-react-query

This is not reliable. I've set a staletime, howver, I experience that when fetchNextPage gets called, only the initialData is returned instead of the expected 2 pages.

[TkDodo]

Can you show a reproduction?

[iSplasher]

My apologies, I found out that my axios request was being cancelled. Everything works as intended.

[noah-wardlow]

This strategy seems to break if you invalidate the query (the initial data is overwritten) and also when the query is refetched after refocus. is there a more optimal way to keep the initial data as part of the query cache?