fetchMore from useLazyQuery doesn't include cache changes?

[mbiggs-gresham]

I'm using useLazyQuery and manually fetching the data using a promise. I also have my InMemoryCache configured so that as more data arrives, it merges it and it also replaces some of the child objects such as dates etc with DayJS objects instead.

The data returned to the initial fetchRows Promise includes the modified version with the changes made within the cache. The data passed to the Promise of the fetchMore however only has the last batch of rows and none of the sub objects are replaced. It only seems to give the latest set of data exactly as received via the network.

If i console log the data from the useLazyQuery hook it always includes the correctly modified changes from the cache (original batch plus new batch plus all child objects correctly swapped).

const [fetchRows, { data, fetchMore }] = useLazyQuery(QUERY);

console.log(data); // always includes full set of data with all changes from cache.

fetchRows({ variables: { id: 0, cursor: 0 }}).then(({ data }) => {
    // data includes changes from the cache.
});

fetchMore({ variables: { id: 0, cursor: 100 }}).then(({ data }) => {
    // data is the last batch of raw data only and does not include modifications from cache.
});

ps) I'm not actually calling them sequentially like this, they are being called at the appropriate times via events. I've just listed it like this for simplicity. I'm also use keyArgs: ['id'].

Why does the fetchMore not give the modified cache versions?

I'm using apollo-client v3.8.5.

[bignimbus]

Hi @mbiggs-gresham 👋🏻 thanks for opening this Issue! Your configuration of InMemoryCache is a key detail here. I recommend sharing a runnable reproduction of the issue so that the community and/or maintainers have the best chance at being precise and complete with a response 🙏🏻

[bignimbus]

As a follow-up, please note that fetchMore will update the data object. For example, this should work:

fetchMore({ variables: { id: 0, cursor: 100 }}).then(() => {
  console.log(data); // don't use the locally scoped `data` argument
});

The promise returned by fetchMore won't necessarily have run through your type policies - this is not stated outright in the docs but if you scroll down to the code blocks in this section, you'll see a sample usage of the fetchMore promise that's more idiomatic. Let us know if that helps and if not, please do provide a runnable reproduction so we can get into more detail. Thanks!

[mbiggs-gresham]

Hi, thanks for the response. That's exactly the problem, the local data given to the fetch promise does run through the type policies, so does refetch, but fetchMore doesn't. It seems inconsistent.

[bignimbus]

Thanks for the feedback! We don't recommend using the resolved promise value as the source of truth in your application - all the examples in the docs show the data object as the source of truth except in very specific scenarios. Can you tell us more about your use case and why this distinction between data and the resolved promise value is an issue for your application?

[mbiggs-gresham]

That's interesting, I didn't realise that. We were using the promises because we had some quite complex logic that could be triggered by various user interactions. We also have quite a few useCallback's which when using the global data ended up causing constant re-renders due to some of our other functions changing.

However, taking your advice, i've refactored our app to do as you say and use the global data, fixed all the issues and it seems to be working now.

I think the fetchMore local data is inconsistent still, but if it's not recommended i'm happy to no longer use it. Thanks. 👍