GraphQLクライアントのApollo Clientをさわってみる

JavaScript

この記事では、GraphQLクライアントのApollo Clientをさわってみて、感触を掴んでもらうための記事です。

動作確認バージョン

  • create-react-app : 5.0.1
  • react : 18.3.1
  • @apollo/client : 3.10.1
  • graphql : 16.8.1

Apollo Client とは

Apollo Client は、JavaScriptのGraphQL APIのクライアントのライブラリです。また、GraphQLのQueryやMutationを実行するだけでなく、ローカルの状態管理やキャッシュの機能も備えています。

コアとなる@apollo/clientライブラリは、デフォルトでReactと統合できます。また、Apolloコミュニティにより Angular, Vue, Svelte などとも統合できます。

Apollo Clientのインストール

まずはnpx create-react-appコマンドでReact環境を作成します。（react 18.3.1 で確認しています）

npx create-react-app apollo-client-react-test
cd apollo-client-react-test

# 起動することを確認
npm run start

Apollo Clientを使うには次の2つのライブラリが必要です。

  • @apollo/client：Apollo Clientのコアライブラリ
  • graphql: GraphQLのクエリパースするロジック
npm install @apollo/client graphql

ApolloClient の初期化

new ApolloClientでインスタンスを初期化します。

// index.js

// ...既存のコード

import { ApolloClient, InMemoryCache, ApolloProvider, gql } from '@apollo/client';

const client = new ApolloClient({
  // GraphQLサーバーのURLを指定
  // herokuのデモ用のGraphQL APIサーバーを指定してます
  uri: 'https://flyby-router-demo.herokuapp.com/',
  // クエリ結果をキャッシュする時に使うキャッシュ方法
  cache: new InMemoryCache(),
});

GraphQLのQueryを実行する

次に gqlでGraphQLのクエリを作成し、client.queryでGraphQLのクエリを実行できます。

// index.js

// const client = ...

// GraphQLのクエリでlocationsを取得する
const query = gql`
  query GetLocations {
    locations {
      id
      name
      description
      photo
    }
  }
`;

// GraphQLのクエリを実行
client
  .query({ query })
  .then((result) => console.log(result));

npm startで実行すると以下のようにコンソールにresultの値が表示されます。

React で Apollo Client を使う

ここからは React で Apollo Client を使えるようにします。Apollo ClientはデフォルトでReactに対応しています。

ReactアプリケーションをApolloProviderで囲むことでReactにApollo Clientを接続することができます。

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

const client = new ApolloClient({
  uri: 'https://flyby-router-demo.herokuapp.com/',
  cache: new InMemoryCache(),
});

// NOTE:  以下のコードは不要なので削除する
// const query = gql` ...
// client ...

// Supported in React 18+
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>
);

useQueryでGraphQLサーバーからデータを取得する

次にuseQueryでデータを取得します。useQueryはReact Hooksになっており、GraphQLからデータを取得してUIに反映する時に利用します。既存のApp.jsxの内容を次のコードに置き換えます。

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

// ロケーションを取得するクエリ
const GET_LOCATIONS = gql`
  query GetLocations {
    locations {
      id
      name
      description
      photo
    }
  }
`;

// ロケーションの表示
const Locations = () => {
  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 style={{ width: '80%', margin: '0 auto' }}>
      <h2>My first Apollo app 🚀</h2>
      <br />
      <Locations />
    </div>
  );
}

では、画面を確認すると無事ロケーションが取得できていることがわかります。