cache.writeQuery in update on OptimisticResponse

On an optimisticResponse, the cache.writeQuery inside update, triggers the query only for the optimistic data. It doesn’t trigger the query ( and hence re-render) when the update function runs the second time with the fetched data.

I would like it to trigger the query every time the cache.writeQuery runs. Below is how the mutation, optimistic response and update functions look.

       await createPost({
        variables,
        optimisticResponse: {
          __typename: 'Mutation',
          createPost: {
            __typename: 'Post',
            id: Math.round(Math.random() * -1000000),
            person: {
              __typename: 'Person',
             id: personId
            }
          }
        },
        update: async (store, { data: { createPost } }) => {
          let data = await store.readQuery({
            query: MyQuery,
            variables: {
              id : myId,
            }
          });

          function updateId(id) {
            return function(data) {
              data.my.posts = data.my.posts.filter((p) => p.id !== id);
              return data;
            }
          }

          data.my.posts.push(createPost);

          if (isNaN(Number(createPost.id))) {
            data = removeOptId(data)
          } else {
            removeOptId = updatePostId(createPost.id)
          }

          await store.writeQuery({
            query: MyQuery,
            variables: { id: myId },
            data
          });
        }
     })

[dobesv]

On further investigation I have found that it is not safe to modify the return value of readQuery and write it back to the store. Doing this may affect some cached data and give unexpected results. You should always use a copy-on-write approach with the return value of readQuery.

The reason my trick with doing a shallow copy of the query worked is that using a different object there affected the cache key apollo was using, so it returned a new object. Using the same document for the query meant that calls to readQuery and the Query component were sharing exactly the same object.

When the mutate call returns, the Query component checks if anything changes - however, it sees no change because its object was already updated when we modified the readQuery result data, so it does not re-render.

In the past there have been some examples and possibly even documentation suggesting that it is safe to mutate the return value of readQuery inside a mutation’s update function. However, I see some of those examples were adjusted to create a new object, and I can’t find any mention of this in the documentation (any more?).

In conclusion: to avoid weird caching problems, do not modify data returned from readQuery directly - any changes you make should be made to new objects of your own creation.

[dobesv]

I am having a similar issue, although without using optimistic response at all. writeQuery is not triggering an update of affected components. The workaround, weirdly, is to use a shallow clone of the query in readQuery, e.g.

let data = await store.readQuery({
            query: {...MyQuery},
            variables: {
              id : myId,
            }
          });

might fix your issue, if it’s the same weird one I’m investigating.