Apollo-client: Automatic Cache Update Not Working

Created on 17 Jan 2020  路  10Comments  路  Source: apollographql/apollo-client

Hello! I am trying to take advantage of the Apollo automatic cache updates as described here, but when I try to update my single entity, the cache remains the same:

Here I make the mutation:
Screen Shot 2020-01-10 at 1 31 25 PM

and here I check the cache afterwards to see if it has changed:
Screen Shot 2020-01-10 at 1 32 37 PM

Despite the isHidden flag being set by the mutation, it is not updated. Is there something I'm missing for automatic cache updates besides single entity, and request the ID and modified fields back in the mutation?

Here are my system facts:
Screen Shot 2020-01-17 at 9 59 54 AM

Most helpful comment

After looking into it some more, it looks like we hit this issue because our apollo client config specified:

const apolloClient = new ApolloClient({
  defaultOptions: {
    watchQuery: {
      fetchPolicy: APOLLO_FETCH_POLICY.CACHE_AND_NETWORK,
    },
    mutate: {
      fetchPolicy: APOLLO_FETCH_POLICY.NO_CACHE,
    },
  },
});

Which for mutate we had thought meant always hit the network similarly to what it means for a query but it also means do not cache the result, which causes the update option to not be triggered and does not write anything to the cache. Seeing as this is expected behavior I'm closing this issue.

All 10 comments

From what I can see it looks like the cache should be updating. Could you provide a runnable reproduction, preferably using codesandbox? It's difficult to see what's going on without being able to run the code. Issues in this repo are much more likely to be looked at if they have a runnable reproduction

Normally that's what I'd do but for an issue like this with something as complicated as apollo client, I don't have a great way of demoing our running setup and schema etc especially without giving away closed-source code. Are there any gotchas with the automatic cache updates I could be missing or could you point me to where in the code it compares the result of the mutation with what's in the cache to determine if it should update? I'd even be up for pairing if someone has time today.

I can't really think of any gotchas. If you re-query that data after the mutation is finished, does that update the cache properly?

Yep! If I immediately query for that entity after the mutation then it updates in the cache. Do you know where the code lives for comparing the result of the mutation with what's in the cache to determine if it should update? I can take a look

Interesting. I'm not 100% sure, but I think it doesn't do any comparing. It just merges the new data into the cache no matter what.
If you watch the network tab in the devtools when you do the mutation, is the mutation the only thing that gets sent to the server? Are you using the update function to manually update the cache after the mutation?
Usually at this point I would just start tearing the app apart until the problem stops happening. Sorry I can't really help more than this!

I dug into the code and think I might have found the problem, take a look and let me know if you think that my reasoning makes sense: https://github.com/apollographql/apollo-client/pull/5805

Oh, you didn't mention you were using optimisticResponse. This issue might be related: https://github.com/apollographql/react-apollo/issues/3532

Might be, but even without optimisticResponse the cache wasn't getting updated so I think it's because of that issue I've documented in the PR: https://github.com/apollographql/apollo-client/pull/5805. @jbaxleyiii any thoughts on this one?

I'm not sure if related, but I am running into an issue where I am using optimisticResponse and can confirm that it is updating my cache correctly, but my components don't re-render until the client receives the response from the server (hence defeating the purpose of using optimisticResponse).

After looking into it some more, it looks like we hit this issue because our apollo client config specified:

const apolloClient = new ApolloClient({
  defaultOptions: {
    watchQuery: {
      fetchPolicy: APOLLO_FETCH_POLICY.CACHE_AND_NETWORK,
    },
    mutate: {
      fetchPolicy: APOLLO_FETCH_POLICY.NO_CACHE,
    },
  },
});

Which for mutate we had thought meant always hit the network similarly to what it means for a query but it also means do not cache the result, which causes the update option to not be triggered and does not write anything to the cache. Seeing as this is expected behavior I'm closing this issue.

Was this page helpful?
0 / 5 - 0 ratings