When using Apollo client, I find it quite tedious to manually update the cache for every mutation that requires an immediate UI update. I therefore decided to try to make a custom hook which updates the cache automatically.

The hook works but it seems a little "hacky" and I'm worried it might mess with the normal functioning of the cache. So I just wanted to ask if this hook seems like it should work ok?

Here's the code (where mutationName is the actual graphql mutation name and fieldName is the original graphql query name corresponding to the mutation):

export const useMutationWithCacheUpdate = (
  mutation,
  mutationName,
  fieldName
) => {
  const [createMutation, { data, loading, error }] = useMutation(mutation, {
    update(cache, { data }) {
      data = data[mutationName];
      cache.modify({
        fields: {
          [fieldName]: (existingItems = []) => {
            const newItemRef = cache.writeFragment({
              data: data,
              fragment: gql`
                  fragment newItem on ${fieldName} {
                    id
                    type
                  }
                `,
            });
            return [...existingItems, newItemRef];
          },
        },
      });
    },
  });
  return [createMutation, { data, loading, error }];
};