KoyebにMongoDBAtlasとApolloServerを使用してGraphQLAPIをデプロイします

GraphQLサーバーのスキーマを作成するには、 typeDefs.jsを作成します src内のファイル フォルダを作成し、次のコードをファイルに追加します。

import { gql } from 'apollo-server';

export const typeDefs = gql`
  type Movie {
    _id: ID!
    title: String!
    rating: Float!
    year: Int!
  }

  type Query {
    getMovies: [Movie!]!,
    getMovie(id: ID!): Movie!
  }

  type Mutation {
    createMovie(title: String!, rating: Float!, year: Int!): Movie!
  }
`;

上記のコードはGraphQLスキーマタイプ定義であり、3つのGraphQLタイプを定義します。 映画 、クエリ およびMutation 。 クエリ およびMutation タイプはルートタイプですが、 Movie ミューテーションは、映画レコードのクエリ可能なフィールドを定義します。
クエリ 上記のスキーマ定義を入力すると、次のフィールドが含まれます。

• getMovies ：このフィールドは、1つ以上の Movieの配列を返します オブジェクトを入力します。
• getMovie ：このフィールドは IDを受け入れます 引数を取り、単一の Movieを返します オブジェクトを入力します。

さらに、 Mutation タイプにはcreateMovieが含まれます titleを受け入れるフィールド 、評価 およびyear 引数を取り、 Movieを返します オブジェクトを入力します。これらのフィールドは、GraphQLサーバーによって受け入れられるクエリとミューテーションを表します。

ルートタイプのクエリとミューテーションが実行されると、GraphQLは、それぞれのリゾルバー関数がスキーマの戻りタイプに対応するデータをフェッチして返すことを期待します。リゾルバー関数を追加するには、 resolvers.jsを作成します src内のファイル ディレクトリを作成し、次のコードをファイルに追加します。

const movies = [{
  _id: "12345",
  title: "Sinder Twindler",
  year: 2022,
  rating: 6.5,
}];

export const resolvers = {
  Query: {
    getMovies: (_root, _args, _context, _info) => {
      return movies;
    },
    getMovie: (_root, { id }, _context, _info) => {
      return movies.find(({ _id }) => _id === id);
    }
  },
  Mutation: {
    createMovie: (_root, args, _context, _info) => {
      const randomId = Math.random().toString().split('.')[1];
      const newMovie = { ...args, _id: randomId }
      movies.push(newMovie);
      return newMovie;
    }
  }
}

上記のコードでは、一時的なデータソースとして機能する映画の配列を初期化します。それに加えて、リゾルバーをエクスポートします Queryを持つオブジェクト およびMutation Queryに一致するプロパティ およびMutation スキーマ定義のタイプ。 2つのリゾルバープロパティには、 Queryで宣言された操作に一致する関数が含まれています およびMutation タイプ。これらのリゾルバー関数は、データソースに対して特定のアクションを実行し、要求されたデータを返します。

GraphQLリゾルバー関数は4つの引数を受け入れます：

• ルート ：この引数には、以前に実行されたリゾルバーの結果が含まれます。
• args ：この引数は、GraphQLクエリのパラメーターを保持します。
• コンテキスト ：この引数には、リゾルバー関数間でアクセス/共有できるデータ/オブジェクトが含まれています。
• 情報 ：この引数は、実行中のGraphQLクエリまたはミューテーションに関する情報を保持します。

作成されたスキーマとリゾルバーは、機能するためにサーバーに接続する必要があります。 src内 ディレクトリ、 index.jsを作成します ファイルを作成し、次のコードをファイルに追加します。

import { ApolloServer } from 'apollo-server';
import { typeDefs } from './typeDefs'
import { resolvers } from './resolvers'

const server = new ApolloServer({typeDefs, resolvers})

server.listen({ port: process.env.PORT || 4000 }).then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

上記のコードは、Apolloサーバーのインスタンスをインポートして作成します。スキーマ（ typeDefs ）およびリゾルバーもファイルにインポートされ、Apolloサーバーインスタンスに渡されます。最後に、ApolloServerのlisten メソッドは、提供されたポートでWebサーバーを起動します。ポートが提供されていない場合は、ポート4000を起動します。

サーバーを実行するには、以下のスクリプトを package.jsonに追加します ルートディレクトリにあるファイル：

{
  ...
  "scripts": {
    …
    "start:dev": "babel-node src/index.js"
  },
...
}

start：dev 上記のスクリプトは、 src / index.jsのコードを実行します babel-nodeを使用したファイル パッケージ。スクリプトを実行するには、ターミナルウィンドウで以下のコマンドを実行します。

npm run start:dev

上記のコマンドは、ポート4000で実行されるWebサーバーを起動します。コマンドを実行すると、以下の応答が返されます。

