このチュートリアルではReact + Apollo ClientでGraphQLのクライアント側での処理について学習します。

Apollo Clientについて

Apollo ClientとはGraphQL APIをシンプルにクライアント側で操作するためのライブラリです。React.jsと相性がよくReact HookやReactのコンポーネントのテストなど組み合わせることができます。それだけでなくTypeScriptとChrome DevToolsなどの拡張機能も利用することで開発を効率化できます。
公式DOCはこちらから

ここでは簡単なユーザー認証機能を持つTodoアプリのクライアント側を作成していきます。

Projectの作成

ターミナルをひらいて

http://localhost:3000がブラウザで走っていることを確認して、必要なパッケージをインストールします。

src/index.jsを開いてGraphQL APIと通信を行うためのApollo Clientインスタンスを加えます。

  // src/index.js

  import React from 'react';
  import ReactDOM from 'react-dom';
  import './styles/index.css';
  import App from './components/App';
  import {　ApolloProvider,　ApolloClient,　createHttpLink,　InMemoryCache　} from '@apollo/client';
  
  const httpLink = createHttpLink({
    uri: 'http://localhost:4000/graphql',
    credentials: "include"
  });
  
  const client = new ApolloClient({
    link: httpLink,
    cache: new InMemoryCache()
  });
  
  ReactDOM.render(
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>,
    document.getElementById('root')
  );

                    

上から順に説明をするとまずGraphQL APIと接続するhttpLinkを作成します。ここではサーバーはhttp://localhost:4000にははしらせています。credentials: "include"はcookieを使用するので設定してください。

ApolloClientlinkに先ほど作成したhttpLinkとcacheにInMemoryCache（のちに解説します）をわたし、インスタンス化します。そしてAppをclientをpropとしてわたしたApolloProviderで囲みます。

　　　　　　　　

続いてサーバーサイドのコードをダウンロードします。ここではNode.js + GraphQLのチュートリアルで作成したAPIの利用します。serverディレクトリのなかにコードを落とします。

サーバーサイドではGraphQLを使用しています。インストールがまだの人はインストールして起動してください。PrismaについてはNode.js + GraphQLで解説しています。まず自身のデータベースにMigrationを行う必要があります。.envファイルを作成し、

自身でUSER,PASSWORDをpostgresQLのユーザー名とパスワードにかえてください。HOSTはlocalhost,PORTは5432そしてDATABASEは好きな名前にかえてください。

上記のコマンドでマイグレーションができているはずです。念のためにpsql -lで確認してみてください。無事に作成されていればサーバーをはしらせましょう。

ターミナルに以下のように表示されているはずなので

リンク先にとぶとGraphQLのPlaygroundにアクセスできます。試しにいくつか試してみましょう。

register　Mutationでユーザー登録し、login　Mutationでログインができます。ログイン後右クリックで検証を押してApplicationの項目でcookieを確認したらtodoという名前のcookieが保存されていることがわかります。

次回のセクションでTodoのデータを表示したいので以下のaddTodoのMutationを実行しましょう。

  mutation {
      addTodo(content: "Learning Reactjs"){
        content
  　}
  }
                    

ログインできていないとnullがかえってくるので先に済ましてから実行してください。

ここまで完了したら次のQueryに進みましょう。

Query Listing Todo へ