2023.02.20

Apollo Clientとは？初心者が公式チュートリアルで検証！(Reactで)

Web制作

こんにちは、Maromaroの松橋です。

今回はApollo Clientについてどのようなものなのかを調べてみました！

ちなみにApollo Clientについては触れたことがなく、初心者の状態です。

そのためまずは、公式チュートリアルの「Get started with Apollo Client」を試してみます！

Apollo Clientとは

Apollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. Use it to fetch, cache, and modify application data, all while automatically updating your UI.
https://www.apollographql.com/docs/react/

ということで、最初これを読んでみてもピンと来なかったのですが、、、要は、GraphQLエンジンにクエリ(GraphQLクエリ)でデータの取得や操作を可能にする、JavaScriptのGraphQLクライアントライブラリです。
ローカルとリモートで状態管理を可能にしたり、キャッシュも操作できるということで、今風なライブラリな雰囲気を感じます！

そもそも、GraphQLとは

次に、GraphQLとは何なのかというと、API向けのクエリ(GraphQLクエリ)を実行し、特定のDBやストレージエンジンに縛られずにデータの取得や操作を可能にする実装のことです。
Facebook(現Meta)によって2015年にオープンソース化された技術です。

一般的なREST APIでは、データ取得のために、複数のURLからデータを読み込む必要がありますが、GraphQL APIでは1回のリクエストでアプリが必要なデータをすべて取得することが可能です。

Apollo Client以外のGraphQL APIライブラリ・サービス

Apollo Client以外でもGraphQL APIライブラリはたくさんあるのか？と思い調べてみたところ、Facebookを中心に設立したGraphQL Foundationという財団のサイトに一覧でまとめられてました。

https://graphql.org/code/

JavaScriptやPHPをはじめ、様々な言語で利用可能なライブラリーがありました！(もちろんApollo Clientも)
AWSですと、AWS AmplifyやAWS AppSyncがあるようです。

将来的にはこういったライブラリーも利用してみようと思います！

実際にApollo Clientのチュートリアル試してみる。

チュートリアルの準備〜GraphQLエンジン起動〜

それでは早速チュートリアルを進めようと思ったのですが、まずReactでApollo Clientを立ち上げる前に、バックエンド側でGraphQLエンジンを準備します！

GraphQLエンジンは、お好みで何を利用しても良いと思いますが、今回はHasuraというJavaScriptライブラリを利用します。

HasuraのGitHubリポジトリに、Dockerで簡単にhasura＆PostgreSQLでGraphQLエンジンのコンテナを立ち上げられるdocker-compose.yamlがあるのでこちらを利用しましょう。

https://github.com/hasura/graphql-engine/blob/master/install-manifests/docker-compose/docker-compose.yaml

PROJECT DIRECTORY/hasura/docker-compose.yaml

version: '3.6'
services:
  postgres:
    image: postgres:14
    restart: always
    volumes:
    - db_data:/var/lib/postgresql/data
    environment:
      POSTGRES_PASSWORD: postgrespassword
  graphql-engine:
    image: hasura/graphql-engine:v2.2.0
    ports:
    - "8080:8080"
    depends_on:
    - "postgres"
    restart: always
    environment:
      ## postgres database to store Hasura metadata
      HASURA_GRAPHQL_METADATA_DATABASE_URL: postgres://postgres:postgrespassword@postgres:5432/postgres
      ## this env var can be used to add the above postgres database to Hasura as a data source. this can be removed/updated based on your needs
      PG_DATABASE_URL: postgres://postgres:postgrespassword@postgres:5432/postgres
      ## enable the console served by server
      HASURA_GRAPHQL_ENABLE_CONSOLE: "true" # set to "false" to disable console
      ## enable debugging mode. It is recommended to disable this in production
      HASURA_GRAPHQL_DEV_MODE: "true"
      HASURA_GRAPHQL_ENABLED_LOG_TYPES: startup, http-log, webhook-log, websocket-log, query-log
      ## uncomment next line to run console offline (i.e load console assets from server instead of CDN)
      # HASURA_GRAPHQL_CONSOLE_ASSETS_DIR: /srv/console-assets
      ## uncomment next line to set an admin secret
      # HASURA_GRAPHQL_ADMIN_SECRET: myadminsecretkey
