Apollo GraphQL javascript react プログラミング

チュートリアルで学ぶApollo Client - Get started -

更新日:


 

こんにちは、mabuiです。
GraphQLをクライアントで使いやすくするためのライブラリ、Apollo Clientのチュートリアルを手を動かしつつ紹介して、今後のサービス開発に活かしていこうと思います。
 
なお、チュートリアルはReactで解説されています。
チュートリアルページ - Get started

 

インストール

動作に必要なパッケージ群のインストールです。

 
- apollo-boost
Apollo Clientのセットアップに必要なメモリキャッシュ、ローカル状態管理、エラー処理などのパッケージが含まれています。
 
- react-apollos
ReactコンポーネントからGraphQLサーバにアクセスするパッケージです。
 
- graphql
GraphQLクエリのパーサーです。
 
チュートリアルのコードを実行する場合は、CodeSandboxを使用するか、create-react-appで新規Reactプロジェクトを作成するのがいいでしょう。

 

クライアント作成

ではApolloクライアントのコードを書いていきましょう。
クライアントのオブジェクト生成にはGraphQLサーバーのエンドポイント(=url)が必要です。
公式が用意してくれているエンドポイントを使用します。
エンドポイントを指定しない場合は、ローカルの/graphqlエンドポイントが指定されます。
 
App.js

create-react-appで生成したAppコンポーネントのファイル内に埋め込んでqueryを実行しています。
 
ApolloClientapollo-boostパッケージから、
クエリ文字列を解析するgql関数はgraphql-tagパッケージからそれぞれインポートします。
 
npm startでreact appを起動すると、コンソールのログでクエリ結果が出力されています。

ここまで素のJavaScriptでGraphQLのクエリを実行したのみですが、
Reactと統合することでクエリをUIコンポーネント内で扱いやすくすることができます。

 

Reactの導入

ではApollo ClientをReactに導入していきましょう。

react-apolloパッケージからApolloProviderコンポーネントをインポートして、
その他のコンポーネントを囲んで親子関係を作ることで、子コンポーネントからいつでもGraphQLにアクセスできるようになります。

create-react-appで生成したコードの場合、最上位のコンポーネントであるAppコンポーネントの内部コンポーネントを囲むように配置することで、アプリケーション全体で使用できるようにします。

以上でコンポーネントからクエリを発行する準備ができました。

 

リクエストデータ

では、クエリを操作していきます。
Queryコンポーネントのqueryプロパティ(=query prop)にgql関数を使用してクエリ文字列のオブジェクトを渡します。

Queryコンポーネントの内部ではレンダリングする要素を記述でき、エラーとローディングの状態を追跡してloading properror propを、クエリ結果を data propとしてそれぞれ利用できます。

Apollo Clientの実装内部ではコンポーネント内部の記述を、Queryコンポーネントの値に関数を持つchildrenプロパティ(=children prop)に渡してレンダリングする要素を知らせており、
こういったコンポーネントのプロパティの値を関数とするやり方をRender Propsと呼びます。

下記のコードではpropsからloading, error, dataをそれぞれアロー関数の引数に渡して処理しています。

クエリの実行結果はExchangeRatesコンポーネントに出力されます。

ここまででReactのクエリコンポーネントが作成できました。
お疲れ様でした!🍻
 

-Apollo, GraphQL, javascript, react, プログラミング
-, , , ,

Copyright© mabui.org , 2018 All Rights Reserved Powered by STINGER.