⚡ 2분 만에 RESTful Express.js API에 GraphQL 서버 추가

⚡ 2분 만에 RESTful Express.js API에 GraphQL 서버 추가

2분 안에 팝콘 전자레인지 돌리기, 문자 메시지 보내기, 컵케이크 먹기, GraphQL 서버 연결과 같은 많은 일을 할 수 있습니다.

예. 이전 Express.js RESTful API가 있거나 GraphQL을 점진적으로 채택하는 데 관심이 있는 경우 새로운 GraphQL 서버와 연결하는 데 2분만 있으면 됩니다.

준비가 된? 세트. 가다!

서버가 다음과 같다고 가정해 보겠습니다.

import express from 'express';
import { apiRouter } from './router';

const app = express();
const port = process.env.PORT || 5000;

// Existing routes for our Express.js app
app.use('/api/v1', apiRouter);

app.listen(port, () => console.log(`[App]: Listening on port ${port}`))

프로젝트의 루트에서 npm install apollo-server-express을 종속성으로 지정합니다.

npm install apollo-server-express --save

Express 앱이 정의된 위치로 이동하여 ApolloServer에서 gql 및 apollo-server-express를 가져옵니다.

import { ApolloServer, gql } from 'apollo-server-express'

다음으로 가능한 가장 간단한 GraphQL 유형 정의 및 리졸버를 사용하여 ApolloServer의 인스턴스를 생성합니다.

const server = new ApolloServer({
  typeDefs: gql`
    type Query {
      hello: String
    }
  `,
  resolvers: {
    Query: {
      hello: () => 'Hello world!',
    },
  }
})

마지막으로 ApolloServer 의 applyMiddleware 메서드를 사용하여 Express.js 서버를 전달합니다.

server.applyMiddleware({ app })

팔. 그게 다야!

코드는 다음과 같아야 합니다.

import express from 'express';
import { v1Router } from './api/v1';
import { ApolloServer, gql } from 'apollo-server-express'

const app = express();
const port = process.env.PORT || 5000;

const server = new ApolloServer({
  typeDefs: gql`
    type Query {
      hello: String
    }
  `,
  resolvers: {
    Query: {
      hello: () => 'Hello world!',
    },
  }
})

server.applyMiddleware({ app })

app.use('/api/v1', v1Router);

app.listen(port, () => {
  console.log(`[App]: Listening on port ${port}`)
})

localhost:5000/graphql 로 이동하면 GraphQL 플레이그라운드에서 GraphQL 스키마를 볼 수 있어야 합니다.

Note: If you want to change the URL that the GraphQL endpoint sits at from /graphql to something else, you can pass in a path option to server.applyMiddleware() with the URL you want, like path: '/specialUrl'. Check out the docs for full API usage.

얼마나 간단합니까? 팝콘 다 됐어? 😉

요약

여기 우리가 한 일이 있습니다.

설치 apollo-server-express

만들기 new ApolloServer

GraphQL 서버를 server.applyMiddleware에 연결

저는 개인적으로 Apollo Server가 비간섭적이며 서비스와 애플리케이션 간의 통신을 위한 대체 방법으로 모든 프로젝트에 추가할 수 있다는 사실을 정말 좋아합니다.

여기에서 갈 곳

Apollo 및 GraphQL을 처음 사용하는 경우 실생활에서 실제로 무언가를 구축하는 것이 좋은 학습 방법입니다. 그런 이유로 Apollo Fullstack Tutorial (you can also learn in TypeScript now 🔥) 을 확인하는 것이 좋습니다.

I'm , a Developer Advocate at Apollo GraphQL. I teach advanced TypeScript, GraphQL, and Node.js best practices for large-scale applications. Feel free to ping me on if you need help with anything Apollo, TypeScript, or architecture-related. Cheers 🤠