1단계 - Node.js로 GraphQL 서버를 만들어 봅시다.

이것은 GraphQL 시리즈의 첫 번째 부분입니다.

열정적인 프로그래머는 기존 기술을 향상시키는 것 외에도 항상 자신의 무기고에 새로운 기술을 추가합니다. 새로운 트렌드 기술을 배우는 것은 가치를 높이는 것과 같습니다.

GraphQL은 구조화된 쿼리 언어로, 서버에서 필요한 데이터만 쿼리하도록 도와줍니다. 서버에 대한 요청이 적다는 것은 비용이 적게 든다는 것을 의미합니다.

오늘의 작업은 GraphQL 서버를 실행하고 GraphiQL(GraphQL 탐색을 위한 브라우저 내 IDE)을 통해 데이터를 쿼리하는 것입니다.

시리즈를 시작하기 전에 현실적인 최종 목표를 설정해 보겠습니다.

따라서 다음 2개월 동안 우리의 목표는 실제 응용 프로그램에 대한 인증 및 권한 부여를 통해 GraphQL 기반 API를 구축하는 것입니다.

의 시작하자

터미널을 열고 원하는 위치에 폴더 생성mkdir folderName
명령을 사용하여 폴더로 이동cd folderName
nodejs가 설치되어 있고 터미널의 기본 사항에 익숙하다고 가정합니다.

이제 나머지 API를 생성할 때와 마찬가지로 package.json 파일을 생성해야 합니다.
package.json 명령을 사용하여 npm init 파일을 생성할 수 있습니다.

질문을 건너 뛰기 위해 npm init -y을 실행합니다.

이제 세 가지 종속성을 설치해야 합니다.
npm i express express-graphql graphql
루트에 파일server.js을 만들고 이름을 index.js 지정하면 사용자에게 달려 있습니다.

이제 server.js 파일에 방금 설치한 패키지가 필요합니다.
const { buildSchema } = require('graphql')
ES6 Destructuring을 사용하여 buildSchema에서 graphql 메서드를 꺼내면 스키마를 만드는 데 도움이 됩니다.
const { graphqlHTTP } = require('express-graphql')
이 패키지는 express로 graphqlhttp server을 생성하는 데 도움이 됩니다.

나머지 API를 작성할 때와 마찬가지로 초기화express합니다.
const app = express()
이것이 지금 우리 코드의 모습입니다.

const express = require('express')
const { buildSchema } = require('graphql')
const { graphqlHTTP } = require('express-graphql')

const app = express()

스키마 생성

쿼리는 데이터를 읽기 위한 것입니다. 키워드query로 스키마를 정의하면 변경할 수 없습니다. 즉, 편집, 업데이트 또는 삭제 작업을 수행할 수 없습니다.

느낌표를 name: String!와 함께 사용했는데 이는 이름이 필수이며 null일 수 없음을 의미합니다.

const schema = buildSchema(`
  type Query {
    name: String!,
    designation: String
  }
`)

리졸버 기능

GraphqQL 스키마에는 각 필드에 대한 해석기 함수가 있어야 하며 해석기 함수는 정의한 특정 필드에 대한 결과를 반환합니다.

이름을 쿼리할 때마다 항상 John을 반환해야 합니다. 이를 위해 리졸버 기능을 정의해야 합니다. 그렇지 않으면 기본 해석기가 설정되고 null이 됩니다. 필수 이름이 있는 것처럼 필드가 필수이고 이에 대한 리졸버 함수를 작성하지 않은 경우 GraphiQL 오류가 발생합니다.

Resolver도 promise를 반환한다는 점을 기억하세요. 데이터베이스에 연결되고 데이터를 가져올 준비가 되면 구현을 볼 수 있습니다.

const rootValue = {
  name: () => 'John',
  designation: () => 'Junior MERN Stack developer',
}

서버 생성

app.use('/graphql', graphqlHTTP({
  schema,
  rootValue,
  graphiql: true,
}))

graphqlHTTP 함수는 몇 가지 옵션을 허용합니다. 단순화를 위해 3개만 정의했습니다.

첫 번째는 앞에서 정의한 스키마입니다

.

두 번째는 rootValue라는 이름의 해석기입니다. 이것은 개체이며 각 API 끝점에 대한 해석기 기능을 제공합니다.

세 번째는 API 끝점을 테스트하기 위한 graqphiql입니다.

JavaScript에서 키 값이 같으면 한 번만 작성하므로 {schema: schema} 한 번만 작성하는 대신{schema} 코드를 더 깔끔하게 만듭니다.

서버를 실행하고 listen() 메서드를 사용하여 포트 5000을 수신합니다. express는 http.Server 함수를 반환합니다.

첫 번째 매개변수로 포트를 제공하고 콜백에서 우리는 단지 console.log()

이제 코드를 실행할 시간입니다. 이를 위해 터미널에서 명령node server.js을 실행합니다. 당신은 로그를 얻을 것이다
서버가 localhost:5000/graphql에서 실행 중입니다.

완전한 코드

const express = require('express')
const { buildSchema } = require('graphql')
const { graphqlHTTP } = require('express-graphql')

const app = express()

const schema = buildSchema(`
  type Query {
    name: String!,
    designation: String
  }
`)

const rootValue = {
  name: () => 'John',
  designation: () => 'Junior MERN Stack developer',
}

app.use('/graphql', graphqlHTTP({
  schema,
  rootValue,
  graphiql: true,
}))

const port = process.env.PORT || 5000

app.listen(port, () => console.log(`Server is running at localhost:${port}/graphql`))

다음 기사에서는 mutation 및 쿼리 간의 관계에 대해 배우고 더 나은 graphql 플레이그라운드와 함께 Apollo Server를 사용하여 코드를 단순화합니다.

귀하의 과제는 모든 코드를 스스로 한 번 실행하는 것입니다. 구문에 익숙해지도록 복사 대신 코드를 입력합니다. 5분 이상 걸리지 않습니다.