search

apollographql / apollo-client

:rocket:  A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server.
https://apollographql.com/client
MIT License
19.29k stars 2.64k forks source link

refetchQueries option of useMutation doesn't trigger suspense of useSuspenseQuery #11288

Open seriousbusinessuser opened 9 months ago

seriousbusinessuser commented 9 months ago

Issue Description

useMutation's refetchQueries option doesn't trigger React's Suspense fallback component when underlying query uses useSuspenseQuery.

Link to Reproduction

https://codesandbox.io/p/sandbox/infallible-shtern-qpj9q5?file=%2Fsrc%2Findex.jsx%3A53%2C34

Reproduction Steps

  1. Enter any name in the "Name" input.
  2. Press "Add person" button.

Expected result: List of persons is replaced by "Loading..." text while re-fetch is in progress.

Actual result: List of persons isn't replaced by "Loading..." text while re-fetch is in progress.

jerelmiller commented 8 months ago

Hey @seriousbusinessuser 👋

This is actually a LOT more tricky to make work than meets the eye. I can certainly agree that the current behavior isn't the most desirable, but we've held off on implementing this due to some of the technical limitations.

tl;dr; all of the Suspense related code lives in React-specific hooks and modules and refetchQueries is a core API (i.e. part of the core library independent of React itself). The mechanisms needed for Suspense don't lend well to the core library without some thinking on how to minimally impact the client.

You should be able to use the refetch function returned by useSuspenseQuery to trigger the loading state manually as a workaround. Not sure how your app is constructed or if its even feasible for you to do, but this is our best recommendation for now.