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(のちに解説します)をわたし、インスタンス化します。そしてAppをclientを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に進みましょう。