Passing `initialData` to react-query from `getServerSideProps` "Text content did not match" error
I have a newsfeed-like page with infinite scroll. I'm sending a request to my Laravel backend API from
getServerSideProps and passing the results to the page component with props. Then I'm passing those props to react-query's useInfiniteQuery by setting its initialData to the object I got from getServerSideProps.
This works fine but when anything changes in the database, I'm getting a "Text content did not match" error because the page source generated by NextJS doesn't match whatever is rendered client-side.
I've logged everything out and it goes like this: the browser is always getting the correct data. It receives correct data from getServerSideProps, then react-query fetches some data on the first render which is again, up-to-date data.
However the HTML generated by NextJS is not up-to-date. NextJS again receives valid data with getServerSideProps, however to generate the HTML it of course parses the page component and fetches some data with react-query. At that point it receives stale data. I've checked my Laravel logs and it always returns up-to-date data so I can't imagine what may be going wrong.
So in other words NextJS generates stale HTML because it tries to fetch data with react-query and somehow comes up with stale data. Seems like it could be caching something but why would NextJS cache a react-query call?
Any suggestions on how to debug this?0 Replies