React-apollo: client.writeQuery after local mutation doesn't trigger component rerendering

[Karpengold]

I'm trying to update cache after local mutation:

export const UPDATE_DAILY_PARAMS = gql`
  mutation updateDailyParams($id: Int!, $value: Int!) {
    updateDailyParams(id: $id, value: $value) @client
  }
`;

Here is resolver for this mutation:

const client = new ApolloClient({
  cache,
  resolvers: {
    Mutation: {
      updateDailyParams: (_, { id, value }, { client }) => {
        const { dailyParams } = client.readQuery({ query: GET_DAILY_PARAMS });

        const itemIndex = dailyParams.findIndex(i => i.id == id);
        if (itemIndex != -1) {
          dailyParams[itemIndex].current += value;

          client.writeQuery({ query: GET_DAILY_PARAMS, data: { dailyParams } });
        }
        return dailyParams;
      }
    }
  }
});

and GET_DAILY_PARAMS query:

export const GET_DAILY_PARAMS = gql`
  query getDailyParams {
    dailyParams @client {
      id
      name
      isProportion
      current
      goal
      unit
      progressTypes {
        color
        rate
      }
    }
  }
`;

And I have component listening to the GET_DAILY_PARAMS query (by graphql HOC) but client.writeQuery doesn't trigger rerendering of this component

Also cache is updated correctly and if I manually fire rerender of my component data on it is correct (so writeQuery updates cache, but doesn't trigger rerender)

Can this be due to the use of the @client directive?

Environment:

"apollo-boost": "^0.4.3",
"react-apollo": "^2.5.8",
"react-native": "0.60.4",
"apollo-cache-inmemory": "^1.6.2",
"react": "16.8.6"

[lensbart]

Have you tried avoiding to mutate the local store data? I had a very similar issue, and this turned out to solve my problem. You can configure your Apollo Client instance to enforce immutability, which might come with a performance benefit as well: see https://github.com/apollographql/apollo-client/pull/4543

[hwillson]

React Apollo has been refactored to use React Hooks behind the scenes for everything, which means a lot has changed since this issue was opened (and a lot of outstanding issues have been resolved). We'll close this issue off, but please let us know if you're still encountering this problem using React Apollo >= 3.1.0. Thanks!

[aluminick]

Still not working.

[kallevonbach]

Still an issue.

[thiskevinwang]

Can we reopen this, or add to the DOCS?

There's no instruction on how to have a component _"subscribe-to"_ (aka, _"potentially rerender based on"_) client-cache changes (like you typically see with react-redux components)

🙏:)

[emilbryggare]

Had problems with this today when using @apollo/react-hooks": "^3.1.3 the component will not re-render if I mutate the cache.

If I avoid mutating the cache, the component will re-render as it should. 👍

[luke-robertson]

Whats the work around for this ? i expect my component to update when my store updates

[developer239]

How is this closed? 😂 Still not working.

[buzzpsych]

Please reopen this... I've tried numerous solutions

[pascaloliv]

📢@thiskevinwang @aluminick @designalchemy @developer239 @buzzpsych

I had the same issue with a readCache then writeCache logic that doesn't refresh the UI.
That was because the writeCache method was not using an immutable copy of the initial cache data.
I think you are doing the same in your code (dailyParams[itemIndex].current += value;)
Try to create a copy of dailyParams mutate it and pass it to writeQuery.
Let me know if it helps.

[Abror1997]

It worked for me. Use useQuery hook instead of client.readQuery.

[allezallez99]

Just stumble into this, and it's the same issue as in 2018.
Just read from cache my const { resulFromCache } = cache.readQuery();
And started updating directly resulFromCache[index].value = newValue.
Trying lodash _.cloneDeep from the beginning solved it for me.

https://github.com/apollographql/apollo-client/issues/3909#issuecomment-449363099

[Krankypanky]

Also having the same Issue...

My Example:

let data = cache.readQuery({
    query: GetProjectDocument,
    variables: {
      slug: project.slug
    }
  });

  let updatedData = cloneDeep(data);


(... changing data process...)

cache.writeQuery({
    query: GetProjectDocument,
    variables: {
      slug: project.slug
    },
    data: updatedData
  });

I checked the data directly before injecting it back to the store, the result:
the data is fine but the component update process not...

Somehow it only works for entities which are not deeply nested...

I need help on that pls.... Reopen that issue

Have you tried avoiding to mutate the local store data? I had a very similar issue, and this turned out to solve my problem. You can configure your Apollo Client instance to enforce immutability, which might come with a performance benefit as well: see apollographql/apollo-client#4543

-> Yes, I tried, same result..

[Krankypanky]

So after this few hours i found a possible workaround:

My data structure is something like this:

{
  project: {
    {...data}

    sprints: {
      {...data}

      issues {
        {...data}

        subTasks: {
          {...data}

        }
      }
    }
  }
}

If I want to update a subtask its quite easy to do it with a readQuery, especially if i have multiple subtasks. But with this approach I had the issue i already explained before.

The solution is actually quite easy, but not perfect. Instead of doing the cache-update with readQuery, I used readFragment directly pointed to a subtask. That update works completely fine, because I have abstracted my whole data structure into fragments.

The downside? If i have to update multiple subTasks i have to loop trough them and update the cache. At this point i don't have any data related to the parent issue, otherwise I would try to do it directly inside of the parent issue.

that approach is:

let data = cache.readFragment({
  fragment: SubTaskFragmentDoc,
  fragmentName: 'SubTaskFragment',
  id: 'Issue:' + issue.issueId
});

let updatedData = cloneDeep(data);
updatedData.status = issue.status;

cache.writeFragment({
  fragment: SubTaskFragmentDoc,
  fragmentName: 'SubTaskFragment',
  id: 'Issue:' + issue.issueId,
  data: {
    ...updatedData,
  }
});

I hope that i could help somebody with that^^

So somehow the cache-update with deeply nested data didn't work with writeQuery...