GraphQL-環境のセットアップ

この章では、GraphQLの環境設定について学習します。このチュートリアルの例を実行するには、次のものが必要です。

  • Linux、macOS、またはWindowsを実行しているコンピューター。

  • ウェブブラウザ、できれば最新バージョンのGoogleChrome。

  • 最近のバージョンのNode.jsがインストールされています。最新のLTSバージョンをお勧めします。

  • VSCode用の拡張機能GraphQLがインストールされたVisualStudioCodeまたは任意のコードエディター。

Nodejsを使用してGraphQLサーバーを構築する方法

以下に示すように、Nodejsを使用してGraphQLサーバーを構築するための詳細な段階的アプローチを実行します-

ステップ1-ノードとNpmのバージョンを確認する

NodeJをインストールした後、ターミナルで次のコマンドを使用して、nodeとnpmのバージョンを確認します-

C:\Users\Admin>node -v
v8.11.3

C:\Users\Admin>npm -v
5.6.0

ステップ2-プロジェクトフォルダを作成し、VSCodeで開きます

プロジェクトのルートフォルダーには、test-appという名前を付けることができます。

以下の手順を使用して、VisualStudioコードエディターを使用してフォルダーを開きます-

C:\Users\Admin>mkdir test-app
C:\Users\Admin>cd test-app
C:\Users\Admin\test-app>code.

ステップ3-package.jsonを作成し、依存関係をインストールします

GraphQLサーバーアプリケーションのすべての依存関係を含むpackage.jsonファイルを作成します。

{
   "name": "hello-world-server",
   "private": true,
   "scripts": {
      "start": "nodemon --ignore data/ server.js"
   },
   
   "dependencies": {
      "apollo-server-express": "^1.4.0",
      "body-parser": "^1.18.3",
      "cors": "^2.8.4",
      "express": "^4.16.3",
      "graphql": "^0.13.2",
      "graphql-tools": "^3.1.1"
   },
   
   "devDependencies": {
      "nodemon": "1.17.1"
   }
}

以下のコマンドを使用して依存関係をインストールします-

C:\Users\Admin\test-app>npm install

ステップ4-データフォルダにフラットファイルデータベースを作成する

このステップでは、フラットファイルを使用してデータを保存および取得します。フォルダデータを作成し、2つのファイルを追加しますstudents.json そして colleges.json

以下は colleges.json ファイル-

[
   {
      "id": "col-101",
      "name": "AMU",
      "location": "Uttar Pradesh",
      "rating":5.0
   },
   
   {
      "id": "col-102",
      "name": "CUSAT",
      "location": "Kerala",
      "rating":4.5
   }
]

以下は students.json ファイル-

[
   {
      "id": "S1001",
      "firstName":"Mohtashim",
      "lastName":"Mohammad",
      "email": "[email protected]",
      "password": "pass123",
      "collegeId": "col-102"
   },
   
   {
      "id": "S1002",
      "email": "[email protected]",
      "firstName":"Kannan",
      "lastName":"Sudhakaran",
      "password": "pass123",
      "collegeId": "col-101"
   },
   
   {
      "id": "S1003",
      "email": "[email protected]",
      "firstName":"Kiran",
      "lastName":"Panigrahi",
      "password": "pass123",
      "collegeId": "col-101"
   }
]

ステップ5-データアクセス層を作成する

データフォルダの内容をロードするデータストアを作成する必要があります。この場合、コレクション変数、学生大学が必要です。アプリケーションがデータを必要とするときはいつでも、これらのコレクション変数を利用します。

次のように、プロジェクトフォルダにファイルdb.jsを作成します-

const { DataStore } = require('notarealdb');

const store = new DataStore('./data');

module.exports = {
   students:store.collection('students'),
   colleges:store.collection('colleges')
};

ステップ6-スキーマファイルschema.graphqlを作成する

現在のプロジェクトフォルダにスキーマファイルを作成し、次の内容を追加します-

type Query  {
   test: String
}

ステップ7-リゾルバーファイルresolvers.jsを作成する

現在のプロジェクトフォルダにリゾルバファイルを作成し、次の内容を追加します-

const Query = {
   test: () => 'Test Success, GraphQL server is up & running !!'
}
module.exports = {Query}

ステップ8-Server.jsを作成し、GraphQLを構成します

サーバーファイルを作成し、GraphQLを次のように構成します-

const bodyParser = require('body-parser');
const cors = require('cors');
const express = require('express');
const db = require('./db');

const port = process.env.PORT || 9000;
const app = express();

const fs = require('fs')
const typeDefs = fs.readFileSync('./schema.graphql',{encoding:'utf-8'})
const resolvers = require('./resolvers')

const {makeExecutableSchema} = require('graphql-tools')
const schema = makeExecutableSchema({typeDefs, resolvers})

app.use(cors(), bodyParser.json());

const  {graphiqlExpress,graphqlExpress} = require('apollo-server-express')
app.use('/graphql',graphqlExpress({schema}))
app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}))

app.listen(
   port, () => console.info(
      `Server started on port ${port}`
   )
);

ステップ9-アプリケーションを実行し、GraphiQLでテストする

プロジェクトtest-appのフォルダー構造を次のように確認します-

test-app /
   -->package.json
   -->db.js
   -->data
      students.json
      colleges.json
   -->resolvers.js
   -->schema.graphql
   -->server.js

以下のようにコマンドnpmstartを実行します-

C:\Users\Admin\test-app>npm start

サーバーは9000ポートで実行されているため、GraphiQLツールを使用してアプリケーションをテストできます。ブラウザを開き、URL http:// localhost:9000 / graphiqlを入力します。エディタに次のクエリを入力します-

{
   Test 
}

サーバーからの応答を以下に示します-

{
   "data": {
      "test": "Test Success, GraphQL server is running !!"
   }
}