[BUG] FetchMore + fetchPolicy: 'network-only' always triggers first page query

Hi,

Given the situation :

• Pagination with merge function set in typePolicies from InMemoryCache

...
cache: new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        people: {
          keyArgs: false,
          merge: (existing, incoming, { args }) => {
            const offset = args?.skip || 0;
            const merged = existing ? existing.slice(0) : [];
            for (let i = 0; i < incoming.length; ++i) {
              merged[offset + i] = incoming[i];
            }
            return merged;
          }
        }
      }
    }
  }
}),
...

• fetchPolicy set with ‘network-only’ or ‘cache-and-network’

const { loading, data, fetchMore } = useQuery(ALL_PEOPLE, {
  variables: { skip: 0 },
  fetchPolicy: 'network-only'
});

• Call fetchMore from useQuery

<button onClick={() => fetchMore({ variables: { skip: data?.people.length } })}>
  Next page
</button>

Bug : linked query is triggered twice

• Once with correct pagination variables
• Once with initial variables

Here a sandbox : https://codesandbox.io/s/black-snowflake-vdhwm

There are some logs showing the linked query fired twice (as the bug description) on “Next Page” click. It doesn’t happen if fetchPolicy is unset.

Thanks for reading.

[benjamn]

@jgan42 @CaptainStiggz You may want to switch back to fetchPolicy: "cache-first" after the initial request, since network-only will always go to the network, hence the extra network requests. To to that, use nextFetchPolicy:

const { loading, data, fetchMore } = useQuery(ALL_PEOPLE, {
  variables: { skip: 0 },
  fetchPolicy: 'network-only',
  nextFetchPolicy: 'cache-first',
});

[jgan42]

This seems to be what I need.

I updated the sandbox to work like this :

    typePolicies: {
      Query: {
        fields: {
          people: {
            keyArgs: false,
            merge: (existing = [], incoming, { args }) => 
              args?.skip ? incoming : [...existing, ...incoming]
            },
          }
        }
      }
    }

Moved the list into a subcomponent which can be rerendered.

The original wanted behavior : The user can “infinite scroll in the page”. Then move from the list page, come back and start again with server data from the first page. Now it works.

I did see nextFetchPolicy at one point but it seemed odd to me. Using fetchPolicy: 'network-only' + nextFetchPolicy: 'cache-first' makes me think that the query will only work as “cache-first” only. Because if there is no cache, it surely will get the data from the server the first time. With the sandbox test, It now makes me think that fetchPolicy + nextFetchPolicy will always use the first policy on every new render.

I couldn’t find any documentation about nextFetchPolicy (despite the fact that it exists as “any” value), nor about fetchPolicy but the list which the behaviors aren’t clear to me : "cache-first" | "network-only" | "cache-only" | "no-cache" | "standby" | "cache-and-network"

if @CaptainStiggz can tell if it fills his needs, I will close this issue.