GraphQL-yogaとMongoDBを使用してNode.jsでGraphQLサーバーを構築する方法

投稿日: 2022-04-20 2022-04-20
タグ: javascript, MongoDB, Node.js

今日のほとんどのアプリケーションでは、データがデータベースに保存されているサーバーからデータをフェッチする必要があります。 GraphQLは、RESTのより効率的で強力かつ柔軟な代替手段を提供する新しいAPI標準です。これにより、クライアントはサーバーから必要なデータのみをフェッチできます。 GraphQLはデータベース技術と混同されることがよくありますが、彼は誤解です。GraphQLはデータベースではなくAPIのクエリ言語です。その意味で、データベースにとらわれず、APIが使用されるあらゆるコンテキストで効果的に使用できます。

graphql-yogaは、使いやすさ、パフォーマンス、優れた開発者エクスペリエンスに重点を置いた、フル機能のGraphQLサーバーです。さらに、ApolloのようなすべてのGraphQLクライアントをサポートします。

GraphQLとは何かを理解したので、RESTの代わりにNodejsアプリケーションでGraphQLを使用する方法を学ぶことができます。

新しいプロジェクトの作成

UsersAPIという名前の新しいフォルダーを作成し、ターミナルを開いてフォルダーに移動し、次のコマンドを実行します。

npm init

プロジェクトフォルダ内にindex.jsという名前のファイルを作成します。

touch index.js

これで、アプリケーションのセットアップが処理されます。

必要な依存関係のインストール

GraphQLサーバーのセットアップを支援するためにgraphql-yogaをインストールしてから、Mongoデータベースへの接続を支援するためにmongooseをインストールする必要があります。

ターミナル内で以下を実行します。

npm install graphql-yoga mongoose

ユーザーモデルの定義

モデルは、基盤となるMongoDBデータベースからドキュメントを作成して読み取る役割を果たします。ここでは、GraphQLアプリケーションのユーザーモデルを作成します。

index.js内に、次のコード行を入力します。

const { GraphQLServer } = require('graphql-yoga')
const mongoose = require('mongoose');
mongoose.connect("mongodb://localhost:27017/UserApp");


const User= mongoose.model("User",{
    fullname: String,
    username: String,
    phone_number: String,
    city: String
});

ユーザーモデルを正常に定義し、マングース接続を確立しました。GraphQLスキーマに入る時が来ました。

GraphQLスキーマの定義

GraphQLスキーマは、それに接続するクライアントが利用できる機能を記述します。スキーマ定義言語を使用して構築されています。

次のコード行をindex.jsファイルに追加します。

const typeDefs = `type Query {
    getUser(id: ID!): User
    getUsers: [User]
  }
  type User {
      id: ID!
      fullname: String!
      username: String!
      phone_number: String!
      city: String!
  }
  type Mutation {
      addUser(fullname: String!, username: String!, phone_number: String!, city: String!): User!,
      deleteUser(id: ID!): String
  }`

スキーマ内には3つのタイプがありますが、それらを分解してみましょう。

クエリタイプの使用

GraphQLクエリはデータをフェッチするためのものであり、RESTベースのAPIのGET動詞と比較されます。サーバーで可能なクエリを定義するために、スキーマ定義言語内でクエリタイプが使用されます。クエリタイプは、クライアントの機能を定義するルートレベルのタイプであり、スキーマ内の他のより具体的なタイプへのエントリポイントとして機能します。

type Query {
    getUser(id: ID): User
    getUsers: [User]
}

このクエリタイプでは、このGraphQLサーバーで使用できる2つのタイプのクエリを定義します。getUser：指定されたIDに一致する特定のユーザーオブジェクトを返します。 getUsers：ユーザーオブジェクトのリストを返します。

RESTベースのAPIに精通している場合、通常、これらは別々のエンドポイントにありますが、GraphQLを使用すると、同時にクエリを実行して一度に返すことができます。

注：角かっこは、JSON応答で反復可能なオブジェクトまたは配列が必要であることを示します。 getUserの場合は単一のUserオブジェクト、getUsersの場合は配列のみを返します。

ユーザータイプの使用

ユーザーはGraphQLオブジェクト型です。つまり、いくつかのフィールドを持つ型です。オブジェクトタイプは、スキーマで使用される最も一般的なタイプであり、フィールドのグループを表します。

