Problem Updating Graphql Cache after Mutation

Question

I currently am using graphql to handle a user logging in and to test that the cache is updating I am just trying to hardcode in values for the cache to update to on login. Below is what my client looks like, so I am using graphcache to try and get this working.

If I understand correctly this should be updating the result of the Me Query in the cache which returns a user with the user object I manually entered, however I do not see this info being fetched from the cache. In my component where I use the hook to call the Me graphql query it just returns the value from the database and this code seems to have no effect on the process. Do I have this set up wrong or something? It's hard to test this functionality when it doesn't seem to have any impact on how the code runs no matter what I put in here. If I delete the updates in the cacheExchange it runs exactly the same as with this code.

For clarity the login mutation returns a user object and an error object which looks the same as data.me from the Me query. I want to use the result from the login mutation to update the query results in the cache in the future. I am just putting in a hardcoded user object right now for testing where it says 'hankhill'.

Documentation I am following: https://formidable.com/open-source/urql/docs/graphcache/normalized-caching/

const client = createClient({
  url: 'http://localhost:4000/graphql',
  // fetchOptions required to return cookies to user
  fetchOptions: {
    credentials: 'include'
  },
  // using graphCache to normalize caching, needed for login to present properly
  exchanges: [dedupExchange, fetchExchange, cacheExchange({
    updates: {
      Mutation: {
        login(result, args, cache, info) {
          const query = MeDocument;
          cache.updateQuery({ query }, data => {
            if (data) {
              data.me = { id: 100, username: 'hankhill', createdAt: '', updatedAt: '' };
            }
            return data;
          })
        }
      }
    }
  })]
})

Answer 1

I had a quick skim over the article however I haven't dug into it too deeply. What you are trying to achieve is something we achieve in a different way in our code base. First of all something you should know is that if Apollo can automotically find the id field of an object and its __typename from a graphql response, then just carrying out your mutation will likely update the query for you without needing any intervention. You might want to double check that id gets returned in the data in the mutation. Apollo stores items in the cache based in on the combo of id/__typename, so if your mutation returns data with both those fields then you are likely going to have the cache update automatically. However you can also update the cache manually, particularly if you want to base it on a mutation you might benefit from seeing this.

TLDR though, I think you are basically just calling updateQuery in the wrong place. You should call it wherever you are calling your mutation.

import { useMutation, useApolloClient  } from '@apollo/client';

export const someFunctionalComponent = (props) => {
  const { cache } = useApolloClient();
  const [login] = useMutation(LOGIN);
  const query = MeDocument;
  
  const onLoginClick = (id, name) => {
    login({ variables: { id, name } });
    cache.updateQuery({ query }, data => {
      if (data) {
        data.me = { id: 100, username: 'hankhill'};
      }
      return data;
    })    
  }


return <div> Hello </div>
}