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 !!"
}
}