type User {
    id: ID!
    fullname: String!
    username: String!
    phone_number: String!
    city: String!
}

id、fullname、username、phone_number、およびcityは、ユーザータイプのフィールドです。

String は、組み込みのスカラー型の1つです。フィールドのデータ型を指定します。
String は、フィールドがnull許容でないことを意味します。スキーマ定義言語では、感嘆符でそれらを表します。
ID は一意の識別子であり、キャッシュのキーとしてよく使用されます。

ミューテーションタイプの使用

ミューテーションはサーバーに送信され、RESTful APIのPUT、POST、PATCH、およびDELETE動詞と同様のデータを作成、更新、または削除します。クエリタイプがGraphQLサーバーでのデータフェッチ操作のエントリポイントを定義する方法と同様に、ルートレベルのミューテーションタイプはデータ操作操作のエントリポイントを指定します。

type Mutation {
    addUser(fullname: String!, username: String!, phone_number: String!, city: String!): User!,
    deleteUser(id: ID!): String
}

これにより、2つのミューテーションが実装されます。

addUser：「入力タイプ」と呼ばれる引数としてフルネーム、ユーザー名、電話番号、都市を受け入れ、ミューテーションは新しく作成されたUserオブジェクトを返します。
deleteUser：有効なユーザーIDを受け入れ、削除操作が成功したかどうかを通知する文字列メッセージを返します。

定義したスキーマのリゾルバーの作成に移りましょう。

リゾルバの追加

リゾルバーは、GraphQLAPIのデータにビジネスロジックを実装するための実際の関数です。各クエリとミューテーションには、ロジックを実行するための対応するリゾルバー関数があります。

次のコード行をindex.jsファイルに追加します。

const resolvers = {
    Query: {
      getUsers: ()=> User.find(),
      getUser: async (_,{id}) => {
        var result = await User.findById(id);
        return result;
    }
},
    Mutation: {
        addUser: async (_, { fullname, username, phone_number, city }) => {
            const user = new User({fullname, username, phone_number, city});
            await user.save();
            return user;
        },
        deleteUser: async (_, {id}) => {
            await User.findByIdAndRemove(id);
            return "User deleted";
        }
    }
  }

GraphQLサーバーのセットアップ

スキーマとリゾルバーを構築したら、リクエストを処理するようにサーバーを設定します。 graphql-yogaGraphQLサーバーを稼働させる最も簡単な方法であり、ユーザーフレンドリーな構成、パフォーマンス、優れた開発者エクスペリエンスに重点を置いたフル機能のGraphQLサーバーです。

index.js内に、次のコード行を追加してサーバーをセットアップします。

const server = new GraphQLServer({ typeDefs, resolvers })
mongoose.connection.once("open", function(){
    server.start(() => console.log('Server is running on localhost:4000'))
});

これで、機能的なGraphQLサーバーを最初から構築したので、いくつかのリクエストを行うときが来ました。ターミナルを開き、次のコマンドを実行してサーバーを起動します。

node index.js

Webブラウザーを開き、 http：// localhost：4000 / に移動します。ブラウザーに、サンプルクエリを実行できる素敵なGraphQLプレイグラウンドが表示されます。

新しいユーザーの追加

遊び場内で次のクエリを実行して、新しいユーザーを追加します。

mutation{
  addUser(fullname:"Ibe Ogele",username:"ibesoft",phone_number:"2348102331921",city:"Enugu"){
    id
    fullname
    username
    phone_number
    city
  }
}

ユーザー情報の取得

以下のクエリを実行して、特定のユーザーの情報を取得します。

query{
  getUser(id:"user_id"){
    id
    fullname
    username
    phone_number
    city
  }
}

すべてのユーザーを実行するには：

query{
  getUsers{
    id
    fullname
    username
    phone_number
    city
  }
}

ユーザーの削除

以下のクエリを実行して、特定のユーザーを削除できます。

mutation{
  deleteUser(id: "user_id")
}

結論

GraphQLを使用すると、APIにクエリを送信して、必要なものを正確に取得できます。それ以上でもそれ以下でもありません。 GraphQLクエリは、常に予測可能な結果を返します。

getdocs

13036