apollo clientをインストールしてみる

はじめに

• 前回までgraphqlの調査していたので、今回から実際に実装してみる
• Apollo clientを利用してみる

Apollo Clientのインストール

yarn add apollo-boost graphql react-apollo

apollo-boostはもう廃止らしい

Apollo Client 3.0が同様に簡単なセットアップを提供するため、Apollo Boostプロジェクトは廃止されました。アポロブーストの依存関係をすべて削除し、必要に応じてApolloClientコンストラクターを変更することをお勧めします。

packageの依存関係の確認

• apollo-boostを利用すると古いバージョンのpollo--clinetがインストールされてしまう

# npm view apollo-boost dependencies
 
{
  'apollo-cache': '^1.3.5',
  'apollo-cache-inmemory': '^1.6.6',
  'apollo-client': '^2.6.10',
  'apollo-link': '^1.0.6',
  'apollo-link-error': '^1.0.3',
  'apollo-link-http': '^1.3.1',
  'graphql-tag': '^2.4.2',
  'ts-invariant': '^0.4.0',
  tslib: '^1.10.0'
}

インストールされるpackageの概要

• apollo-clinetにキャッシュ機能を実装するためのpackageになる。キャッシュに対してGraphQLクエリを直接実行します。

import { InMemoryCache } from 'apollo-cache-inmemory'

• HTTPフェッチを使用して、ネットワーク経由でGraphQLの結果を取得します。

import { HttpLink } from 'apollo-link-http'

• applo client 3.0ではこちらはすでに廃止されているpackageとなる。

import { ApolloLink, concat } from 'apollo-link'

• graphqlのクエリ文字列にコンバートするために利用する

import gql from 'graphql-tag';

const query = gql`
  {
    user(id: 5) {
      firstName
      lastName
    }
  }

• ApolloProviderコンポーネントを使用して、ApolloクライアントをReactに接続する

import { ApolloProvider } from 'react-apollo'

　いろいろと調べてみると

apollo Client3.0で結構、廃止になっているものがおおくなっているので、最新のapollo client3.0を利用した方がよさそうだ。