nexus 이해하기1 (공식문서 참고)

graphql nexus 를 치면 인강도 없고.. 자료도 없다.

공식 문서조차 영어로 되어 있어서 이해하기 어렵다. 그래서 1도 모르는 nexus 사용자들을 위해 내가 번역해보고 이해해본다.

 

 

참고로 graphQL 의 기초 지식이 있어야 더 잘 이해할 수 있을 것이다. 또한 공식문서를 여러번 읽어보면 설명이 잘 되어있음을 느낀다.

 

공식문서를 읽고 느낀 점은... 

nexus 를 통해 graphQL 의 스키마를 작성할 수 있는 것 같다.

그리고 prisma 를 통해 데이터베이스 마이그레이션을 한다.

 

 

 

 

 

< 배우게 될 것 > 

• The nexus package
• The ts-node-dev package to run your app
• Nexus project 레이아웃과 실행
• GraphQL Playground

 

 

 

 

 

 

설치 -> package.json

 

mkdir nexus-tutorial && cd nexus-tutorial
$npm init -y
$npm install nexus graphql apollo-server

 

참고: 

nexus는 모든 GraphQL 호환 서버에서 작동한다. 

우리는 apollo-server 를 이 튜토리얼에서 사용할 것이지만 당신은 사용 사례에 가장 적합한 것을 자유롭게 사용할 수 있다.

 

 

 

 

 

 

 

 

우리는 또한 dev 의존성으로 typescript 와 ts-node-dev를 필요 하다. 

ts-node-dev 는 TS 파일을 즉석에서 변환하고 변경 사항에 따라 API를 다시 시작할 수 있다.

 

npm install --save-dev typescript ts-node-dev

 

 

 

 

 

 

 

TypeScript를 제대로 활용하려면 tsconfig.json 파일이 필요하다. 프로젝트의 루트에 하나를 만들고 다음을 복사하여 붙여넣는다.

 

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "commonjs",
    "lib": ["esnext"],
    "strict": true,
    "rootDir": ".",
    "outDir": "dist",
    "sourceMap": true,
    "esModuleInterop": true
  }
}

 

 

 

 

 

 

 

 

마지막으로 향후 워크플로를 단순화하기 위해 몇 가지 npm 스크립트를 추가해 보겠다.

 

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "ts-node-dev --transpile-only --no-notify api/index.ts",
  "build": "tsc"
}

 

 

 

 

---

nexus 앱 레이아웃 만들기

 

 

 

api/schema.ts 파일을 만들자.

mkdir api && touch api/schema.ts

 

 

 

 

 

 

 

 

빈 스키마를 생성하도록 nexus 를 세팅한다.

 

// api/schema.ts
import { makeSchema } from 'nexus'
import { join } from 'path'
export const schema = makeSchema({
  types: [], // 1
  outputs: {
    typegen: join(__dirname, '..', 'nexus-typegen.ts'), // 2
    schema: join(__dirname, '..', 'schema.graphql'), // 3
  },
})

 

1. GraphQL 스키마를 구성하는 데 사용할 GraphQL type. 현재 비어있다. -> 이 게시물에서 type 을 만들어볼거다
2. 출력경로. 이 경로는 nexus 가 작성해야한다. (스키마에서 생성된 TypeScript 정의 유형을 nexus 가 작성) 이것은 Nexus의 유형 안전성을 활용하기 위해 필수다. 우리는 이 시스템을 "reflection"라고 부른다. 나중에 자세히 설명 예정.
3. nexus 가 GraphQL 스키마의 SDL 버전을 작성해야 하는 위치의 출력 경로. 나중에 더 자세히 설명 예정.

 

 

 

 

SDL 이란건

 

query {
	name: string
    ...
}

 

이런 것이다.

 

 

 

 

 

마지막으로 GraphQL 서버를 설정한다. 

다음 파일을 생성한다.

 

• api/server.ts
• api/index.ts

 

GraphQL 서버를 인스턴스화 하자!!!!!!

 

 

// api/server.ts
import { ApolloServer } from 'apollo-server'
import { schema } from './schema'
export const server = new ApolloServer({ schema })

 

 

