ReactNativeでGraphQL開発をする為のApolloClient導入手順

はじめに

今年はGraphQLをメインに動いていきました。
フロントエンドでGraphQLを使うにはApolloClientがオススメです。
今回はReactNativeにてApolloClientを使う方法をご紹介します。
結構情報が古くて最初は導入に時間がかかってしまった為、参考になればと思います。

参考記事

Apollo公式 Integrating with React Native

※こちら古いのでこのまま行うとバグ出ますw

以下２つは組み込みでとても楽になります。
Queryタイプと関数タイプがあるのですがQueryタイプがオススメです。

導入手順

1. ApolloClientのインストール

今回Clientは apollo-clientではなくapollo-boostを使います。
react-apolloはProviderとして使います。

yarn add apollo-boost
yarn add react-apollo

2.GraphQLのインストール

GraphQLを使うのでGraphQLと中でタグの定義が出来る様にgraphql-tagをインストールします。

yarn add graphql
yarn add graphql-tag

3.ReactNativeにApolloClientを組み込む

apollo-boostを使い、Clientを生成して、ApolloProviderでナビゲーションに渡しています。
※Reduxと同じ感覚。

この際、ユーザー認証を入れたりしたい場合は、ApolloClientにプロパティにて定義する必要があります。

import ApolloClient from "apollo-boost";
import { ApolloProvider } from "react-apollo";

const client = new ApolloClient({
  uri: "http://127.0.0.1/graphql"
});

const Navigation = () => (
  <ApolloProvider client={client}>
    <Provider store={store}>
      <AppNavigation />
    </Provider>
  </ApolloProvider>
);

4.Queryの使用方法

Queryの使用方法は以下となります。
実際にはgqlはとても長いのと共通で使うので、別ディレクトリ「gql」をさくせいして、読み込む形がベストです。

import gql from "graphql-tag";
import { Query } from "react-apollo";

const GET_DOG_PHOTO = gql`
  query Dog($breed: String!) {
    dog(breed: $breed) {
      id
      displayImage
    }
  }
`;

const DogPhoto = ({ breed }) => (
  <Query query={GET_DOG_PHOTO} variables={{ breed }}>
    {({ loading, error, data }) => {
      if (loading) return null;
      if (error) return `Error!: ${error}`;

      return (
        <img src={data.dog.displayImage} style={{ height: 100, width: 100 }} />
      );
    }}
  </Query>
);

5.Mutationの使用方法

Mutationの使用方法もQuery形式ならとても簡単です。
以下の形で出来ます。

import gql from "graphql-tag";
import { Mutation } from "react-apollo";

const ADD_TODO = gql`
  mutation AddTodo($type: String!) {
    addTodo(type: $type) {
      id
      type
    }
  }
`;

const AddTodo = () => {
  let input;

  return (
    <Mutation mutation={ADD_TODO}>
      {(addTodo, { data }) => (
        <div>
          <form
            onSubmit={e => {
              e.preventDefault();
              addTodo({ variables: { type: input.value } });
              input.value = "";
            }}
          >
            <input
              ref={node => {
                input = node;
              }}
            />
            <button type="submit">Add Todo</button>
          </form>
        </div>
      )}
    </Mutation>
  );
};