ホームページ >ウェブフロントエンド >jsチュートリアル >最新の Web アプリケーションにおける GraphQL のアプリケーションと利点
最新の Web アプリケーションにおける GraphQL のアプリケーションと利点
- DDDオリジナル
- 2024-12-23 18:58:21592ブラウズ
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>{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>{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>{user.name}</h2>
<ul>
{user.posts.map(post => (
<li key={post.id}>
<h3>{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>{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 サイトの他の関連記事を参照してください。