Stale UI when refetching data with useSuspenseQuery

[horaklukas]

Hi,

I'm quite stuck with usage of useSuspenseQuery inside Next.js app. I isolated my issue into the Stackblitz demo.

There is a component DataView which fetches data with useSuspensQuery. Data depends on parameter selected from the list of options. The state where parameter is stored is a URL query param. Select is a controlled component.

When I select an option for the first time, it is stored in the URL, propagated through the component tree and displayed in the select. Data view is suspended and fallback from the wrapping Suspense is displayed.

And now my issue is: when I change a parameter, it is propagated to the query and new fetch is triggered, DataView component is suspended but sibling UI is not updated until the query finish 😕 it means that when I select new parameter in selected, it appears in the URL, but there is a stale value in the select. Why is that happening although it's a UI next to the Suspense boundary, not inside it?

const App = () => {
  const router = useRouter();
  const value = router.query.myparam;

  const handleSelect = (e) => {
    router.replace({ query: { myparam: e.target.value } });
  };

  return (
    <main>
      <select onChange={handleSelect} value={value}>
        {/* Some options here */}
      </select>
      <span>Selected parameter: {value}</span>
      <Suspense fallback={Loader}>
          <DataView value={value} />
      </Suspense>
    </>
  )
}

const DataView = ({ value }: any) => {
  const query = useSuspenseQuery({
    queryKey: ["data-query", value],
    queryFn: async () => {
      await delay(3000);

      return value;
    },
  });

  return (
    <>Query result: <b>{query.data}</b></>
  );
};

const Loader = () => <span>Loading...</span>

• transitions doesn't help with the issue
• when I force rerender of the page with <main key={value}> it helps, but for the cost of first loading the data and display loader again..

All is done on client, with

Next.js 14.2.6
Tanstack React Query - 5.52.2

Here is the demo
https://stackblitz.com/edit/tanstack-query-3vluww?file=src%2Fpages%2Findex.tsx

Thanks for any help 🙏

[TkDodo]

took me a while to see that you're using pages router. Not sure how well their router integrates with suspense. Everything works fine is we move the value to a normal useState. so I guess it's a pages router issue and it'll probably work if you'd do the same thing in app router.

[horaklukas]

Hi Dominik, thanks for the reply. As you found out, storing the state in useState make it working, I forgot to mention that.
According to your advice, I transformed the demo to the app router, but the issue remains. I'm currently not sure whether it's an issue of Next router or React query's suspense mode 🤔

Demo with App router

[TkDodo]

yeah it's hard to say. what we can clearly see in this demo is that the order is:

• I select Option1
• ?data=1 is instantly appended to the url

I select Option2

• the url param stays as ?data=1
• only after suspense resolves, the param changes to ?data=2

So it seems that router.replace doesn't really update it instantly, and that's why reading with useSearchParams doesn't immediately show the updated value. But I'm only guessing here :/

[TkDodo]

okay, so I think I have some more info about what's going on. When you change something in the url, like a query param, the app router starts to re-render the affected component tree again on the server. You can see that by adding log statements to the Home component:

console.log('re-render on', isServer ? 'server' : 'client');

suspense queries run on the server as well, but your example isn't actually integrated with suspense on the server. You need HydrationBoundary or our experimental streaming provider. See:

• https://tanstack.com/query/v5/docs/framework/react/guides/ssr
• https://tanstack.com/query/v5/docs/framework/react/guides/advanced-ssr

[horaklukas]

Sorry for the late reply, I had a vacation. All components, including layout.tsx and page.tsx are client components. Is the client component really rerendered on URL search query param change even on server? 🤔

I'll try to remake it so that it uses hydration boundaries and we will see but from what I know, it doesn't some like an issue to me. I also tried to add log statement as you suggests, but don't know if I do something wrong, but the component rerenders only on client..