Express JS를 사용하여 ApolloServer에서 GraphQL을 5 분 이내에 시작합니다.

Apollo는 GraphQL을위한 오픈 소스 프레임 워크이며이 튜토리얼에서는 Apollo 2.0을 사용합니다.

이것은 튜토리얼 에서 직접 가져온 것입니다 .

> NPM 초기화

먼저 명령을 apollo-graphql-server사용하여 라는 폴더를 만듭니다 mkdir.

mkdir apollo-graphql-server

cd apollo-graphql-server

npm init --yes

npm install graphql graphql-tools apollo-server-express

모든 데이터 그래프는 스키마 를 사용하여 포함 된 데이터 유형을 정의합니다. 예를 들어, 온라인 서점의 스키마는 다음 유형을 정의 할 수 있습니다.

type Student {
id: ID!
name: String
dob: String
mobile: String
password: String
}
type StudentDetails {
id: ID!
student_id: ID
age: String
address: String
city: String
state: String
}
type StudentRoles {
id: ID!
student_id: ID
role: String
}

스키마는 데이터 그래프가 스키마의 구조를 따르는 경우에만 유용합니다. 스키마의 구조를 적용하는 것은 데이터 그래프의 API를 구현하는 데 도움이되는 생산 준비가 완료된 오픈 소스 라이브러리 인 Apollo Server 의 핵심 기능 중 하나입니다 .

로부터 apollo-graphql-server디렉토리의가 (우리의 프로젝트의 다른 종속과 함께) 아폴로 서버를 설치할 수 :

cd apollo-graphql-server

이제로 이동하여 index.js서버를 만들 수 있습니다. 아래 코드를 파일에 붙여 넣으십시오.

const { ApolloServer } = require('apollo-server'); 
const typeDefs = require('./schema');  
const server = new ApolloServer({ typeDefs });

이제 Apollo Server가 스키마를 수신 할 준비가되었으므로이를 정의하겠습니다.

3. 스키마 유형 정의

GraphQL 스키마는 클라이언트가 데이터 그래프에 읽고 쓸 수있는 데이터 유형을 정의합니다. 스키마는 강력한 형식으로되어있어 강력한 개발자 도구를 사용할 수 있습니다.

스키마의 구조는 클라이언트가 수행 할 작업을 지원해야합니다. 예제 앱은 다음을 수행 할 수 있어야합니다.

  • 예정된 모든 도서 출시 목록 가져 오기
  • ID로 특정 책 가져 오기
  • 로그인 한 사용자를위한 출시 예약

에서 schema.js수입, gql에서 apollo-server와라는 변수 생성 typeDefs하여 스키마를 :

const { gql } = require('apollo-server-express')
const typeDefs = gql`
type Launch {
    id: ID!
    site: String
    isBooked: Boolean!
},
type Query {
    launch: [Launch]
}
`;
module.exports = typeDefs;

4. Resolver 생성

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

var studRepo = require('../DAO/studentRepository');
const { ApolloServer } = require('apollo-server');
const studentResolvers = {
Query: {
student: async (parent, args, context) => {
var stu = await studRepo.getStudents(args);
// console.log(stu);
return stu.data
},
studentDetails: async (parent, args, context) => {
var studDetails = await studRepo.getStudentDetails(args)
// console.log(studDetails.data);
return studDetails.data
},
getStudentRoles: async (parent, args, context) => {
var studRoles = await studRepo.getStudentRoles(args)
// console.log(studRoles.data);
return studRoles.data
}
},
Mutation: {
async createStudent( parent, args, context) {
var result = await this.studentCreate(args);
},
async updateStudent( parent, args, context) {
var result = await this.updateStudent(args);
},
async deleteStudent( parent, args, context) {
var result = await this.deleteStudent(args);
},
async createStudentDetails( parent, args, context) {
var result = await this.studentDetailsCreate(args);
},
async updateStudentDetails( parent, args, context) {
var result = await this.updateStudentDetails(args);
},
async deleteStudentDetails( parent, args, context) {
var result = await this.deleteStudentDetails(args);
},
async createStudentRoles( parent, args, context) {
var result = await this.studentRoleCreate(args);
},
async updateStudentRoles( parent, args, context) {
var result = await this.updateStudentRole(args);
},
async deleteStudentRoles( parent, args, context) {
var result = await this.deleteStudentRole(args);
},
}
}
const mutationdefs = require('../schema/mutation');
const server = new ApolloServer({
typeDefs: mutationdefs.mutationdefs,
resolvers: studentResolvers.studentResolvers
});
server.applyMiddleware({ app });

루트 디렉터리에 index.js 파일을 만들고이 코드를 복사하여 붙여 넣습니다.

const { ApolloServer, gql, makeExecutableSchema } = require('apollo-server-express');
const express = require('express');
require('dotenv').config();
const app = express();
require('./Resolver/resolver')
app.listen({port: 3000}, () => {
console.log(`🚀 Server ready at http://${process.env.HOST}:${process.env.PORT}`);
});

서버를 시작하려면 터미널에 다음을 입력하십시오.

