Apollo Client 3で追加された機能 #React

はじめに

Apollo Client 3がリリースされました。AC2からの変更点としては

これまで別々のパッケージから呼び出していた各モジュールが @apollo/client に集約された
typePolicies や Reactive Variable など、ローカルのステート管理機能が拡充された

といった感じです。実際にAC3を試してみると、今までメインで使っていた機能の使い方はほぼ変わらず、特に上記ローカルのステート管理周辺が改善された印象です。今回はtypePoliciesとReactive Variableのご紹介をします。

typePolicies

ローカルのキャッシュ（Apollo ClientのInMemoryCacheと呼ばれる）において、GraphQLスキーマの各タイプをどう扱うかをtypePoliciesで定義できるようになりました。また、バージョン2まで@clientとローカルリゾルバで行っていた同様の処理を扱うことができます（AC3からLocal Resolverはdeprecatedとなっています）。

呼び出し時（`read`）


const cache = new InMemoryCache({
  typePolicies: {
    Person: {
      fields: {
        name: {
          read(name) {
            return name.toUpperCase();
          }
        }
      },
    },
  },
})

// クエリの例
export const GET_PERSON = gql`
  query getPersion($id: String!) {
    person(id: $id) {
      id
      name
      age   
    }
  }
`

レンダーされるnameが大文字に。

更新時（`merge`）


const cache = new InMemoryCache({
  typePolicies: {
    Agenda: {
      fields: {
        tasks: {
          merge(existing = [], incoming: any[]) {
            return [...existing, ...incoming];
          },
        },
      },
    },
  },
})

上記はキャッシュに存在する配列とサーバーから送られる配列の値をマージする例。

Reactive Variable

上記typePoliciesのreadからReactive Variableを参照すれば、Reactive Variableを更新することでキャッシュが返す値を更新することが可能。


import { makeVar } from '@apollo/client'

const cartItems = makeVar([])

// 値のセット
cartItems([100, 101, 102])

// 値の取得
const currentCartItems = cartItems()

まとめ

今回はApollo Client 3で追加されたtypePoliciesとReactive Variableを紹介しました。サンプルはこちら。

References

https://www.apollographql.com/blog/announcing-the-release-of-apollo-client-3-0/

Apollo Client 3で追加された機能