Apollo client - cache APIs - auto update cache - erase cache - reactive variables - deletion - addition

Apollo Client 3 

1. Local only fields
2. Reactive Variables

const cache = new InMemoryCache({
  typePolicies: {
    Todo: {
      // If one of the keyFields is an object with fields of its own, you can
      // include those nested keyFields by using a nested array of strings:
      keyFields: ["date", "user", ["email"]],
    }
  },
});

• This internal data is intended to be easily JSON-serializable, so you can take a snapshot with cache.extract(), save it somewhere, and later restore with cache.restore(snapshot).

Here’s a mutation called EditTodo that returns the new todo value in the mutation response.

mutation EditTodo ($id: Int!, $text: String!) {
  editTodo (id: $id, text: $text) {
    success
    todo {          # <- Returning it here
      id
      text 
      completed
    }
    error {
      ... on TodoNotFoundError {
        message
      }
      ... on TodoValidationError {
        message
      }
    }
  }
}

And without any further intervention on our part, the Apollo Client should automatically merge the response data into the cache because it recognizes the Todo:3 identifier that was returned by the earlier query.

How to ensure Apollo Client updates the cache
In order for Apollo Client to update the cache automatically, we have to remember to always return the new data in operation responses.
For query responses, that’s the point. The entire purpose of a query is to return data and cache it.
But for mutations, like editTodo that change a single entity, we should be able to update the item automatically if we return the value in the mutation response.
Instead, we might want to erase the entire cache. You can do that with the client.clearStore() method in the update function.
import { gql, useMutation } from "@apollo/client"
import { client } from "./client"

const LOGOUT = gql`
  mutation Logout {
    logout {
      success
      message
    }
  }
`

const Navbar = () => {
  const [logout] = useMutation(LOGOUT, {
	  update () {
	    client.clearStore()
	  }
	});

  return <div onClick={() => logout()}></div>
}
reactive variables:
https://www.apollographql.com/blog/local-state-management-with-reactive-variables
deletion
const [mutate, { data, error }] = useMutation<
  DeleteTodoTypes.DeleteTodo, 
  DeleteTodoTypes.DeleteTodoVariables
>(
  DELETE_TODO,
  {
    update (cache, el) {
      const deletedId = el.data?.deleteTodo.todo?.id
      const allTodos = cache.readQuery<GetAllTodos>({ query: GET_ALL_TODOS });

      cache.writeQuery({
        query: GET_ALL_TODOS,
        data: {
          todos: allTodos?.todos.filter((t) => t?.id !== deletedId)
        }
      });

      cache.evict({ id: el.data?.deleteTodo.todo?.id })
    }
  }
)

additions:
const [mutate, { data, error }] = useMutation<
    AddTodoTypes.AddTodo, 
    AddTodoTypes.AddTodoVariables
  >(
    ADD_TODO,
    {
      update (cache, { data }) {
        const newTodoFromResponse = data?.addTodo.todo;
        const existingTodos = cache.readQuery<GetAllTodos>({
          query: GET_ALL_TODOS,
        });

        if (existingTodos && newTodoFromResponse) {
          cache.writeQuery({
            query: GET_ALL_TODOS,
            data: {
              todos: [
                ...existingTodos?.todos,
                newTodoFromResponse,
              ],
            },
          });
        }
      }
    }
  )

https://www.apollographql.com/blog/demystifying-cache-normalization/

 https://kulkarniankita9.medium.com/oh-hello-apollo-client-goodbye-redux-49dfdeda16d1