はじめに
- 前回まで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 } }
import { ApolloProvider } from 'react-apollo'
いろいろと調べてみると
apollo Client3.0で結構、廃止になっているものがおおくなっているので、最新のapollo client3.0を利用した方がよさそうだ。