React + Apollo Client -Setup編-

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

Apollo Clientについて

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

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

Projectの作成

ターミナルをひらいて

mkdir todo_app

cd todo_app

npx create-react-app apollo-client

cd apollo-client

npm start

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

npm i graphql @apollo/client

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(のちに解説します)をわたし、インスタンス化します。そしてAppclientをpropとしてわたしたApolloProviderで囲みます。

        

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

cd ..

git clone https://github.com/HondaAo/graphql_tutorial.git server

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

DATABASE_URL="postgresql://USER:PASSWORD@HOST:PORT/DATABASE"

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

cd server

npm install

npx prisma migrate dev --preview-feature --name init

npx prisma generate

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

npm start

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

🚀 Server ready at http://localhost:4000/graphql

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

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

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


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

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

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