Queries with ssr: false get stuck in loading state and make no network request with ssrForceFetchDelay

[liang3404814]

I have a page that has several fast queries and a few long-running ones, so I've decided to add ssr: false to defer the slower ones to the client.

However after I added ssrForceFetchDelay to my client config, the ones with ssr: false policy got stuck in a loading state, and no network request's made to fetch the data.
I seem to be missing something here, but is this the expected behavior?

Intended outcome:
The query that has ssr: false, running under a client that has ssrForceFetchDelay, should fetch data when rendered client-side.

Actual outcome:
The query got stuck in a loading state, and no network request's made to fetch the data.

How to reproduce the issue:
https://codesandbox.io/s/cool-mountain-u9dud

Notice the two queries with different fetchPolicy fail when using ssr: false, and the query that has the default setting works. ssrMode is set to false in graphql/link.js and ssrForceFetchDelay is set to 100.

Versions
(Also described in the codesandbox above)

@apollo/client 3.0.0-beta.33
apollo-cache-inmemory 1.6.5
apollo-link-http 1.5.16
graphql 14.6.0
react ^16.12.0
react-dom ^16.12.0

[jjaybrown]

Believe this is already a known issue

[liang3404814]

@jjaybrown can you elaborate? I opened this because I can't find an existing issue.

[Axxxx0n]

Same as #5839 #4814

[niksonjr]

Is there any update on this?

We are experiencing the same issue when we migrated Apollo Client from "apollo-client": "^2.6.10" to "@apollo/client": "^3.2.5" with "graphql": "^15.3.0".
We have queries which are run on server, and others which are on the client. Some of the client side queries have fetchPolicy set to cache-and-network or network-only, and because of that we are setting ssrForceFetchDelay: 100 on client instance.

What happens is that on initial load from server, all of the data from SSR queries is loaded and rendered correctly, but the client side queries are not triggering any network requests after the initial render from server. The loading state for those queries stays always loading: true and data and error are undefined. If we land on the page routed from another client page, then everything is executed as it should be, the network requests are run, and all data is loaded correctly.
So looks like this only happens on initial load from server for client side queries.

If we set ssrForceFetchDelay: 0 on the client, then the client side queries trigger the network requests and data is populated from them, but then this setup is not suitable for our queries which have fetchPolicy: cache-and-network or network-only.

Does anyone found a solution, or a workaround for that issue?

[nathanmarks]

We've had to workaround by not having SSR queries use that fetch policy, but it isn't a long term solution. Can we get an update on this?

[threehams]

This workaround seems to be OK:

import { useQuery as apolloUseQuery } from "@apollo/client";

export function useQuery(query, options) {
  // force ssr: true on client
  const ssr = typeof window === "undefined" ? options.ssr : true;

  return apolloUseQuery(query, {
    ...options,
    ssr,
  });
}

This may have negative effects I'm not aware of in other setups, though.

[brainkim]

Can people in this issue try 3.4 or the 3.5 beta and see if the issue is fixed. Sorry that this is happening and we should get SSR under control soon.

[hwillson]

This is likely fixed in @apollo/client@latest so we'll close it off. Let us know if not. Thanks!

[nathanmarks]

@hwillson have you got a link to the fix PR?

[smitpatel1010]

@hwillson Can you confirm how did you test it? It is still an issue for me.
I want to work on this fix it if thats fine.

I have one doubt in this code here https://github.com/apollographql/apollo-client/blob/main/src/core/ApolloClient.ts#L170 this.disableNetworkFetches = ssrMode || ssrForceFetchDelay > 0; How can we use the same variable for ssr and ssrForceFetchDelay(which is for client)?

This will create an issue here https://github.com/apollographql/apollo-client/blob/main/src/react/hooks/useQuery.ts#L299 if ssr is false for that query and ssrForceFetchDelay is high enough to make component stable after mount then this loading state will not go away forever. because useQuery is returning ssrDisabledResult when ssr is false and we are on client but disableNetworkFetches is true.