node index.js

🚀 Server ready at http://localhost:3000/

브라우저에 다음 '놀이터'앱이 표시되어야합니다.

GraphQL 플레이 그라운드 사용

  • 요청 (왼쪽)
  • 응답 (오른쪽)
  • 문서 (맨 오른쪽에있는 녹색 "SCHEMA"버튼을 사용하여 사용 가능)

type Student {
id: ID!
name: String
dob: String
mobile: String
password: String
}
type StudentDetails {
id: ID!
student_id: ID
age: String
address: String
city: String
state: String
}

오른쪽에있는 녹색 '스키마'버튼을 클릭하면 다음 예에서 스키마를 볼 수 있습니다.

서버에서 사용할 수있는 여러 개의 독립적 인 쿼리와 변형을 정의 할 수 있습니다.

type Query {
student(id: ID): [Student]
studentDetails(id: ID): [StudentDetails]
getStudentRoles(id: ID): [StudentRoles]
}
type Mutation {
createStudent( name: String, dob: String, mobile: String, password: String) : Student
updateStudent( id: ID!, name: String, dob: String, mobile: String, password: String) : Student
deleteStudent(id: ID!) : Student
createStudentDetails( student_id: ID, age: Int, address: String, city: String, state: String) : StudentDetails
updateStudentDetails(id: ID!, student_id: ID, age: Int, address: String, city: String, state: String) : StudentDetails
deleteStudentDetails(id: ID!) : StudentDetails
createStudentRoles( id: ID!, student_id: ID, role: String)   : StudentRoles
updateStudentRoles( student_id: ID, role: String) : StudentRoles
deleteStudentRoles(id: ID!)   : StudentRoles
}
  • student: Student객체 목록을 반환 합니다.
  • studentDetails: StudentDetails객체 목록을 반환 합니다.
  • getStudentRoles: StudentRoles객체 목록을 반환 합니다.

축하합니다! Express JS로 Apollo 서버를 성공적으로 생성하고 이제 쿼리 및 변형이 가능한 사용자 정의 필드를 추가했습니다.

Suggested posts

Node 및 Express 앱을 처음부터 촬영하세요!

Node 및 Express 앱을 처음부터 촬영하세요!

정적 웹 페이지가 지루하고 항상 사용자가 상호 작용하도록 만들고 싶습니까? 당신은 저와 같은 자바 스크립트 팬이지만 백엔드 개발을 시작하는 방법을 모르십니까? 잠깐, 당신은 올바른 자리에 있습니다. Node and Express 앱을 처음부터 바로 촬영 해 봅시다! 장치에 노드와 npm이 설치되어 있는지 확인하십시오.

GraphQL Express Mongo 백엔드

GraphQL Express Mongo 백엔드

빠른 설정, 실시간 클라이언트 중심 단일 엔드 포인트; 사실이 되기에는 너무 좋은 것 같나요? 이 설정에서는 Node와 Mongo를 데이터베이스로 사용하여 확장 가능한 최신 GraphQL API 백엔드를 구축하는 방법을 배웁니다. Restful API 대신 GraphQL을 선택하는 이유는 무엇입니까? i) 단일 엔드 포인트 데이터를 가져 오기 위해 특정 엔드 포인트를 알아야하는 Restful API와 달리 모든 데이터 쿼리 및 변형은 단일 엔드 포인트에서 수행됩니다.

Related posts

성능 최적화 된 A / B 테스트 솔루션

성능 최적화 된 A / B 테스트 솔루션

의제 : 소개 : TL;하지만 읽을 수 있습니다. A / B 테스트, CloudFront 및 Lamba @ edge에 대해 이미 알고있는 경우 AWS Lambda @ edge를 사용한 A / B 테스트로 직접 이동하십시오. A / B 테스트 란 무엇입니까? A / B 테스트는 웹 사이트의 두 가지 버전에 대한 사용자의 참여를 비교하는 데 초점을 맞춘 UX 연구 방법론입니다.

fp-ts (Typescript)에서 Option 및 둘 중 하나 사용

저는 함수형 프로그래밍을 좋아합니다. 몇 년 동안 실수를하거나 토끼 구멍을 뚫는 것으로부터 저를 몇 번 구해 주었기 때문입니다. 동일한 입력이 주어지면 출력이 항상 동일하다는 것을 알면 안심입니다.

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드는 하나 이상의 파일, 이미지, 문서, 오디오, 비디오 및 기타 파일을 서버에 업로드하기위한 구성 요소입니다. 여러 파일 선택, 진행률 표시 줄, 자동 업로드, 끌어서 놓기, 폴더 (디렉터리) 업로드, 파일을 포함하는 다양한 기능을 갖춘 HTML5 업로드 구성 요소 (<input type =”file”>)의 확장 버전입니다. 검증 등.

6 React 개발자로서 후회

내가 일찍했으면하는 것

6 React 개발자로서 후회

React는 배울 수있는 훌륭한 도구입니다. 그것은 우리가 우리 자신의 방식으로 일을 할 수있게합니다.