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インスタンスを指します。
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 パターンを使用して、クエリからデータを返します。
スターウォーズのエピソードのヒーローとその友達を検索する例を次に示します。
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ミューテーションも実行する予定です。 公式ドキュメントを参照して、もう少し深く掘り下げることもできます。