Apollo-client State management cache is not updating automatically after save and delete operation

Question

I am using apollo-client for graphql calls along with I added state management with in the package apollo-client. In graphql module, assigned InMemoryCache to cache variable and client variable is exported.Client variable is imported in component so data is available in client.cache.data after default get call executed but I want to update client cache after save and delete graphql operations success callbacks

Here is my graphql.module.ts:

    import {NgModule} from '@angular/core';
    import {ApolloModule, APOLLO_OPTIONS} from 'apollo-angular';
    import { ApolloClient } from 'apollo-client';
    import {InMemoryCache} from 'apollo-cache-inmemory';
    import { HttpLink } from 'apollo-link-http';

    const cache = new InMemoryCache();
    const link = new HttpLink({
        uri:'https://api.graph.cool/simple/v1/ciyz901en4j590185wkmexyex'   
    });

    export var client = new ApolloClient({
      cache,
      link
    });
 @NgModule({ 
 })

and my service call implementation

client
      .query({
        query: gql`
        {         
          fORoomTypes()
          {
            nodes
            {
              roomTypeId
              roomType
              ratSingle
              ratDouble
              ratExtra
              statu
            }
          }
        }        
      `,
      })
      .then(result => {      
        callback(result);
      });

after callback client.cache.data contain data, I want to call this data with cache queries and I want to update cache automatically this is my save service implementation

  const post = gql`
      mutation
      {
        saveRtype(rt:
          {
            rty:
            {            
              rt:"Club room"
              rat:4000
              cchub:4500
              ext:800
              statu:1             
            }               
            traCheck:1
          }
          )
      }
    `
    client.mutate({
      mutation: post
    }).then((data) => {
      callback(data)
    });

Nicholas Harder Nicholas Harder · Accepted Answer · 2020-05-29T11:52:42

I've only used apollo client with React but hopefully can shed light on how it works. For this to happen "automatically", you either need to call refetchQueries to refetch fORoomTypes after the mutation, or manually update the cache. I noticed your responses do not return an id property, so how would it know which one to update? If there is an identifier that isn't called "id", then register it following this documentation.

Here is the link to documentation in general for what you want

https://www.apollographql.com/docs/angular/features/cache-updates/

Apollo-client State management cache is not updating automatically after save and delete operation

1 Answers