Apollo GraphQLクライアントは、クライアント側でGraphQLAPIとインターフェイスするための非常に一般的な方法です。 この投稿では、 ApolloBoostReactApollo2.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固有の統合。 QueryMutationコンポーネントのようなたくさんのグッズを提供してくれます。

このチュートリアルは、ReactApollo2.1+の使用を前提としています

インストール

まず、npxCreateReactAppを使用して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ミューテーションも実行する予定です。 公式ドキュメントを参照して、もう少し深く掘り下げることもできます。