GraphQL-예제

이 장에서는 인사 메시지 HelloWorld를 반환하고 GraphiQL을 사용하여 액세스하는 간단한 API를 생성합니다.

예

이 예제는 NodeJS, Express 및 Apollo 서버를 기반으로합니다. 우리는 다음 단계를 통해 모든 개념을 결합하는 방법을 배웁니다.

1 단계-Express 설정

ExpressJS는 웹 사이트와 웹 애플리케이션을 구축하는 데 도움이되는 웹 애플리케이션 프레임 워크입니다. 이 예에서는 Express 프레임 워크 위에 GraphQL API를 빌드합니다.

다음 단계는 폴더를 만드는 것입니다. hello-world-server터미널에서 동일한 폴더로 이동합니다. package.json을 추가하고 패키지에 이름을 지정하십시오. 이 패키지는 내부적으로 만 사용되므로 비공개로 선언 할 수 있습니다.

{
   "name":"hello-world-server",
   "private":true
}

아래와 같이 Express 서버에 대한 종속성을 설치하십시오-

C:\Users\Admin\hello-world-server>npm install express body-parser cors

body-parser 는 Express가 HTTP Post 요청을 효율적으로 처리하도록 도와주는 미들웨어 패키지입니다. cors 는 교차 출처 리소스 공유를 처리하는 또 다른 미들웨어 패키지입니다.

만들기 server.js 프로젝트 폴더에 파일을 넣고 다음을 입력하십시오-

const bodyParser = require('body-parser')
   const cors = require('cors')
   const express = require('express')
   const port = process.env.PORT|| 9000
   const app = express()
   
   //register middleware
   app.use(bodyParser.json() , cors())
   app.listen(port, () =>  console.log(`server is up and running at ${port}`)

Express 서버가 실행 중인지 확인하려면 터미널 창에서 다음 코드를 실행하십시오.

C:\Users\Admin\hello-world-server>node server.js

다음 출력이 서버 콘솔에 표시됩니다. 이는 익스프레스 서버가 포트 9000에서 실행 중임을 나타냅니다.

server is up and running at 9000

브라우저를 열고 다음을 입력하면 http://localhost:9000, 다음 화면이 표시됩니다-

서버를 중지하려면 Ctrl + C.

2 단계-GraphQL 및 Apollo 서버 설치

이제 Express가 구성되었으므로 다음 단계는 다음 GraphQL 종속성을 다운로드하는 것입니다.

graphql
graphql-tools
apollo-server-express@1

안정적인 릴리스이므로 Apollo 서버 v1.0을 사용할 것입니다. 이러한 종속성을 설치하려면 다음 명령을 입력하십시오-

C:\Users\Admin\hello-world-server>npm install graphql graphql-tools apollo-server-express@1

이러한 종속성이 성공적으로 설치되었는지 확인할 수 있습니다. package.json 이전에 만든 파일입니다.

{
   "name": "hello-world-server",
   "private": true,
   
   "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"
   }
}

3 단계-스키마 정의

GraphQL 스키마는 서비스에서 가져올 수있는 개체의 종류와 포함 된 필드를 정의합니다. 스키마는 다음을 사용하여 정의 할 수 있습니다.GraphQL Schema Definition Language. 이제 다음 코드 스 니펫을server.js 파일-

// Adding Type Definitions
const typeDefinition = `
   type Query  {
      greeting: String
   }

여기서 쿼리에는 문자열 값 을 반환하는 인사말 속성이 포함되어 있습니다 .

4 단계-리졸버 생성

리졸버를 만드는 첫 번째 단계는 인사말 필드에 대한 요청을 처리하는 코드를 추가하는 것입니다. 이것은resolver. 해석기 함수의 구조는 스키마와 일치해야합니다. 다음 코드 조각을server.js 파일.

// Adding resolver
const  resolverObject = {
   Query : {
      greeting: () => 'Hello GraphQL  From TutorialsPoint !!'
   }
}

두 번째 단계는 다음을 사용하여 스키마와 리졸버를 바인딩하는 것입니다. makeExecutableSchema. 이 함수는 graphql-tools 모듈에 미리 정의되어 있습니다. 다음 코드 조각을 server.js 파일.

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

5 단계-ReactJS / GraphiQL 애플리케이션에서 데이터를 가져 오는 경로 정의

다음 코드 조각을 server.js 파일-

const {graphqlExpress, graphiqlExpress} = require('apollo-server-express')

   //create routes for graphql and graphiql
   app.use('/graphql',graphqlExpress({schema}))
   
   app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}))

graphqlExpress의 기능은 경로를 등록하는 데 도움이http://localhost:9000/graphql. ReactJS 애플리케이션은이 끝점을 사용하여 데이터를 쿼리 할 수 있습니다. 마찬가지로 graphqliExpress 함수는 경로를 등록하는 데 도움이됩니다.http://localhost:9000/graphiql. 이는 GraphiQL 브라우저 클라이언트에서 API를 테스트하는 데 사용됩니다.

완전한 server.js 코드는 다음과 같습니다.

const bodyParser = require('body-parser')
const cors = require('cors')
const express = require('express')
const port = process.env.PORT||9000
const app = express()

app.use(bodyParser.json() , cors())
const typeDefinition = `
type Query  {
   greeting: String
}`
const  resolverObject = {
   Query : {
      greeting: () => 'Hello GraphQL  From TutorialsPoint !!'
   }
}
const {makeExecutableSchema} = require('graphql-tools')

const schema = makeExecutableSchema({typeDefs:typeDefinition, resolvers:resolverObject})

const {graphqlExpress,graphiqlExpress} = require('apollo-server-express')

app.use('/graphql',graphqlExpress({schema}))
app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}))
app.listen(port, () =>  console.log(`server is up and running ${port}`))

6 단계-애플리케이션 시작

실행 server.js 다음과 같이 Node.js 사용-

C:\Users\Admin\hello-world-server>node server.js

7 단계-GraphQL API 테스트

브라우저를 열고 입력하십시오. http://localhost:9000/graphiql. GraphiQL의 쿼리 탭에서 다음을 입력하십시오.

{
   greeting
}

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

{
   "data": {
      "greeting": "Hello GraphQL From TutorialsPoint !!"
   }
}

다음 이미지는 응답을 보여줍니다-

Note − Apollo Server 버전 1.0을 사용하고 있는지 확인하십시오.