// api/index.ts
import { server } from './server'
server.listen().then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`)
})

 

 

 

 

npm run dev 로 실행하고 url 이 터미널에 찍힐 것이다.

이 url 을 실행해보면 graphQL playground 가 띄워진다.

 

 

 

 

이것은 GraphQL API와 상호 작용하기 위한 그래픽 사용자 인터페이스이다. 

 

Nexus는 사용자의 편의를 위해 기본 제공된다.

 

 

 

오른쪽의 SCHEMA 탭을 살펴보자. Nexus에서 제공한 기본 스키마가 표시된다. 이것은 이전에 본 경고와 함께 고유한 스키마를 시작하면 사라진다.

 

 

 

Nexus는 동일한 경로에서 GraphQL 요청을 처리한다. 

 

 

 

 

 

 

---

첫번째 스키마 작성

 

 

배우게 될 것

• GraphQL 객체 작성
• 쿼리 작업을 위한 GraphQL 객체 노출
• GraphQL SDL 파일 생성
• 향상된 유형 안전성 및 자동 완성

 

 

 

아까 reflection 에 대해서 잠깐 짚고 넘어갔었다.

nexus 는 reflection 이라는 독특한 개념이 있다.

이는..

makeSchema가 호출될 때 애플리케이션 코드가 실행될 뿐만 아니라 정보가 수집되고 아티팩트가 파생 된다는 사실을 나타낸다 .

 

 

 

 

 

reflection 을 위한  nexus  의 용도는 다음과 같다.

• 리졸버에 완전한 유형 안전성을 제공하는 TypeScript 유형 생성
• SDL 파일 생성

 

 

 

 

---

도메인 모델링

 

 

모델링 작업은 데이터베이스 계층이 아닌 API 계층에서 시작된다. 이 API 우선 접근 방식은 프론트엔드 팀과 협업하여 데이터를 조기에 형성하는 데 필요한 정보를 얻을 수 있는 좋은 방법이 될 수 있다.

 

 

용어에 대한 참고 사항입니다. 우리는 Post Model 이 아니라 Post Object 에 대해 이야기할 것입니다 . 차이점은 API 계층에는 객체가 있지만 데이터베이스 계층에는 모델이 있다는 것입니다. 이름 차이는 혼동 없이 이러한 다른 계층에 대해 이야기하는 데 도움이 됩니다. GraphQL(API 계층)과 Prisma(데이터베이스 계층, 나중에 설명)가 각각 이러한 것들을 참조하는 방법이기도 합니다.

 

 

 

 

api/graphql/Post.ts 에 Post 객체에 대한 새로운 모듈을 만들자.

원래 우리는 우리의 전체 스키마를 api/schema.ts 나 api/graphql.ts 에 쓸 수 있었다.

그러나 graphQL 타입 정의를 모듈화하면 코드베이스를 확장화하는데 도움이 될 수 있다.

 

mkdir api/graphql && touch api/graphql/Post.ts

 

 

// api/graphql/Post.ts

import { objectType } from 'nexus'
export const Post = objectType({
  name: 'Post',            // <- Name of your type
  definition(t) {
    t.int('id')            // <- Field named `id` of type `Int`
    t.string('title')      // <- Field named `title` of type `String`
    t.string('body')       // <- Field named `body` of type `String`
    t.boolean('published') // <- Field named `published` of type `Boolean`
  },
})

 

위의 코드 해석

Post 객체를 만들기 위해서는 nexus 패키지에서 objectType 을 import 해온다.

이것은 너가 GraphQL Object Type 을 만드는데 도움을 준다.

 

 

 

 

추가적으로, 우리는 Post object 타입을 makeSchema 함수에 전달해야 한다.

이를 위해 api/graphql/index.ts 파일을 만들고 모든 type 을 다시 내보내기 위한 index 로 사용할 파일을 만든다.

 

// api/graphql/index.ts

export * from './Post'

 

 

 

 

 

마지막으로 우리는 위의 파일을 import 해와서 이것을 makeSchema 에 전달해준다.

 

// api/schema.ts

import { makeSchema } from 'nexus'
import { join } from 'path'
import * as types from './graphql'     // 모듈 전체를 import 해옴

const schema = makeSchema({
  types,    // 작성한 type 을 전달
  outputs: {
    typegen: join(__dirname, '../nexus-typegen.ts'),
    schema: join(__dirname, '../schema.graphql')
  }
})

 

 

 

 

다음 시간에는 SDL 이 뭔지 알아보겠다.