Apollo＆Reactを使用してGraphQLを探索：スーパーヒーローデータベースを作成します

graphqlの世界に飛び込み、なぜそれがそんなに興奮しているのかを発見してください！このチュートリアルは、GraphQLの明確な説明を提供し、実践的なエクスペリエンスを提供します。

最初に、中核的な質問に対処しましょう：

グラフQlとは何ですか？ あいまいな電卓関数ではありません。代わりに、多様なソースからデータを取得するための強力なクエリ言語（またはより正確には、クエリ仕様）です。 その重要な利点は？ 単一のネットワークリクエストで必要なデータを取得し、従来のREST APIの非効率性を排除します。 このチュートリアルは、Apolloサーバーをエンドポイントとして使用し、ApolloクライアントとのReactアプリを使用してデータにアクセスします。 サーバーから始めます。 重要な概念：

GraphQLは、効率と柔軟性のREST APIを上回るデータソースからの単一のリクエストで正確なデータ検索を提供するクエリ言語です。

Apolloサーバー（エンドポイント）とApolloクライアントを使用したReactアプリは、GraphQLデータの使用に不可欠です。 チュートリアルでは、スーパーヒーローデータベースの例を使用して、スキーマの作成、データの追加、リゾルバー定義、統合を示しています。 フロントエンドとバックエンドの開発が、スキーマがインターフェイスとして機能する方法を大部分独立して進める方法を示しています。

• apolloサーバーのセットアップ：
• ディレクトリを作成します
• それに移動して、必要なパッケージをインストールします：

作成

を作成して追加：

1. apollo-server
これは、ApolloサーバーとGraphQLクエリの解析に重要なコンポーネントをインポートします。
2. GraphQLスキーマの作成：

npm install apollo-server apollo-server-express graphql

次に、
3. ：index.jsのスキーマを定義します

これは、

const { ApolloServer, gql } = require('apollo-server');

>

タイプと2つのクエリを定義します：

（すべてのユーザーを返します）と

（IDでユーザーを返します）。 サンプルデータの追加：

index.jsモックデータを

：

const typeDefs = gql`
  type User {
    id: ID!
    name: String
    superpowers: [Superpower]!
  }

  type Superpower {
    id: ID!
    text: String
  }

  type Query {
    users: [User]
    user(id: ID!): User
  }
`;

に追加します

Userこれにより、クエリ用のサンプルデータが提供されます。 GraphQLはJavaScriptアレイに限定されないことを忘れないでください。任意のデータソースに接続できます。Superpower usersuserリゾルバーの定義：

リゾルバーはクエリを解釈します。これらを：

に追加します

index.js

Resolverはすべてのユーザーを返しますが、

const users = [
  { id: '1', name: 'Peter Parker', superpowers: [{ id: '1', text: 'Web slinging' }, { id: '2', text: 'Spidey sense' }] },
  { id: '2', name: 'Tony Stark', superpowers: [{ id: '3', text: 'Industrial design' }, { id: '4', text: 'Robotic fashion' }] }
];

はIDでユーザーを見つけます。 サーバーの起動：

サーバーをインスタンス化して起動することにより、

完了：

実行index.js

const resolvers = {
  Query: {
    users: () => users,
    user: (root, { id }) => users.find(user => user.id === id),
  },
};

インタラクティブクエリ：

users user遊び場でこれらのクエリを試してみてください：

• ピーターパーカーの名前をフェッチ：

npm install apollo-server apollo-server-express graphql

• ピーターパーカーの名前とスーパーパワーをフェッチ：

const { ApolloServer, gql } = require('apollo-server');

• すべてのユーザーとその超大国を取得します：

const typeDefs = gql`
  type User {
    id: ID!
    name: String
    superpowers: [Superpower]!
  }

  type Superpower {
    id: ID!
    text: String
  }

  type Query {
    users: [User]
    user(id: ID!): User
  }
`;

Reactとの統合：

1. Reactアプリを作成します：

const users = [
  { id: '1', name: 'Peter Parker', superpowers: [{ id: '1', text: 'Web slinging' }, { id: '2', text: 'Spidey sense' }] },
  { id: '2', name: 'Tony Stark', superpowers: [{ id: '3', text: 'Industrial design' }, { id: '4', text: 'Robotic fashion' }] }
];

2. 変更src/index.js：

const resolvers = {
  Query: {
    users: () => users,
    user: (root, { id }) => users.find(user => user.id === id),
  },
};

3. src/App.js：
を置き換えます

const server = new ApolloServer({ typeDefs, resolvers });
server.listen().then(({ url }) => console.log(`Apollo server started at ${url}`));

npm startディレクトリでmy-graphql。 このチュートリアルは、GraphQLを使用するための基盤を提供します。 （データの変更のため）、およびその他の高度な機能を調べて、スキルをさらに向上させます。 ハッピーコーディング！http://localhost:3000/

graphql faqs：

graphqlとは？
• ​​APIのクエリ言語と、データに対してそれらのクエリを実行するためのランタイムは何ですか。 それは、より効率的で柔軟な代替品です
  graphql vs. reat：
RESTは複数のエンドポイントを使用しますが、GraphQLはクライアントが単一のクエリで必要なデータのみを要求し、過度のフェッチと過小評価を防ぐことができます。

• キーグラフQL機能：

  階層クエリ構造、強力なタイピング、サブスクリプションを備えたリアルタイムデータ、内省（スキーマ自体のクエリ）。

• GraphQLスキーマ：データ型と関係を定義し、クライアントとサーバーの間の契約として機能します。

• クエリ構造：階層的、応答データ構造を反映しています。 クライアントは特定のフィールドを要求し、複雑なデータ検索のためにそれらをネストします。

• リゾルバー：特定のスキーマフィールドのデータを取得または変異させる方法を定義する関数。 クエリをデータソースに接続します

以上がApollo＆Reactを使用してGraphQLを探索：スーパーヒーローデータベースを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。