useQuery stuck on loading when ssrForceFetchDelay is set and ssr: false

[Ellarddekoeijer]

Issue Description

We ran into the issue where a useQuery does not resolve and gets stuck on loading. After much debugging we figured out that it is due to the combination of useQuery's ssr option being false and ssrForceFetchDelay being set. As a workaround we are using the onCompleted hook to manually set the fetched data.

In our app, where the problem occurred, ssrForceFetchDelay is set to 100. However, to reproduce it I had to set it to 1000 before the issue occurred. Due to circumstances outside of our control we are unable to stray away from using ssrForceFetchDelay. I have seen a few issues about this subject but since these have been closed without the issue seemingly being resolved I am opening another.

Link to Reproduction

https://github.com/Ellarddekoeijer/apollo-ssr-force-fetch-delay

Reproduction Steps

1. npm i
2. npm start
3. notice that the app is stuck on loading
4. fill in the form to add a name
5. notice that the data has been fetched

[bignimbus]

Thanks for opening this issue @Ellarddekoeijer 👋🏻

Since I haven't used this config in a production app I'll have to speculate a bit. From the docs:

apollo-client/docs/source/performance/server-side-rendering.mdx

Line 198 in 895ddcb

If some of your initial queries use the `network-only` or `cache-and-network` [fetch policy](../data/queries/#setting-a-fetch-policy), you can provide the `ssrForceFetchDelay` option to Apollo Client to skip force-fetching those queries during initialization. This way, even those queries initially run using only the cache:

Here's another relevant snippet:

apollo-client/src/react/hooks/useQuery.ts

Lines 308 to 315 in 895ddcb

	if (
	(this.renderPromises || this.client.disableNetworkFetches) &&
	this.queryHookOptions.ssr === false &&
	!this.queryHookOptions.skip
	) {
	// If SSR has been explicitly disabled, and this function has been called
	// on the server side, return the default loading state.
	this.result = this.ssrDisabledResult;

When I drop a breakpoint at line 315, I can no longer reproduce the issue. Interesting! This snippet is also notable:

apollo-client/src/core/ApolloClient.ts

Lines 170 to 180 in 895ddcb

	this.disableNetworkFetches = ssrMode || ssrForceFetchDelay > 0;
	this.queryDeduplication = queryDeduplication;
	this.defaultOptions = defaultOptions || Object.create(null);
	this.typeDefs = typeDefs;
	if (ssrForceFetchDelay) {
	setTimeout(
	() => (this.disableNetworkFetches = false),
	ssrForceFetchDelay,
	);
	}

I was curious whether changing client.disableNetworkFetches in userland would make a difference. When I applied this diff, I resolved the issue in your reproduction:

diff --git a/src/index.jsx b/src/index.jsx
index 5310419..c7ee939 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -40,6 +40,8 @@ function App() {
     ssr: false
   });
 
+  client.disableNetworkFetches = false;
+
   const [addPerson] = useMutation(ADD_PERSON, {
     update: (cache, { data: { addPerson: addPersonData } }) => {
       const peopleResult = cache.readQuery({ query: ALL_PEOPLE });

Because of this, I wonder whether we need to update the subscription function in our useSyncExternalStore instance here:

apollo-client/src/react/hooks/useQuery.ts

Lines 160 to 167 in 895ddcb

	if (
	previousResult &&
	previousResult.loading === result.loading &&
	previousResult.networkStatus === result.networkStatus &&
	equal(previousResult.data, result.data)
	) {
	return;
	}

I'm not sure exactly how we might do that given that disableNetworkFetches is a simple boolean. That's as far as I've gotten so far. I hope that helps, I'll see if the rest of the team has any insights at some point.

[Ellarddekoeijer]

Thanks for your intricate explanation @bignimbus

I have applied the disableNetworkFetches workaround to both the reproduction repo and our app (where the problem first occurred), in both cases the query resolved properly and the loading state did not hang. Is there any downside to setting disableNetworkFetches to false at all? I can not seem to find any docs on this topic.

Thanks again!

[bignimbus]

Thanks for the quick reply @Ellarddekoeijer - if you're noticing that manually unsetting disableNetworkFetches solves the problem then I'm curious to learn more about this statement from the issue description:

Due to circumstances outside of our control we are unable to stray away from using ssrForceFetchDelay

The only source code in Apollo Client that uses ssrForceFetchDelay is in the snippets I posted above. Its sole function is to set disableNetworkFetches to false after X milliseconds. So if manually resetting disableNetworkFetches is working for you, would that change whether you need to continue using ssrForceFetchDelay in your app?

[Ellarddekoeijer]

Thanks again for your reply @bignimbus, I really appreciate you taking the time!

First of I would like to excuse myself for the improper explanation, please let me clarify what I meant with:

Due to circumstances outside of our control we are unable to stray away from using ssrForceFetchDelay

About 7 moons ago we had to implement the ssrForceFetchDelay fix because our app had cache restore related issues, therefore it is not possible for us to simply remove it entirely unless this problem is also resolved.

I understand this answer is vague, please be patient while I update to the most recent apollo version and research both of these issues. Once I can give a clearer explanation I will post it here!

[github-actions]

We're closing this issue now but feel free to ping the maintainers or open a new issue if you still need support. Thank you!

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
For general questions, we recommend using StackOverflow or our discord server.