GraphQL-환경 설정

이 장에서는 GraphQL의 환경 설정에 대해 알아 봅니다. 이 튜토리얼의 예제를 실행하려면 다음이 필요합니다.

  • Linux, macOS 또는 Windows를 실행하는 컴퓨터.

  • 웹 브라우저, 가급적 최신 버전의 Google 크롬.

  • 최신 버전의 Node.js가 설치되었습니다. 최신 LTS 버전을 권장합니다.

  • VSCode 용 확장 GraphQL이 설치된 Visual Studio Code 또는 원하는 코드 편집기.

Nodejs로 GraphQL 서버를 구축하는 방법

아래 그림과 같이 Nodejs를 사용하여 GraphQL 서버를 구축하는 단계별 접근 방식을 자세히 살펴 보겠습니다.

1 단계-노드 및 Npm 버전 확인

NodeJs를 설치 한 후 터미널에서 다음 명령을 사용하여 node 및 npm의 버전을 확인하십시오.

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

C:\Users\Admin>npm -v
5.6.0

2 단계-프로젝트 폴더를 만들고 VSCode에서 열기

프로젝트의 루트 폴더는 test-app으로 이름을 지정할 수 있습니다.

아래 지침을 사용하여 Visual Studio 코드 편집기를 사용하여 폴더를 엽니 다.

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 단계-데이터 폴더에 플랫 파일 데이터베이스 생성

이 단계에서는 플랫 파일을 사용하여 데이터를 저장하고 검색합니다. 폴더 데이터를 만들고 두 개의 파일을 추가합니다.students.jsoncolleges.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 단계-Resolver 파일, 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

다음과 같이 npm start 명령을 실행하십시오-

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

서버는 9000 포트에서 실행되므로 GraphiQL 도구를 사용하여 애플리케이션을 테스트 할 수 있습니다. 브라우저를 열고 URL http : // localhost : 9000 / graphiql을 입력합니다. 편집기에 다음 쿼리를 입력하십시오-

{
   Test 
}

서버의 응답은 다음과 같습니다.

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