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.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 단계-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 !!"
}
}