🚀  Server ready at http://localhost:4000/

Apollo Serverのランディングページを表示するには、 http：// localhost：4000 /にアクセスしてください。 ブラウザで。次のようなページが表示されます：

ランディングページで、[サーバーのクエリ]ボタンをクリックして、ブラウザー内のサンドボックスにリダイレクトします。以下のようなページが表示され、GraphQLクエリが事前に入力されています：

サンドボックスは3つのパネルで構成されています。左側のパネルには、使用可能なクエリとミューテーションを含むGraphQL APIのスキーマが表示され、中央のパネルはクエリの記述と実行用であり、右側のパネルはクエリ結果の表示用です。サンドボックス内のクエリを次のコードに置き換えます。

query ExampleQuery {
  getMovies {
    _id
    title
    year
    rating
  }
}

上記のコードは、 ExampleQueryに追加のフィールドを追加します クエリ。クエリを実行するには、[ExampleQuery]ボタンをクリックしてクエリを実行します。右側のパネルに応答が表示されます。

このセクションでは、クエリとミューテーションを使用してGraphQLサーバーを作成しました。次のセクションでは、GraphQLサーバーをMongoDBデータベースに接続します。

GraphQLサーバーをMongoデータベースに接続します

現在、GraphQLサーバーのリゾルバー関数は、最初のセクションで作成されたMongoDBデータベースではなく、ハードコードされたデータソースからデータをフェッチします。このセクションでは、GraphQLサーバーをMongoDBデータベースに接続し、MongoDB上のムービードキュメントを表すマングースモデルを作成します。

まず、 .envを作成します プロジェクトのルートディレクトリにあるファイルを作成し、次のコードを のファイルに追加します。 および MongoDBデータベースユーザーとそのパスワードを表します。

MONGODB_URI="mongodb+srv://<username>:<password>@apollogql-demo.kk9qw.mongodb.net/apollogql-db?retryWrites=true&w=majority"

上記のコードにより、MongoDBデータベース接続文字列を環境変数として使用できるようになります。 .env ファイルには秘密のデータが含まれているため、ファイルをgitにコミットしないでください。

次に、 src / index.jsのコードを置き換えます 次のファイル：

import 'dotenv/config'
import mongoose from 'mongoose';
import { ApolloServer } from 'apollo-server';

import { typeDefs } from './typeDefs';
import { resolvers } from './resolvers';

const uri = process.env.MONGODB_URI
const main = async () => {
  await mongoose.connect(uri, { useNewUrlParser: true, useUnifiedTopology: true })
};

main()
  .then(console.log('🎉 connected to database successfully'))
  .catch(error => console.error(error));

const server = new ApolloServer({ typeDefs, resolvers })

server.listen({ port: process.env.PORT || 4000 }).then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

上記のコードはdotenvをインポートします configとmongoose index.jsにパッケージ化する ファイル。 dotenvのインポート configは、 .envに環境変数を作成します process.envを介してアクセス可能なファイル 物体。 MONGODB_URIの値 環境変数には、 process.envを介してアクセスします uriに保存されます 変数、および非同期関数 main mongoose connectを使用してMongoDBデータベースへの接続を作成するように宣言されています 関数とuri 接続文字列。 main（） 次に、関数が呼び出されて、MongoDBデータベースへの接続が開かれます。

🎉 connected to database successfully
🚀  Server ready at http://localhost:4000/

最後に、モデルを作成します srcのフォルダ フォルダとその中に、 movie.jsを作成します ファイル。以下のコードをファイルに追加します。

import mongoose from "mongoose";

export const Movie = mongoose.model("Movie", {
  title: String,
  rating: Number,
  year: Number,
});

上記のコードはMovieを作成します モデルであり、MongoDBデータベースでドキュメントを作成および操作するためのインターフェイスとして機能します。これは、MongoDBデータベースをGraphQLサーバーのデータソースにするための最後のステップです。次のセクションでは、GraphQLサーバーのデータソースをハードコードされた配列からMongoDBデータベースに切り替えます。

MongoDBをGraphQLデータソースとして使用する

GraphQLサーバーの現在のデータソースはハードコードされた配列であり、このセクションでは、それをMongoDBデータベースに置き換えます。これを行うには、まず dataSourcesを作成します srcのフォルダ フォルダ。 dataSources内 フォルダに、 movies.jsを作成します ファイルを作成し、次のコードをファイルに追加します。

import { MongoDataSource } from 'apollo-datasource-mongodb'

export default class Movies extends MongoDataSource {
  async getMovies() {
    return await this.model.find();
  }

  async getMovie(id) {
    return await this.findOneById(id);
  }

  async createMovie({ title, rating, year }) {
    return await this.model.create({ title, rating, year });
  }
}

