Zenn
📖

【GraphQL】チーム開発でGraphQLを導入することになったので、ChatGPTに答えてもらった

2023/03/07に公開・約3,500字
GraphQL
React
フロントエンド
REST API
#
バックエンド
tech

GraphQLの特徴（REST APIとの比較）

GraphQLは、Facebookが2012年に開発したAPIクエリ言語であり、クライアントが必要なデータを正確に取得できるようにするために使用されます。GraphQLはREST APIとは異なり、必要なデータを1つのリクエストで取得することができます。GraphQLは、データの構造と取得方法を定義するためのシンタックスを提供し、サーバー側で実行されるクエリを扱うためのリゾルバ関数を定義することによって機能します。

GraphQLの主な特徴は以下の通りです。

  1. 強力なタイプシステム：GraphQLは、リクエストやレスポンスの形式に関する厳密なタイプシステムを備えています。これにより、クライアントとサーバーの双方が正確に理解できるようになります。

  2. クライアントが必要なデータを指定：GraphQLクエリは、クライアントが必要なデータのみを指定できるようになっています。このため、不要なデータを取得する必要がなく、パフォーマンスが向上します。

  3. 複数のデータソースからのデータの取得：GraphQLは、複数のデータソースからのデータを取得するための柔軟性があります。これにより、複数のAPIエンドポイントからデータを取得する必要がある場合でも、簡単に実現できます。

  4. イベント駆動型アーキテクチャ：GraphQLは、イベント駆動型のアーキテクチャを採用しています。これにより、データが更新されたときに、サーバーから自動的に通知を受けることができます。

GraphQLは、Web開発において、REST APIに代わる新しい方法として注目されています。また、多くの言語やフレームワークでサポートされており、人気が高まっています。

axiosでの使い方

以下は、axiosを使用してGraphQLサーバーにGETリクエストを送信する基本的な方法です。

import axios from 'axios';

const query = `
  query {
    // GraphQLのクエリをここに入力
  }
`;

axios.get('http://example.com/graphql', {
  params: {
    query: query
  }
})
.then(response => {
  // 成功した場合の処理
  console.log(response.data);
})
.catch(error => {
  // エラーが発生した場合の処理
  console.log(error);
});

上記の例では、GraphQLクエリを変数queryに格納し、axiosのgetメソッドを使用してGraphQLサーバーにリクエストを送信しています。GraphQLサーバーのエンドポイントはhttp://example.com/graphqlと仮定しています。

paramsオプションを使用して、GraphQLクエリをURLパラメーターとしてリクエストに含めています。成功した場合は、レスポンスのデータがresponse.dataプロパティに格納され、コンソールにログ出力されます。エラーが発生した場合は、catchブロックでエラーを処理します。

page,limitを考慮したページネーションの実装

GraphQLには、ページネーションを行うための組み込みの機能があります。このため、リクエストのクエリにlimitやpageパラメータを含める必要はありません。代わりに、GraphQLクエリ自体にページネーションのロジックを記述することができます。

以下は、例としてGraphQLクエリのfirstとafterを使用して、ページネーションを行う方法を示しています。この例では、query変数にGraphQLクエリを定義し、axiosのgetメソッドを使用してGraphQLサーバーにリクエストを送信しています。

import axios from 'axios';

const query = `
  query ($first: Int!, $after: String) {
    products(first: $first, after: $after) {
      edges {
        node {
          id
          name
          price
        }
      }
      pageInfo {
        hasNextPage
        endCursor
      }
    }
  }
`;

const variables = {
  first: 10,
  after: null
};

axios.get('http://example.com/graphql', {
  params: {
    query: query,
    variables: variables
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.log(error);
});

上記の例では、productsフィールドから最大first件の商品データを取得するためのクエリを定義しています。afterパラメータを使用して、前のページの最後の商品のカーソルを指定して、次のページを取得します。

variablesオブジェクトに、firstとafterの値を定義して、paramsオプションでGraphQLクエリに渡します。thenブロックで、GraphQLサーバーからのレスポンスをログ出力しています。catchブロックは、エラー処理用です。

バックエンド処理

GraphQLのPythonによるバックエンドのコードを作成するには、まずGraphQLを実装するために必要なライブラリをインストールする必要があります。ここでは、graphql-core-nextとgraphql-server-coreの2つのライブラリを使用します。

# 必要なライブラリをインストール
pip install graphql-core-next graphql-server-core

次に、以下のようなスキーマを定義します。この例では、単純なToDoアプリケーションを想定しています。

from graphene import ObjectType, String, Schema, List

class Todo(ObjectType):
    id = String()
    title = String()
    description = String()

class Query(ObjectType):
    todos = List(Todo)

    def resolve_todos(root, info):
        # ToDoリストを返す処理を実装する
        pass

schema = Schema(query=Query)

上記の例では、Todoというオブジェクトタイプと、Queryというオブジェクトタイプを定義しています。TodoはToDoアイテムのスキーマを定義し、QueryはToDoリストを取得するためのリゾルバ関数を定義しています。

次に、GraphQL APIを起動するためのサーバーを作成します。以下は、graphql-server-coreを使用した例です。

from graphql_server import GraphQLServer

server = GraphQLServer(schema=schema)
server.start()

これで、GraphQLのPythonによるバックエンドのコードを作成することができました。ただし、リゾルバ関数の実装など、さらに多くのコードを追加する必要があるかもしれません。また、データベースとのやりとりや認証、認可などの機能を追加する必要もあるかもしれません。

Discussion

ログインするとコメントできます