cache.modify refetches whole query when I try to update cache

Hey everyone, I have a little issue when trying to update the cache using the new cache.modify feature.

My GraphQL query looks like this:

query Menus {
    viewer {
      id
      menuConnection {
        edges {
          node {
            id
            menuId
            label
            menuCategoryConnection {
              edges {
                node {
                  id
                  category {
                    id
                    label
                    subcategoryConnection {
                      edges {
                        node {
                          id
                          label
                          subcategoryItemConnection {
                            edges {
                              node {
                                id
                                item {
                                  id
                                  label
                                }
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }

When I add a new item to the subcategoryItemConnection and try to update cache after mutation, the cache.modify refetches the entire query as soon as I access a field of a store element, here is the code:

const [moveItem] = useMutation(MOVE_ITEM, {
    update: (cache, { data: { moveItem } }) => {
      cache.modify({
        id: cache.identify(moveItem.subcategory),
        fields: {
          subcategoryItemConnection(){
            /// ...cache update logic
          }
        },
      });
    },
  }); 
    }
  }

So as soon as I access the subcategoryItemConnection field the query gets refetched, any logic that I write inside the modifier function gets ignored. The way I understand it, the modifier function shouldn’t refetch the query it should do the opposite, allow me to update the cache without refetching all data from the backend. Can someone please tell me what the issue is or if I am understanding something wrong?

Thanks

[aquelehugo]

We had that issue today and the problem was that the result from the mutation didn’t have the same fields the query had.

Our query was like this:

query {
  comments {
    edges {
      id
      content
      totalReplies
    }
  }
}

Our mutation was like this:

mutation {
  addComment {
    id
    content
  }
}

So, when we called cache.modify and added a reference to the recently created comment, the fields didn’t match and the query was refetched.

cache.modify({
   fields: {
     comments(previous, { toReference }) {
       return {
         ...previous,
         edges: [toReference(newComment), ...previous.edges],
       };
     },
   },
});

So we updated our mutation to return totalReplies, which was missing in comparison to our query fields and the refetching stopped.

mutation {
  addComment {
    id
    content
    totalReplies
  }
}

Our queries and mutations actually have a more complex structure, but I stripped it down to make the example more readable.

[pontusab]

From docs: Like writeQuery and writeFragment, modify triggers a refresh of all active queries that depend on modified fields (unless you override this behavior).

try to add broadcast: false like this:

const [moveItem] = useMutation(MOVE_ITEM, {
    update: (cache, { data: { moveItem } }) => {
      cache.modify({
        id: cache.identify(moveItem.subcategory),
        broadcast: false,
        fields: {
          subcategoryItemConnection(){
            /// ...cache update logic
          }
        },
      });
    },
  }); 
    }
  }