ReactApolloとApolloBoostを使用したReactのGraphQLの概要
Apollo GraphQLクライアントは、クライアント側でGraphQLAPIとインターフェイスするための非常に一般的な方法です。 この投稿では、 ApolloBoostとReactApollo2.1を使用してReactアプリでApolloをセットアップする方法について説明します。
これらの2つは何のためにあるのですか?
- Apollo Boost :クライアントでApolloをセットアップするには、かなり多くの定型コードが必要でしたが、ApolloBoostはそれを修正します。 これは、 apollo-client 、 apollo-cache-inmemory 、 apollo-link-error 、apollo-link-httpのバンドルされた組み合わせです。 apollo-link-state により、セットアップがはるかに簡単になります。
- React Apollo :ApolloのReact固有の統合。
Query
やMutation
コンポーネントのようなたくさんのグッズを提供してくれます。
このチュートリアルは、ReactApollo2.1+の使用を前提としています
インストール
まず、npxとCreateReactAppを使用してReactプロジェクトを初期化します。
$ npx create-react-app hello-graphql
次に、プロジェクトにcd
して、ローカル開発サーバーを起動できます。
$ cd hello-graphql && yarn start
また、プロジェクトには、graphql 、graphql-tag 、 apollo-boost 、react-apolloといういくつかの追加パッケージが必要です。 ]。 npmまたはYarnを使用してそれらを追加します。
$ yarn add graphql graphql-tag apollo-boost react-apollo # or, using npm: $ npm i graphql graphql-tag apollo-boost react-apollo
プロジェクトを配置し、パッケージを追加したら、Apolloクライアントをセットアップできます。
設定
クライアントのセットアップはこれ以上ないほど簡単です。 クライアントを開始し、それにURIをGraphQLサーバーエンドポイントに与えてから、 ApolloProvider コンポーネントを使用して、クライアントをアプリのコンポーネントで使用できるようにします。
この例では、エンドポイントは、スターウォーズに関するデータを含む ApolloLaunchpadインスタンスを指します。
index.js
import React from 'react'; import ReactDOM from 'react-dom'; import { ApolloProvider } from 'react-apollo'; import { ApolloClient, HttpLink, InMemoryCache } from 'apollo-boost'; import './index.css'; import App from './App'; const client = new ApolloClient({ link: new HttpLink({ uri: 'https://mpjk0plp9.lp.gql.zone/graphql' }), cache: new InMemoryCache() }); const AppWithProvider = () => ( <ApolloProvider client={client}> <App /> </ApolloProvider> ); ReactDOM.render(<AppWithProvider />, document.getElementById('root'));
注意すべきいくつかのこと:
- GraphQLエンドポイントを指すHttpLinkを使用してクライアントを初期化し、キャッシュユーティリティとしてApolloのInMemoryCacheも指定します。
ApolloProvider
コンポーネントを使用し、それをクライアントとして小道具として渡し、App
コンポーネントにラップします。
クエリコンポーネントの例
すべてが整ったので、GraphQLエンドポイントに対してクエリの実行を開始できます。 このために、ReactApolloのQuery
コンポーネントを使用します。これは、 render prop パターンを使用して、クエリからデータを返します。
スターウォーズのエピソードのヒーローとその友達を検索する例を次に示します。
App.js
import React from 'react'; import PropTypes from 'prop-types'; import { Query } from 'react-apollo'; import gql from 'graphql-tag'; const QUERY = gql` query HeroFriends($episode: Episode!) { hero(episode: $episode) { name friends { name } } } `; const HeroAndFriends = ({ episode }) => ( <Query query={QUERY} variables={{ episode }}> {({ data, error, loading }) => { if (error) return '💩 Oops!'; if (loading) return 'Patience young grasshopper...'; return ( <React.Fragment> <h1>Hero: {data.hero.name}</h1> <h2>His/her friends:</h2> <ul> {data.hero.friends.map(friend => ( <li key={friend.name}>{friend.name}</li> ))} </ul> </React.Fragment> ); }} </Query> ); HeroAndFriends.propTypes = { episode: PropTypes.string }; HeroAndFriends.defaultProps = { episode: 'NEWHOPE' }; const App = () => <HeroAndFriends episode="EMPIRE" />; export default App;
そして、ここで起こっている重要なことを分解しましょう:
- ReactApolloの
Query
コンポーネントは、graphql-tagのgqlを使用して解析されたGraphQLクエリで必要なqueryプロップを取ります。Query
は、関数である必要のあるchildren小道具も受け取ります。 ここでは、 variable プロップを渡して、クエリに変数値を提供しました。 Query
は、 pollInterval 、 fetchPolicy 、 errorPolicy 、delayなどのオプションの小道具も使用できます。- 子プロップに渡された関数は、いくつかの便利なプロパティを持つオブジェクトを受け取ります。 ここでは、データ、エラー、読み込みを使用していますが、 networkStatus 、refetchなどの他のプロパティも使用しています。およびfetchMoreも使用できます。
- data プロパティはクエリから受信したデータを保持し、 error プロパティはエラーオブジェクト(存在する場合)を保持し、クエリの実行中はloadingプロパティがtrueになります。
⚛️これで完了です!
ReactとGraphQLの使用を開始し、クエリの実行を開始する簡単な方法。 将来の投稿では、Mutation
コンポーネントを調べて、GraphQLミューテーションも実行する予定です。 公式ドキュメントを参照して、もう少し深く掘り下げることもできます。