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

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> 
  ); 
};