apparent-cyan

Force suspense for query

Hey, I have a supply selection page that uses useSuspenseQuries to load two endpoints which are required to get the supply recommendations and also restore existing selection. Once the component mounts, we use react-hook-form to transform the data into a form state using it's defaultValues prop. This works fine on first load, but when a user goes back to make changes on a different page, when they come back to the supply page we need to reload these endpoints so everything is correct. The problem is, when they come back, suspense is not used and data from the cache is used instead. This causes the form to be initialised with the previous data. There are work around for this, such as using isFetching or resetQuery (however the latter isn't practical because there are multiple places in the app that can cause changes that affect supply page). What I am wondering is, if there is an option to force a useSuspenseQuery or useSuspenseQueries to fallback regardless of data in the cache. Something like { "suspendOnFetch": "always" } as an option.

5 Replies