Zenn
📍

Apollo 要約

2022/02/18に公開
GraphQL
API
tech

GraphQLのおさらい

Web API向けに作成されたクエリ言語およびサーバーサイドランタイムの両方を指します。
クライアントがリクエストしたデータだけを提供するように設計されており、速度の向上やメモリ消費量の減少が見込めます。
また、既存のクエリに影響を与えずに、フィールドの追加・廃止を柔軟に行えるため、保守性の向上が見込めます。
短所としては、キャッシュの取り扱いが複雑になります。

RESTful APIとの比較

比較対象として取り上げられるRESTful APIと比較するとイメージを掴みやすいかもしれません。

  • データの取得
    • RESTful APIの場合
      リクエストを行ったページでは使用しない情報も多く返し、不要なデータが多くなるため、処理を複雑にし、メモリ消費量も増やします。
    • GraphQLの場合:
      取得するデータを指定してリクエストを送れるため、必要なデータのみを取得できます。
  • 複数の種類のデータを取得する場合
    • RESTful APIの場合:
      複数個のエンドポイントに対して、個別にリクエストを送ることになります。
    • GraphQLの場合:
      まとめられた1つのエンドポイントに対して、1回のリクエストで済みます。

GraphQLの用語

スキーマ

クライアントがクエリできるデータの型。
クライアントからの呼び出しは、スキーマを通じて検証され、実行されます。

type User {
	id: ID!
	firstName: String
	lastName: String
}

リゾルバー

スキーマに含まれる特定のフィールドのデータを返す関数。
実際のデータ操作を行います。

type Query {
    getUsers: [User]
}

クエリ

CRUDにおけるReadに相当します。
Read以外はクエリには該当せず、ミューテーションにより処理されます。

query getUsers {
    firstName
    lastName
}

ミューテーション

CRUDにおけるCreate・Update・Delete相当。

引数

SQLで言うところのWhere句に相当。
ミューテーションは引数に入力オブジェクトを要求します。

Apolloとは

バックエンド側のあらゆるデータとのやりとりを可能にするデータレイヤーを作成し、そこからのデータの取得処理や管理などを行います。


※ https://www.apollographql.com/docs/intro/platform/

あらゆるデータがApolloのGraphQLサーバーに集約され、アプリケーションクライアントはGraphQLサーバーに対してのみやりとりを行うことになる。

構成要素

Apollo Server

クライアントからのGraphQL操作を処理するJSのGraphQLサーバー。
バックエンド側のデータソースとやりとりを行い、取得と変更を行います。
スキーマとリゾルバーはここで定義します。

Apollo Client

Apollo Serverに対して、クエリやミューテーションを実行するJSのGraphQLクライアント。
状態管理の機能により、クエリ結果を取得できた際、クエリ結果が変更された際、クエリを使用しているUIコンポーネントが自動的に更新されます。
また、キャッシュ機能により、データレイヤーのデータをローカルにキャッシュし、クライアントはキャッシュされたデータがすでに存在すれば、それ自体にクエリを実行するので、不要なリクエストを防ぎ、パフォーマンス向上が見込めます。

Node.jsで使う際のイメージ

1. GraphQLクエリの取得

Apollo ExplorerなどのGraphQLのIDEを使用できます。
IDEを使用すれば、UI操作で、クエリのビルド・実行・保存が可能です。

2. Apollo Clientの作成

まずは必要なパッケージをインストールします。

npm install --save @apollo/client graphql

下記のようにシンプルにクライアントを作成可能です。

apollo-client.js
import { ApolloClient, InMemoryCache } from "@apollo/client";

const client = new ApolloClient({
    uri: "https://countries.trevorblades.com",
    cache: new InMemoryCache(),
});

export default client;

3. クエリの実行

あとは、2で作成したクライアント経由で、1で取得したクエリを実行します。

page.js
import { gql } from "@apollo/client";
import client from "../apollo-client";

const { data } = await client.query({
    query: gql`
        query Countries {
            countries {
                code
                name
                emoji
            }
        }
    `,
});

Discussion