Next.js with initialData + pagination

[mauriciosoares]

So I have been doing some tests with useQuery and next.js, and I got into a scenario that I'm not sure what's the best way to solve.

I've followed this example on the docs: https://react-query.tanstack.com/guides/ssr#using-initialdata, basically I fetch the data using getServerSideProps, and pass to useQuery as an initialData. However, this data is paginated, so I'll have this:

export async function getServerSideProps() {
  const data = await fetch(/*content from page 1*/)

  return {
    props: {
      initialData: data,
    },
  }
}

function Component() {
const Home = (props) => {
  const [page, setPage] = useState(1)
  const { data } = useQuery(
    ['list', page],
    () => fetch(...)
    {
      initialData: props.initialData,
    }
  )
}

The problem here is that the initialData will now be used whenever I change the page, it first blinks the content that I had initially on the initialData prop, and then show the actual content from page 2, because it was fetched. What would be the recommended approach on this scenario? I tried something like this that worked, but I'm not sure if is there any caveat to that:

  const [page, setPage] = useState(1)
  const { data } = useQuery(
    ['list', page],
    () => fetch(...)
    {
      initialData: page === 1 ? props.initialData : undefined,
    }
  )

I only set the initialData if the page is 1, if it's not, then nothing is set. This works just fine, the first page is loaded up with the data from getServerSideProps, and the next pages are loaded from scratch, without any initialData set. But is this a bad thing?

[mauriciosoares]

Just found that an issue was created for this situation before: #78

We had a few solutions in there for this scenario, a few using useRef, others using some different approach, but I feel like the check for page === 1 ? props.initialData : undefined seems to be a bit simpler?

[TkDodo]

I only set the initialData if the page is 1, if it's not, then nothing is set. This works just fine, the first page is loaded up with the data from getServerSideProps, and the next pages are loaded from scratch, without any initialData set. But is this a bad thing?

that's totally legit. The only more generic solution would be to use hydration: https://react-query.tanstack.com/guides/ssr#using-hydration

with that, you would use await queryClient.prefetchQuery(['list', 1], () => fetch(/*content from page 1*/)) and then send the whole dehydrated QueryClient to the frontend, where you would hydrate it. Once you get around to your useQuery where you want data for the first page, you should immediately get the data :)