volumes:
  db_data:

docker-compose.yamlを用意したら、下記コマンドでコンテナを立ち上げましょう。

$ cd PROJECT DIRECTORY/hasura
$ docker-compose up -d

ブラウザから http://localhost:8080/console を開くと、Hasuraの管理画面が表示されます。

次にテーブルの設定を行います。まずは赤枠の「DATA」をクリックします。

次に「Create Table」ボタンをクリックしてSQLテーブルを作成します。

「Create Table」ボタンをクリックすると、テーブル名やカラムをどうするか設定する画面が出てきますので、画面の赤枠のように設定します。
idカラムをUUIDにし、とりあえずgen_random_uuid() にして、乱数の一意の値を自動生成させることにしました。

テーブルを作成すると、下記画像の赤枠のようにlocationsというテーブルが作成されたことがわかります。

次にテーブルに値を入れていくのですが、とりあえず適当に入れていきます。

値を追加すると下記のように、入力した値を確認することができます。

次に、GrafQLクエリでもデータの取得ができるかどうか確認します。
赤枠のrunボタン？再生ボタン？をクリックすると、GrafQLクエリが走ります。
結果は右側の赤枠に表示されます(ちゃんと動いてますね！)

ここまでで、GraphQLエンジンをローカル環境で展開できました。
準備完了です！

Apollo Clientのチュートリアル開始！

では早速、Apollo Clientのチュートリアルを進めます

Step 1: Setup

Reactのセットアップを行います。

$ cd ProjectDir/
$ npx create-react-app my-app
$ cd my-app/

Step 2: Install dependencies

Apollo Clientパッケージをインストールします。

$ npm install @apollo/client graphql

Step 3: Initialize ApolloClient

ApolloClientの初期化を行うのですが、その前にReactを立ち上げます。

$ npm start

Step 4: Connect your client to React

Reactを立ち上げたら、Apollo ClientをReactに接続します。
接続には、ApolloProviderコンポーネント(※〜 from ‘@apollo/client’; の部分)を使用するとのことです。

my-app/src/index.js


import React from 'react';
import ReactDOM from 'react-dom/client';
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
import App from './App';

const client = new ApolloClient({
  uri: 'http://localhost:8080/v1/graphql',
  cache: new InMemoryCache(),
});


// Supported in React 18+
const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>
);

※uri: ‘http://localhost:8080/v1/graphql’, の部分はチュートリアルと異なりますが、graphqlを立ち上げたエンドポイントとなります。

Step 5: Fetch data with useQuery

ステップ5はまとめてコードを記載します。
何も考えずコピペで動きますが、流れを紐解いていきます。

まず、qglでGrafQLクエリを定義します。
ここで、HASURAで入力した情報を取得することができます。

次に、DisplayLocationsコンポーネントを作成し、作成したDisplayLocationsコンポーネント内で、useQueryにより、qglで取得した入力情報をHTMLへ展開します。

そして、DisplayLocationsコンポーネントをAppコンポーネントに配置し、ブラウザで確認すると、コード下の画像のように、HASURAで入力した情報が記述したHTMLで出てきます！
※画像は適当に用意してパスをあわせてください。


import { useQuery, gql } from '@apollo/client';

const GET_LOCATIONS = gql`
  query GetLocations {
    locations {
      id
      name
      description
      photo
    }
  }
`;

function DisplayLocations() {
  const { loading, error, data } = useQuery(GET_LOCATIONS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error : {error.message}</p>;

  return data.locations.map(({ id, name, description, photo }) => (
    <div key={id}>
      <h3>{name}</h3>
      <img width="400" height="250" alt="location-reference" src={`${photo}`} />
      <br />
      <b>About this location:</b>
      <p>{description}</p>
      <br />
    </div>
  ));
}

export default function App() {
  return (
    <div>
      <h2>My first Apollo app 🚀</h2>
      <DisplayLocations />
    </div>
  );
}