adding useSuspenseQuery enabled option

[WooWan]

I'm glad to see useSuspenseQuery has landed in beta!

In useSuspenseQuery it doesn't export enabeld option. ( 12b53a4),
(also I read #5739 (review))

In my project, I'm using React Query with Next.js. When I use the new useSuspenseQuery hook, it fetches data on both the server and the client side.

The problem is, as far as I undertand, it is not suspended and merly wait to return on next.js server at the moment. So, I usually disable data fetching on the server side, as shown below.

Could you expose enabled option or if there is better approach, I would be happy to hear it! Thanks

export const useMounted = () => {
  const [mounted, setMounted] = useState(false);
  useEffect(() => {
    setMounted(true);
  }, []);
  return mounted;
};

const mounted = useMounted();
const { data } = useQuery({
  queryKey: ['example'],
  queryFn: fetchExample,
  enabled: mounted
});

[TkDodo]

we can't expose the enabled option because with enabled:false, we cannot guarantee that data is not undefined, which is one of the reasons you'd want to use useSuspenseQuery in the first place.

suspense works better on the server than it does on the client. if you don't want it on the server, I would probably just useQuery there with suspense:true, which is still supported as of now.

Or, you could just make your QueryFunction throw an error on the server. If that happens, react will render the suspense boundary on the server, and it will then re-fetch on the client. Just make sure to turn off retries :)

[timsofteng]

@TkDodo as far as I can see suspese for useQuery has been removed. So how to handle it well?

[mironbalcerzak]

@TkDodo - that's a very valid question :)

[TkDodo]

conditionally render components, or use the experimental promise returned form useQuery and pass it to use from react.