GraphQLの準備ができたらApollo Clientをはじめよう

AppoloClient GraphQL API

f:id:kai1233:20180813024407j:plain

ここ数日、GraphQLとGrapheneを使ったAPIサーバをDjangoで構築していました。ひとまず簡単な機能は実装できたので、今度はクライアント側の準備をします

Apollo Clientと仲良くなりたい！

Apollo Client公式の概要と実際のコードをみてみよ。 コードはこのイヌスタグラムに沿って書かれてるので、適宜参照して理解の助けにしてください。 www.apollographql.com codesandbox.io

Apollo Clientの概要

リモートとローカル両方のデータマネジメントをできるシステムです。データを取得、ローディングやエラーステータスのトラッキング、UIの更新をカプセル化された一つのクエリコンポーネントで実装できます。

実際のコード例:

const Feed = () => (
  <Query query={GET_DOGS}>
    {({ loading, error, data }) => {
      if (error) return <Error />
      if (loading || !data) return <Fetching />;

      return <DogList dogs={data.dogs} />
    }}
  </Query>
)

上の説明であった通り、<Query>でくくられたコンポーネントがありますね。属性には小文字のqueryがあり、定数で定義されたクエリGET_DOGSが指定されています。

こちらも上記した通り、Apollo Clientではloading, errorのハンドルが簡単できます。コードではerrorやloadingのときにreturnするコンポーネントが宣言されています。

ちなみにこのコンポーネントはReactのrender prop APIをつかって定義されています。

データをキャッシングする

Apollo Clientの重要な機能の一つが、設定不要のキャッシング機能です。

import ApolloClient from 'apollo-boost';

// これだけでキャッシングが自動的にセットアップされる
const client = new ApolloClient();

超ラクですね。開発チームに感謝です。

クエリとミューテーションを投げる

続いては、犬たちのリストの取得と犬たちの画像の更新について。

const GET_ALL_DOGS = gql\`
  query {
    dogs {
      id
      breed
      displayImage
    }
  }
\`;

const UPDATE_DISPLAY_IMAGE = gql`
  mutation UpdateDisplayImage($id: String!, $displayImage: String!) {
    updateDisplayImage(id: $id, displayImage: $displayImage) {
      id
      displayImage
    }
  }
`;

GraphQLを学習した人なら説明がなくとも、だいたい察しがつくと思います。Apollo Clientでは各オブジェクトごとに__typenameとidを付与してApolloのキャッシュに保存されます。これによってオブジェクトを同定し、アップデートを可能にしています。

キャッシュリダイレクト

サーバからデータを取ってくるときに、既にあるデータは取得する必要ないですよね。つまり、いま手元にある差分だけサーバからとってくればいいわけです。

そんな時に便利なのがCache Redirectsです！apollo-boostクライアントのプロパティにcacheRedirectsを追加するだけで実装できます。

import ApolloClient from 'apollo-boost';

const client = new ApolloClient({
  cacheRedirects: {
    Query: {
      dog: (_, { id }, { getCacheKey }) => getCacheKey({ id, __typename: 'Dog' })
    }
  }
})

ね！簡単でしょう！

ローカルとリモートのデータを結合する

Apollo Clientはただリモートのデータを扱うだけではなく、apollo-link-stateによってローカルのステート管理も可能です。

これはつまりApollo Clientによって、GraphQLの利点を利用しながら、アプリケーションのすべてのデータを1つのインターフェイスで扱えるということ。革命じゃないか。

const GET_DOG = gql`
  query GetDogByBreed($breed: String!) {
    dog(breed: $breed) {
      images {
        url
        id
        isLiked @client
      }
    }
  }
`;

apollo-link-stateによってクライアントだけのフィールドを追加できます。このコードだとisLikerdがそれです。

エコシステム

Pulginを使って君の最強のクライアントを作り出せ！

コミュニティのリンク集: Community Links | Apollo Link

シンプルなApolloキャッシュの管理: Cache persistence for Apollo Client 2.0 – Apollo GraphQL

React StorybookのストーリーをApollo ClientでWrapする: GitHub - abhiaiyer91/apollo-storybook-decorator: Wrap your storybook environment with Apollo Client, provide mocks for isolated UI testing with GraphQL

AazonのリアルタイムGraphQLクライアント: AWS AppSync, powered by Apollo – Apollo GraphQL

まとめ

Apollo Clientの超基本的な機能をまとめました。ゼロから少しはApollo Clientと仲良くなれたかな？

残りは実際に実装しながら学習していきます！

参考文献

www.apollographql.com