Apollo Client Trips and Tricks

You can directly access cache using methods like

• writeData
• writeQuery and readQuery
• writeFragment and readFragment

But if you want to access the cache through resolvers and client schema. You need to call regular methods such as client.mutate, client.query, client.subscription and queries or mutation or fields should have @client directive.

Cache

Initially cache would be null for any object to query. For that reason you define defaults to populate the cache. If you need to update the cache, make sure to pull all the data without any result fields. (expected defaults already populated the cache).

For example, to update the Cart item, pull the current result and update it.

import { GET_CART_ITEMS } from './pages/cart';

const GET_CART_ITEMS = gql`
  query GetCartItems {
    cartItems @client
  }
`;


export const resolvers = {
  Launch: {
    updateCart: (launch, _, { cache }) => {
      const { cartItems } = cache.readQuery({ query: GET_CART_ITEMS });
       const cartData = cartItems.get(lauch.id)
        const updateCartData = { ...cartData, ...launch}; // don't mutate
        cache.writeQuery({query: WRITE_CART_ITEMS}, variables: { id: launch.id}, data: {  cartData });
      return ctrue;
    },
  },
};

Notice, if you write query like below it would fail when there is no data in the cache. So watch for it and don't have return fields.

Wrong query:

const GET_CART_ITEMS_RESULT = gql`
  query GetCartItems {
    cartItems(id: Int) @client {
       __typename
       data
     }
  }

Error:

cache might not be available Invariant Violation: Can't find field __typename on object undefined.

Or used within the try catch block

try {
 const { cartItems } = cache.readQuery({ query: GET_CART_ITEMS });
} catch( err) {
  // cache doesn't exist
  // write to cache using `cache.writeQuery`
}

Typenames

For any object fields used only on the client side need to define __typenames otherwise warnings are thrown. Sometimes if you want to store them as JSON objects, you can miss the selectors of an Object field so the Apollo will stringy the object.

For example instead of

gql`
fragment changes on Shop {
    resource
    changed @client {
        changes {
            range {
               x: Int
               y: Int
        }
     }
   }
}`

You can write as

gql`
fragment changes on Shop {
    resource
    changed @client {
        changes {
            range 
       }
  }
}`

Apollo Dev tools

Chrome Extension https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm It is very useful to check the graphql server and client results.

Unfortunately, it is not hot loadable. Anytime you make changes that affect the gql, resolvers, or schema you need to close the inspect and reopen to get the latest code applied to the apollo's dev tools. But for me closing the browser tab and reopen the page with inspect works only.

https://github.com/apollographql/apollo-client-devtools#reloading-the-chrome-extension

Nested Fields

https://github.com/graphql/graphql-spec/issues/91#issuecomment-206743676 Typically you also never really want to require something of infinite depth anyhow, so it's good to put a bound on these things. A pattern I often see using fragments:

{
  messages {
    ...CommentsRecursive
  }
}

fragment CommentsRecursive on Message {
  comments {
    ...CommentFields
    comments {
      ...CommentFields
      comments {
        ...CommentFields
      }
    }
  }
}

fragment CommentFields on Comment {
  id
  content
}

Update apollo cache

https://github.com/codedrone/apollo-client/blob/a760c146a3fee29ffd9c82677d593dec214bddc9/docs/source/advanced/update-store.md

In most cases you just need

https://www.apollographql.com/docs/link/links/state#write-data