Apollo-client: Refetch returns cached data

[Pajn]

Intended outcome:

The promise returned from query.refetch() should resolve with the data fetched from the refetch.

Actual outcome:

The promise returned from query.refetch() resolves with the cached data from the initial query.

How to reproduce the issue:

I crated a minimal reproduction example:
https://codesandbox.io/s/cache-and-network-with-cache-present-wlptu

The server just returns the current time, check in the log to see that the refetch result is the same as in the initial render.

Versions

3.1.3

This is the same as issue #3243 that got closed even though the issue still exists as can be seen in the linked example.

[Pajn]

I noticed that I created this in the apollo-client instead of the react-apollo repo, but I managed to reproduce it with just apollo-client as well so I guess it's actually a good placement. Updated repro with just apollo-client: https://codesandbox.io/s/cache-and-network-with-cache-present-ji911

Apollo-client version: 2.6.4

[nitron-app]

Hi, I'm quite sure when calling refetch will pull fresh data from your server. The problem you are facing is because Apollo fails to update the store after receiving the new data from your server because your query field which is as shown in your codesandbox is "now" does not have an id nor cache merge function so Apollo can safely merge/replace the new data with the old one. If your "now" query field cannot have a unique id you should define a merge function for that field in the InMemoryCache.

Example for a replace function:

const inMemoryCacheConfig = {
  addTypename: false,
  typePolicies: {
    Query: {
      fields: {
        now: {
          merge(_ignored, incoming) {
            return incoming;
          }
        }
      }
    }
  }
}
//pass your custom config to InMemoryCache
new ApolloClient({ link, cache: new InMemoryCache(inMemoryCacheConfig) })

Example of a merge function:

const inMemoryCacheConfig = {
  addTypename: false,
  typePolicies: {
    Query: {
      fields: {
        now: {
          merge(existing, incoming, { mergeObjects }) {
            return mergeObjects(existing, incoming);
          }
        }
      }
    }
  }
}
//pass your custom config to InMemoryCache
new ApolloClient({ link, cache: new InMemoryCache(inMemoryCacheConfig) })

[ivan-kleshnin]

In my case the fetched data has ids (was getting warnings about merge without them) but still the cache is not updated. @MahmudHamid is there any other reason for this you can think of?

I succeeded to update the pagination cache with refetch only by sending a unique random variable to the query, like random: Math.random(). Very hacky.

Without this, refetch just returns CACHED data – instead of the data fetched from the server 🤷

[nitron-app]

@ivan-kleshnin it's hard to predict the issue without looking to your code. Anyway, you might be calling the refetch function too early, just before your mutation has finished putting the new data to your db fields. However, if this is not the case, try using a merge or replace function (for test purpose) and let me know if you still get the cached data.

[Pajn]

This has nothing to do with having or not having an id property. As stated in the issue, the problem is that the promise returned from query.refetch() resolves with the cached data from the initial query instead of the refetched data.

[Elijen]

We seem to have the same issue. In our case multiple components are fetching the same objects (but different properties). When I run "refetchQueries" as part of a mutation all queries just return the cached data.