배경

• 지난 10월에 “GraphQL 개념과 GraphQL 서버 만들어보기” 세션에서 간단하게 GraphQL 서버에 대해서 맛만 봤는데요.
mentoring.fromundefined.com
https://mentoring.fromundefined.com/sessions/wi-241008

• 실제로 프로덕션 환경에서 GraphQL 서버를 어떻게 셋팅하는 것이 좋은지, 그리고 운영 관점에서 챙겨야할 부분이 없을지 살펴봐요.

• 지난 세션에 이어서 30k-boilerplate 레포에 살을 더 붙여서 발전시켜봐요.
github.com
https://github.com/tonyfromundefined/30k-boilerplate

왜 GraphQL인가요?

• GraphQL은 React 단짝으로, 프론트엔드의 복잡도를 낮추기 위한 BFF(Backend for Frontend)를 구축할때 활용하면 좋아요.

• GraphQL의 대표적인 클라이언트 라이브러리인 Relay는 프론트엔드 개발자에게 영감을 주고, 다음 단계 성장을 만들만한 계기가 될거에요.
mentoring.fromundefined.com
https://mentoring.fromundefined.com/sessions/wi-241022
💭
Toss에서 공개한 “Frontend Fundamentals”라는 문서를 읽어보셨나요? 저는 이 문서에 포함된 내용 대부분이 GraphQL과 Relay를 도입하게 되면 자연스럽게 달성되는 내용인거 같아요. (Relay + React Router 관련 셋팅은 다음주에 진행해요)
frontend-fundamentals.com
https://frontend-fundamentals.com/

• 또한 GraphQL은 여러 마이크로서비스들을 Aggregation하는데 굉장히 유용하고, 특히 DataLoader는 BFF가 소비할 각 마이크로서비스들의 Query API가 어떤 모습이여야하는지 나름의 방향을 알 수 있게 해줘요.



(주저리주저리) 이러한 방향성은 Gatsby와 같은 SSG 프레임워크부터 GraphQL Mesh 같은 솔루션, 그리고 이를 넘어서서 GraphQL Federation과 같은 멘탈모델까지 업계 내에서 다양하게 활용돼요.
www.gatsbyjs.com
https://www.gatsbyjs.com/
the-guild.dev
https://the-guild.dev/graphql/mesh
graphql.org
https://graphql.org/learn/federation/
(주저리주저리2) GraphQL Federation은 국내에서는 생소한 개념이지만, Netflix와 같은 빅테크에서는 대략 5년전부터 활발하게 활용되어오고 있어요.
netflixtechblog.com
https://netflixtechblog.com/how-netflix-scales-its-api-with-graphql-federation-part-1-ae3557c187e2

1. GraphQL 서버 기본 셋팅하기

Let’s Code!

type Query {
  ping: String!
}

const resolvers = {
  Query: {
    ping() {
      return "pong";
    },
  },
};

export interface Context {
  app: FastifyInstance;
  req: FastifyRequest;
}

Why GraphQL Yoga?

• Apollo Server (가장 많이 사용할 거에요)

• Mercurius (Fastify 통합)

• GraphQL Yoga

TypeScript 지원

$ yarn add --dev \
	@graphql-codegen/cli \
	@graphql-codegen/schema-ast \
	@graphql-codegen/typescript \
	@graphql-codegen/typescript-resolvers

// codegen.ts
import type { CodegenConfig } from "@graphql-codegen/cli";

const config: CodegenConfig = {
  schema: [
	  "./src/graphql/**/*.graphql",
	  "!./src/graphql/__generated__/schema.graphql",
  ],
  generates: {
    "./src/graphql/__generated__/resolvers.ts": {
      plugins: ["typescript", "typescript-resolvers"],
      config: {
        contextType: "../defineContext#Context",
        
        // 아래 두 옵션은 지금 사용하진 않겠지만 매우 중요해요!
        mappers: {},
        mapperTypeSuffix: "Type",
      },
    },
    "./src/graphql/__generated__/schema.graphql": {
      plugins: ["schema-ast"],
    },
  },
};

export default config;

$ yarn graphql-codegen

DataLoader 셋팅과 Request Context

GraphQL 서버 운영

GraphQL Hive

한바닥 정리

GraphQL Modules

const gqlModulesApp = createApplication({
  modules: [
    ModuleA,
    ModuleB,
    ModuleC,
    /* ... */
  ],
});

const yoga = createYoga<Context>({
  plugins: [
    useGraphQLModules(gqlModulesApp),
  ],
});