上記のコードはMoviesを宣言しています MongoDataSourceを拡張するデータソースクラス apollo-datasource-mongodbによって提供されるクラス パッケージ。 映画 データソースには、既存のクエリとミューテーションごとに3つのメソッドが含まれています。 getMovies およびcreateMovie メソッドは、前のセクションで作成したムービーモデルを使用して、データを読み取り、MongoDBデータベースに挿入し、 getMovie メソッドはfindOneByIdを使用します MongoDataSourceによって提供されるメソッド 提供されたidに一致するMongoDBコレクションからドキュメントをフェッチするクラス 引数。

次に、 src / index.jsのコードを置き換えます 以下のコードを含むファイル：

import 'dotenv/config'
import mongoose from 'mongoose';
import { ApolloServer } from 'apollo-server';

import { typeDefs } from './typeDefs';
import { resolvers } from './resolvers';
import { Movie as MovieModel } from './models/movie';
import Movies from './dataSources/movies';

const uri = process.env.MONGODB_URI
const main = async () => {
  await mongoose.connect(uri, { useNewUrlParser: true, useUnifiedTopology: true })
};

main()
  .then(console.log('🎉 connected to database successfully'))
  .catch(error => console.error(error));

const dataSources = () => ({
  movies: new Movies(MovieModel),
});

const server = new ApolloServer({ typeDefs, resolvers, dataSources })

server.listen({ port: process.env.PORT || 4000 }).then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

上記の更新されたコードは、 Movieをインポートします モデルとMovies src / index.jsへのデータソースクラス ファイル。 MongoDBデータベースに接続した後、 dataSources 関数が作成されます。この関数は、 Moviesのインスタンスを含むオブジェクトを返します Movieを受信するデータソース パラメータとしてのモデル。 dataSources 次に、関数がApollo Serverインスタンスに渡され、 Moviesが作成されます。 すべてのリゾルバー関数内で使用可能なデータソースインスタンス。

ハードコードされたデータソースをMovieに置き換えるには データソース、 src / resolvers.jsのコードを置き換えます 以下のコードを含むファイル：

export const resolvers = {
  Query: {
    getMovies: async (_, _args, { dataSources: { movies } }) => {
      return movies.getMovies();
    },
    getMovie: async (_, { id }, { dataSources: { movies } }) => {
      return movies.getMovie(id);
    }
  },
  Mutation: {
    createMovie: async (_, args, { dataSources: { movies } }) => {
      return movies.createMovie(args)
    }
  }
}

上記の更新されたコードでは、 Movies src / index.jsでApolloサーバーに渡されるデータソースインスタンス ファイルは、 dataSourcesを介してリゾルバー関数で使用できます。 共有コンテキストオブジェクトのプロパティ。各リゾルバー関数は、データソース内のそれぞれのメソッドを呼び出して、MongoDBデータベースで指定された操作を実行します。

MongoDBデータベースは現在空であるため、この時点でクエリを実行すると、空の結果が返されます。サーバーを再起動してから、ブラウザーでMongoAtlasアカウントにアクセスします。 MongoDBの[データベースのデプロイ]ページで、データベースクラスターを選択し、[コレクション]タブをクリックします。 [コレクション]タブで、[ドキュメントの挿入]ボタンをクリックし、必要な数のムービードキュメントを追加します。

Apolloサーバーサンドボックスで、 ExampleQueryを実行します 前のセクションから。 MongoDBコレクション内のすべてのムービードキュメントのリストを取得する必要があります。このセクションでは、MongoDBデータベースをGraphQLサーバーのデータソースとして使用しました。次のセクションでは、GraphQLサーバーをKoyebにオンラインでデプロイします。

Koyebにデプロイ

KoyebにGraphQLサーバーをデプロイするための最初のステップは、本番環境でコードをビルドするために必要なnpmスクリプトを追加することです。以下のスクリプトをpackage.jsonに追加します ファイル：

"scripts": {
  ...
  "prebuild": "rimraf dist && mkdir dist",
  "build": "babel src -d dist",
  "start": "node ./dist/index.js"
  }

上記で追加された3つのnpmスクリプトは次のとおりです。

• プレビルド 空のdistがあることを確認するスクリプト buildの前のディレクトリ スクリプトが実行されます。
• ビルド src内のすべてのコードをトランスパイルするスクリプト distへのJavaScriptES5構文へのディレクトリ babelの助けを借りてディレクトリ パッケージ。
• 開始 サーバーを起動するスクリプト。

git add --all
git commit -m "Complete GraphQL server with MongoDB data source."
git remote add origin [email protected]<YOUR_GITHUB_USERNAME>/<YOUR_REPOSITORY_NAME>.git
git branch -M main
git push -u origin main