Apollo-client: [2.0] old data after mutation | bug

[seeden]

Hi, I have next query

query getMini($id: ID!) {
  mini(id: $id) {
    id
    cover(maxWidth: 600, maxHeight: 400)
  }
}

and next mutation

mutation ($signature: String!) {
    mini: submitMiniCoverS3DirectUpload(signature: $signature) {
      id
      cover(maxWidth: 600, maxHeight: 400)
    }
  }

as you can see after success mutation I will get new cover photo. So far so good. Everything is working fine with apolo 1.x. In apollo 2 I will get same cached cover photo after mutation. I checked response from server. There are valid new fields. But apollo is using old cached data.

I am using latest versions of all libraries:

    "apollo-cache-inmemory": "^0.2.0-rc.1",
    "apollo-client": "^2.0.0-rc.3",
    "apollo-link": "^0.8.0",
    "apollo-link-http": "^0.8.0",
    "apollo-link-batch-http": "^0.4.0",
    "apollo-link-retry": "^0.8.0",
    "apollo-link-dedup": "^0.6.0",

I think that this is related also to last comment https://github.com/apollographql/apollo-client/issues/2266#issuecomment-335933377.

FYI: fetchPolicy: 'network-only' is not working

[bkniffler]

This issue has been bothering me for quite some time too. Only came up with v2

[jbaxleyiii]

@seeden what do you mean by fetchPolicy: 'network-only' is not working?

And are you saying the watchQuery is kept alive and rerendered with old data?

[jbaxleyiii]

@bkniffler do you have any more info

[seeden]

I have tried to turn off caching with network-only but I received cached data.
Yes I am saying that I am seeing old data after mutation.

[jbaxleyiii]

@seeden I tried to recreate your issue without any luck? https://github.com/apollographql/apollo-client/pull/2342

[jbaxleyiii]

Can you create a reproduction for me?

[seeden]

I am using @graphql decorator from react-apollo and apollo-link-batch-http. I will try to create reproduction tomorrow because it is too late here :)

[jbaxleyiii]

@seeden no worries! Thanks so much! I'll cut a new RC too just to see if it was fixed with some new changes

[bkniffler]

I'm having issues with caching and I've not yet been able to reproduce. But the issue comes up when mutating via @graphql decorator. Possibly also when using the client directly, but I'm not doing this as much as the decorator so the issue didn't come up yet.

Most of the time, mutations will automatically update the cache and the changes are visible on my UI.

Last time I had the issues (today), I had an item-list (subset of fields, multiple items by filter) and an item (all fields, one item by id) query. I was calling the mutation on an existing item returning all fields. The list view accepted the changes immediately, but when I opened the detail of the item, the old values still remained. I tried everything to update the cache (update, refetchQueries, optimistic updates) to no avail. Also using network-only didn't work.

Sorry I don't have more info for now, just ping us here when there is a new RC, will try my use case and reply. If it remains unchanged I'll try and investigate more.

[jbaxleyiii]

@seeden @bkniffler can you try the newest rc (rc.4?)

[seeden]

I tried latest rc.4 but issue is still there. Maybe the problem is with react-apollo. I can see new data when I unmount and mount component again.

[jbaxleyiii]

@seeden ah! That may be the case! I'll take a look there!

[bkniffler]

same for me, hopefully a fix to react-apollo can resolve the issue..

[jbaxleyiii]

@bkniffler do you have any example code you can share? I can't seem to reproduce this?

[jbaxleyiii]

Or more information about how its being used? Are you unmounting the query wrapped component, firing the mutation, then remounting or is this all happening in a single mount?

[bkniffler]

So, I got 2 queries and 1 mutation:

export const gqlList = gql`
  query list($start: DateTime, $end: DateTime) {
    list(start: $start, end: $end) {
      id
      name
    }
  }
`;
export const gqlItem = gql`
  query item($id: String!) {
    item(id: $id) {
      id
      name
      text
    }
  }
`;
export const gqlMutation = gql`
  mutation item($id: String, $input: ItemInput!) {
    item(id: $id, input: $input) {
      id
      name
      text
    }
  }
`;

export const withItem = graphql(gqlItem, {
  options: ({ id }) => ({
    variables: { id },
    fetchPolicy: !id ? 'cache-only' : undefined,
  }),
  props: ({ ownProps, data }) => ({
    ...ownProps,
    data,
    item: data.item || {},
  }),
});

export const withList = graphql(gqlList, {
  options: ({ start, end }) => ({
    pollInterval: 20000,
    variables: {
      start,
      end,
    },
  }),
  props: ({ ownProps, data }) => ({
    list: data.list || [],
  }),
});

...

client.mutate({
          mutation: gqlMutation,
          variables: variables
        })

When I update an existing item (inside a modal that closes after save, so unmounting), I'm getting the new values returned from the mutation and the list immediately updates accordingly (so far everything good). But when I reopen the item/modal, it has the old values. As soon as the list polling interval kicks in, the modal immediately shows the correct values.

fixed by rc7

[seeden]

I think that this is related to https://github.com/apollographql/react-apollo/issues/1257#issuecomment-338184744 as well.

[bkniffler]

Any news? Can we expect an update to react-apollo? Sorry for pressing this, but its critical. I can hardly rollback to apollo 1 due to the significant performance improvements.

[seeden]

Hi @bkniffler. @jbaxleyiii did some updates in https://github.com/apollographql/apollo-client/pull/2375#issue-267903813 but it is not working for me as well. I am waiting for correct fix too.

[bkniffler]

Thanks for pointing me there @seeden, my issue above has been resolved by rc7.

[seeden]

@jbaxleyiii I removed whole node_modules and package-lock as well. I double checked all versions as well but it is not working for me. I tried latest versions and I see old data after mutation :(

    "apollo-cache-inmemory": "^1.0.0",
    "apollo-client": "^2.0.0",
    "apollo-link": "^1.0.0",
    "apollo-link-http": "^1.0.0",
    "apollo-link-batch-http": "^1.0.0",
    "apollo-link-retry": "^1.0.0",
    "apollo-link-dedup": "^1.0.0",
    "react-apollo": "^2.0.0",

I tried to use just react-link-http without dedup and retry as well. But nothing changed.
I can see changed values after unmount component

[seeden]

probably related to https://github.com/apollographql/apollo-client/issues/2368#issuecomment-339312365 as well

[seeden]

After two days of debugging I realised that I have an issue and therefore you can close it. It is working for me too. Thanks @jbaxleyiii

[mitjade]

@seeden What was your issue, maybe I am facing something similar with #2368?

[seeden]

@mitjade I used HoC which cached data to state.