Graphcache: querying from cache immediately after creating an entity

[seanparmelee]

In short, I'm working on a user registration flow and I'd like to avoid the network call that fetches the user I just created.

I saw there was a similar discussion here, though I'm not using schema awareness and after updating my cache config accordingly I'm still seeing the network call when querying for the user that was just created.

I believe my schema and urql config are setup correctly to enable this:

• the createUser mutation returns the full User object, including id and __typename: 'User'
• the getUser query returns the full User object, including id and __typename: 'User'
• I've added the following to the cache config:

updates: {
   Mutation: {
     createUser(result, args, cache) {
       const user = result.createUser.user;
       cache.link('Query', 'getUser', { id: args.id }, user);
     },
   },
 },

Yet I'm still seeing a network call go out for the getUser query to fetch the user that was just created.

I'm not sure if the following is needed (it didn't seem to make a difference), but I also tried adding a local resolver so urql would know where to look for cached entities:

resolvers: {
  Query: {
    getUser: (_, args, cache) => {
      return { __typename: 'User', id: args.id };
    },
  },
},

Do I have this configured incorrectly? Or is there something else I'm missing?

[JoviDeCroock]

Is it possible that createUser has less fields than what getUser is asking for? Are both the __typename and id returned from createUser?

The reasons behind me asking is that this relies heavily on createUser writing everything correctly for getUser to resolve it.

As an alternative you could try using updateQuery on getUser and see if that does the trick, if it does there might be a discrepancy between the two.

[kitten]

also, to point this out:

updates: {
   Mutation: {
     createUser(result, args, cache) {
       const user = result.createUser.user;
       cache.link('Query', 'getUser', { id: args.id }, user); // here
     },
   },
 },

Is the ID actually passed on the client-side for creation, or did you intend to write the following instead?

updates: {
   Mutation: {
     createUser(result, args, cache) {
       const user = result.createUser.user;
       cache.link('Query', 'getUser', { id: user.id }, user); // here
     },
   },
 },

[seanparmelee]

Thanks for your responses @JoviDeCroock & @kitten

Is it possible that createUser has less fields than what getUser is asking for? Are both the __typename and id returned from createUser?

Sure enough, it looks like the getUser query is querying for one additional field than createUser. I just updated createUser to have that same field and it looks like it's successfully pulling the created user from cache rather than refetching 😅 I'll perform some more testing to confirm, but this is looking promising. Thanks!

Is the ID actually passed on the client-side for creation, or did you intend to write the following instead?

In our case the ID is already known because we're using a 3rd party auth solution and our createUser mutation is what creates our own record of the user (taking in the ID from our auth service).

[JoviDeCroock]

No worries, glad we could help out. We do have the populateExchange to bypass the problem of having missing fields and recently we added a logger interface that can warn you about missing fields in graphCache. You can add the logger key to your configuration on latest and listen for debug and warn logs.