最新の Web アプリケーションにおける GraphQL のアプリケーションと利点

GraphQL は、データを取得するための効率的、柔軟かつ強力な方法を提供するため、最新の Web アプリケーションで広く使用されている最新の API クエリ言語です

GraphQL の基本的な簡単なアプリケーションの例:

1. バックエンドの設定（graphql-yogaを使用）

まず、GraphQL サーバーを作成する必要があります。 graphql-yoga をインストールし、単純な GraphQL スキーマを作成します:

npm init -y
npm install graphql yoga graphql-yoga

# server.js
const { GraphQLServer } = require('graphql-yoga');

const typeDefs = `
  type Query {
    hello: String
  }

  type Mutation {
    addMessage(message: String!): String
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
  Mutation: {
    addMessage: (_, { message }) => `You added the message "${message}"`,
  },
};

const server = new GraphQLServer({ typeDefs, resolvers });
server.start(() => console.log(`Server is running on http://localhost:4000`));

2. フロントエンドのセットアップ (Apollo クライアントを使用)

次に、GraphQL サーバーと通信できるようにフロントエンド アプリケーションで Apollo クライアントを設定する必要があります。

npm install apollo-boost @apollo/client graphql

# client.js
import ApolloClient from 'apollo-boost';
import { InMemoryCache } from '@apollo/client';

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

export default client;

3. フロントエンドコンポーネントを作成する

ここで、React コンポーネントで Apollo クライアントを使用してクエリとミューテーションを実行します。

// App.js
import React from 'react';
import { gql, useQuery, useMutation } from '@apollo/client';
import client from './client';

const GET_HELLO = gql`
  query GetHello {
    hello
  }
`;

const ADD_MESSAGE_MUTATION = gql`
  mutation AddMessage($message: String!) {
    addMessage(message: $message)
  }
`;

function App() {
  const { loading, error, data } = useQuery(GET_HELLO);
  const [addMessage, { data: mutationData }] = useMutation(ADD_MESSAGE_MUTATION);

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

  return (
    <div>
      <h1 id="data-hello">{data.hello}</h1>
      <button onclick="{()"> addMessage({ variables: { message: 'Hello from frontend!' } })}>
        Add Message
      </button>
      {mutationData && <p>New message: {mutationData.addMessage}</p>}
    </div>
  );
}
export default App;

サーバーの挨拶を取得してページに表示するための GET_HELLO クエリを作成します。同時に、ユーザーがボタンをクリックしたときに新しいメッセージをサーバーに送信する ADD_MESSAGE_MUTATION ミューテーション操作を定義します。

4. アプリケーションを実行する

バックエンドサーバーを起動します:

node server.js

次に、Create React App を想定して、フロントエンド アプリケーションを起動します。

npm start

GraphQL 基本クエリ

1. クエリ言語: クエリ、ミューテーション、サブスクリプション

GraphQL では、クエリとミューテーションは JSON のような構造で表される文字列です。簡単な例を次に示します:

# Query Example
query GetUser {
  user(id: 1) {
    name
    email
  }
}

# Mutation Example
mutation CreateUser {
  createUser(name: "Alice", email: "alice@example.com") {
    id
    name
  }
}

# Subscription Example (Assuming WebSocket)
subscription OnNewUser {
  newUser {
    id
    name
  }
}

上記のコードでは、GetUser クエリはユーザー ID 1 のユーザーの名前と電子メールを要求します。CreateUser ミューテーションは新しいユーザーを作成し、新しいユーザーの ID と名前を返します。 OnNewUser サブスクリプションは、新しいユーザーが作成されるのを待機し、新しいユーザーの情報を返します。

2. 型システム

バックエンドでは、これらの型を記述するための GraphQL スキーマを定義します。

type User {
  id: ID!
  name: String!
  email: String!
}

type Mutation {
  createUser(name: String!, email: String!): User
}

type Subscription {
  newUser: User
}

ここでは、User オブジェクト タイプ、ミューテーション操作の Mutation タイプ、およびサブスクリプション操作の Subscription タイプを定義します。

3. クエリ構造: フィールドとパラメータ

クエリ構造はフィールドとパラメータで構成されます。上記のクエリの例では、user がフィールドで、id と email が user フィールドのサブフィールドです。 id: 1 などのパラメータは、クエリをカスタマイズするために使用されます。

4. 階層とネスト

GraphQL クエリはネストできます。より複雑な例を次に示します:

