How to handle useQuery running on the server

[seonghyeonkimm]

Descriptions

• I am using react-query with suspense enabled in my nextjs project.
• When nextjs trying to render my app on the server, it trigger react-query useQuery to be run. And the useQuery throw error because it can't be succeed on the server. I only want my useQuery to be run on the client. it is making my log messages messy.
• if there is anybody who handle this kind of errors well, please share the ideas on this problem.

for now, I am handling this problem like below.

function useMyQuery(queryKey, queryFn) {
  return useQuery(queryKey, async () => {
    if (typeof window === 'undefined') {
      return {};
    }

    const result = await queryFn();
    return result;
  }
}

[TkDodo]

if you run your code on the server, you have to make sure that it works on the server as well. From a useQuery perspective, I don't think there's anything that doesn't work on the server.

[Ephem]

If you want queries with Suspense to only run on the client, you could try setting enabled: typeof window !== 'undefined', but that might give you hydration warnings. A sure way to do it would be something like:

function useShouldLoad() {
  const [shouldLoad, setShouldLoad] = useState(false);
  useEffect(() => {
    setShouldLoad(true);
  }, []);
  return shouldLoad;
}

function Comp() {
  const shouldLoad = useShouldLoad();
  const result = useQuery(queryKey, fetchFn, { enabled: shouldLoad });
  
  // ...
}

This would enable the query after hydration, so you know the query will only run on the client and hydration will match what was rendered on the server.

[Ephem]

Oh, and the use case you are describing "In React 18 with SSR, I want to run Suspense enabled queries only on the client" might be a common enough one that it's something we should discuss supporting out of the box.

[seonghyeonkimm]

Thanks for your reply. I realized that It happened because I am using react, react-query in the way that these libraries are not supporting officially now. Then, I think only way I could use is just adding if statement to queryFunction in my case for time being. maybe until react and react-query supports this case officially.

Thanks for your kind guidance again, both of you. @TkDodo @Ephem

[seonghyeonkimm]

Yes. "In React 18 with SSR, I want to run Suspense enabled queries only on the client" is exactly what I want.

And, as you mentioned above, I tried enabled options too before using if statement. But I could not use suspense mode with enabled options.

[TkDodo]

Oh, and the use case you are describing "In React 18 with SSR, I want to run Suspense enabled queries only on the client" might be a common enough one that it's something we should discuss supporting out of the box.

agreed, lets try to make this happen once we know more about react ssr in 18 :)