apollo-client: apollo-client not working as expected for `network-only` cache policy, duplicate requests noticed

minimal reproduction here: codesandbox

Intended outcome: 1 request to /api/graphql when clicking the Fetch More button

Actual outcome: 2 requests to /api/graphql

How to reproduce the issue: click Fetch More & observe in devtools network tab

running into the same issue as @kfazinic — cache-first is the only option that will render the correct data. network-only and cache-and-network both first two requests… the first one has the correct offset, and the second is a stale offset. on apollo-client v3.3.9

I am seeing this as well. The change happened in @apollo/client@3.0.0-beta.45 and has the same behavior up to @apollo/client@3.0.0-beta.50.

@apollo/client@3.0.0-beta.44 does not have the issue.

I will work on unraveling my project a bit and try to create a reproduction.

Sorry guys, I’m upgrading my project from v2 to v3. I’m trying to figure out why is it making duplicate requests. Correct me if I’m wrong team, I solved my the problem, in my case, by providing both fetchPolicy and nextFetchPolicy in useQuery hook? For example, fetchPolicy: “cache-and-network” and nextFetchPolicy: “cache-first”.

I can confirm that this is happening in our application on beta.49 for us as well. We have a code change where all we did was flip our main query from cache-and-network to network-only and this exact problem manifests. No other code changes introduced.

I am sorry I cannot provide a minimum reproduction, but for what it’s worth we are using @client directive on the query and are resolving its data via a client-side resolver.

In my case I noticed second http request was being made with empty variables when I use fetchMore. I was using network-only as my fetchPolicy since my use-case was fetching paginated list of latest events, As a workaround, I changed fetchPolicy to cache-first which would make single http request always, and used useEffect to clear related cache on component unmount and refetching data conditionally, as so:

  useEffect(() => {
    if (!loading && data?.events.list.length === 0) refetch();
  }, [loading, data]);
  useEffect(() => {
    return () => {
      client.cache.modify({
        id: 'EventPagination:events#allEvents',
        fields: {
          cursor: () => null,
          hasMore: () => true,
          list: () => [],
        },
      });
    };
  }, []);

I’ve been digging through open issues a bit trying to find something similar to what I’ve been experiencing, and I’d like to suggest that this may be a duplicate of #6301. The reproduction linked and the fix suggested there may be helpful.

There is something I don’t understand from the docs:

network-only: This fetch policy will never return you initial data from the cache.

What is meant by “initial data”? I tried to browse through the doc for its meaning, but it is not clarified.

@jpvajda We have upgraded to the latest version, We don’t notice this anymore. Thank you so much ill close the ticket

Any update from this issue? I am also experiencing duplicate network requests using useQuery hook of @Apollo/client. Thanks

I have this issue when using useLazyQuery.

  const [
    loadResults,
    { loading, error, data, fetchMore },
  ] = useLazyQuery(QUERY, {
    variables: {
      q,
      offset,
      rows,
    },
    notifyOnNetworkStatusChange: true,
    fetchPolicy: "network-only",
  });

loadResults() requests just once, but fetchMore (where I give a different offset value) requests twice: first with the new offset given in its options, then with the original offset (0).

Any solution to this?

For what it’s worth, I am also getting “No more mocked responses” error for queries and mutations that do not have a fetchPolicy explicitly set. The weird thing is that sometimes just duplicating the mock will “fix” it. Other times, I can create many, many copies of the mock and it will still give the “No more mocked responses” error.