query GetUsersAndPosts {
  users {
    id
    name
    posts {
      id
      title
      content
      author {
        id
        name
      }
    }
  }
}

このクエリは、すべてのユーザーとその投稿を要求します。これには、作成者に関する情報も含まれます。階層を使用すると、1 つのリクエストで複数レベルのデータを取得できます。

クライアント コード例 (Apollo クライアントを使用)

npm init -y
npm install graphql yoga graphql-yoga

# server.js
const { GraphQLServer } = require('graphql-yoga');

const typeDefs = `
  type Query {
    hello: String
  }

  type Mutation {
    addMessage(message: String!): String
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
  Mutation: {
    addMessage: (_, { message }) => `You added the message "${message}"`,
  },
};

const server = new GraphQLServer({ typeDefs, resolvers });
server.start(() => console.log(`Server is running on http://localhost:4000`));

この React コンポーネントでは、useQuery を使用して GraphQL サーバーからデータを取得し、ユーザーとその投稿に関する情報をレンダリングします。これが、GraphQL クエリ、型システム、階層がどのように機能するかです。

GraphQL スキーマ

GraphQL スキーマ定義言語 (SDL) は、GraphQL スキーマを記述するための言語です。データ型、クエリ、変更、ディレクティブを簡潔で人間が読める形式で定義します。

タイプを定義します
まず、いくつかの基本的なデータ型を定義しましょう。たとえば、ユーザー タイプと投稿タイプを定義します。

npm install apollo-boost @apollo/client graphql

# client.js
import ApolloClient from 'apollo-boost';
import { InMemoryCache } from '@apollo/client';

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

export default client;

ここで、ユーザー タイプには ID、ユーザー名、電子メール フィールド、および複数の投稿にリンクする投稿フィールドがあります。投稿タイプには、ID、タイトル、コンテンツ フィールド、およびユーザーを指す作成者フィールドが含まれます。

クエリルートとミューテーションルート
次に、GraphQL クエリ ルート (Query) とミューテーション ルート (Mutation) タイプを定義します。これらは、クライアントがデータをリクエストし、データを変更するためのエントリ ポイントです。

// App.js
import React from 'react';
import { gql, useQuery, useMutation } from '@apollo/client';
import client from './client';

const GET_HELLO = gql`
  query GetHello {
    hello
  }
`;

const ADD_MESSAGE_MUTATION = gql`
  mutation AddMessage($message: String!) {
    addMessage(message: $message)
  }
`;

function App() {
  const { loading, error, data } = useQuery(GET_HELLO);
  const [addMessage, { data: mutationData }] = useMutation(ADD_MESSAGE_MUTATION);

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

  return (
    <div>
      <h1 id="data-hello">{data.hello}</h1>
      <button onclick="{()"> addMessage({ variables: { message: 'Hello from frontend!' } })}>
        Add Message
      </button>
      {mutationData && <p>New message: {mutationData.addMessage}</p>}
    </div>
  );
}
export default App;

クエリ タイプでは、単一のユーザー、すべてのユーザー、単一の投稿、およびすべての投稿を取得するためのクエリを定義します。 Mutation タイプでは、新しいユーザーと新しい投稿を作成するための操作を定義します。

ディレクティブの理解と使用
ディレクティブは、実行動作を変更する GraphQL スキーマ内の命令です。これらは、フィールド、入力型、オブジェクト型など、型システム定義の任意の部分に適用できます。次に、カスタム @auth ディレクティブを使用してアクセス権を制御する方法を示します。

まず、特定のフィールドへのアクセスを制限し、ユーザーにログインを要求する @auth ディレクティブを定義するとします。

node server.js

次に、このディレクティブをスキーマに適用します。

npm start

上記の例では、me クエリとユーザー名フィールドには特別な権限がなくてもアクセスできますが、ユーザーの電子メール フィールドにアクセスするには管理者権限が必要です (@auth(requires: ADMIN) ディレクティブで指定されます)。

GraphQL の高度なアプリケーション

1. ページネーション

GraphQL カーソルベースのページネーションを使用して、パフォーマンスとユーザー エクスペリエンスを向上させます。

スキーマ定義:

# Query Example
query GetUser {
  user(id: 1) {
    name
    email
  }
}

# Mutation Example
mutation CreateUser {
  createUser(name: "Alice", email: "alice@example.com") {
    id
    name
  }
}

# Subscription Example (Assuming WebSocket)
subscription OnNewUser {
  newUser {
    id
    name
  }
}

リゾルバーの例:

type User {
  id: ID!
  name: String!
  email: String!
}

type Mutation {
  createUser(name: String!, email: String!): User
}

type Subscription {
  newUser: User
}

2. エラー処理

エラー処理をカスタマイズして、クライアントのエラー処理能力を向上させます。

リゾルバーの例:

query GetUsersAndPosts {
  users {
    id
    name
    posts {
      id
      title
      content
      author {
        id
        name
      }
    }
  }
}

3. カスタムディレクティブ

カスタム ディレクティブを作成して、特定のビジネス ロジックまたはセキュリティ要件を実装します。

スキーマ定義:

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

const GET_USERS_AND_POSTS = gql`
  query GetUsersAndPosts {
    users {
      id
      name
      posts {
        id
        title
        content
        author {
          id
          name
        }
      }
    }
  }
`;

function App() {
  const { loading, error, data } = useQuery(GET_USERS_AND_POSTS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :-(</p>;

  return (
    <div>
      {data.users.map(user => (
        <div key="{user.id}">
          <h2 id="user-name">{user.name}</h2>
          <ul>
            {user.posts.map(post => (
              <li key="{post.id}">
                <h3 id="post-title">{post.title}</h3>
                <p>{post.content}</p>
                <p>Author: {post.author.name}</p>
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

export default App;

リゾルバーの例:

type User {
  id: ID!
  username: String!
  email: String!
  posts: [Post!]!
}

type Post {
  id: ID!
  title: String!
  content: String!
  author: User!
}

このディレクティブ ハンドラーを GraphQL サーバー構成に必ず登録してください。

4.GraphQLフェデレーション

フェデレーションにより、複数のサービスで構成される単一の GraphQL API を構築できます。

サービス A スキーマ:

npm init -y
npm install graphql yoga graphql-yoga

# server.js
const { GraphQLServer } = require('graphql-yoga');

const typeDefs = `
  type Query {
    hello: String
  }

  type Mutation {
    addMessage(message: String!): String
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
  Mutation: {
    addMessage: (_, { message }) => `You added the message "${message}"`,
  },
};

const server = new GraphQLServer({ typeDefs, resolvers });
server.start(() => console.log(`Server is running on http://localhost:4000`));

サービス B スキーマ:

npm install apollo-boost @apollo/client graphql

# client.js
import ApolloClient from 'apollo-boost';
import { InMemoryCache } from '@apollo/client';

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

export default client;

5. 複雑なクエリの最適化

GraphQL のフィールド リゾルバーとデータ ローダーを使用してパフォーマンスを最適化します。

データローダーの例:

// App.js
import React from 'react';
import { gql, useQuery, useMutation } from '@apollo/client';
import client from './client';

const GET_HELLO = gql`
  query GetHello {
    hello
  }
`;

const ADD_MESSAGE_MUTATION = gql`
  mutation AddMessage($message: String!) {
    addMessage(message: $message)
  }
`;

function App() {
  const { loading, error, data } = useQuery(GET_HELLO);
  const [addMessage, { data: mutationData }] = useMutation(ADD_MESSAGE_MUTATION);

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

  return (
    <div>
      <h1 id="data-hello">{data.hello}</h1>
      <button onclick="{()"> addMessage({ variables: { message: 'Hello from frontend!' } })}>
        Add Message
      </button>
      {mutationData && <p>New message: {mutationData.addMessage}</p>}
    </div>
  );
}
export default App;

GraphQL の機能と利点

• パフォーマンスの最適化: オンデマンドでデータを取得することにより、ネットワーク送信のオーバーヘッドが削減され、ページの読み込み速度が向上します。
• エラーの削減: クライアントがクエリ構造を定義し、サーバーが期待された形状を返すことで、インターフェイスの不一致によって引き起こされるエラーが削減されます。
• より優れた API 設計: 強力な型システムによりデータの一貫性と正確性が保証され、API の理解と保守が容易になります。
• クライアント制御: クライアントは取得するデータの量と取得時期を決定できるため、ユーザー エクスペリエンスが向上します。
• キャッシュの最適化: クライアントは、返されたデータ構造に基づいてキャッシュ戦略をより簡単に実装できます。
• バックエンドの複雑さの軽減: バックエンドは、さまざまなクライアントのニーズを満たすために複数の API エンドポイントを作成する必要がなくなりました。

以上が最新の Web アプリケーションにおける GraphQL のアプリケーションと利点の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。