GraphQL 요가와 GraphQL API

Graphql Yoga는 GraphQL 서버에 포함된 배터리이며 시작하기가 매우 쉽습니다!

GraphQL에 익숙하지 않은 경우 official documentation 을 확인해야 합니다.

하지만 간단히 말해서:
"GraphQL은 API용 쿼리 언어이며 기존 데이터로 이러한 쿼리를 수행하기 위한 런타임입니다. GraphQL은 API의 데이터에 대한 완전하고 이해하기 쉬운 설명을 제공하고 클라이언트가 필요한 것을 정확히 요청할 수 있는 권한을 제공합니다. 시간이 지남에 따라 API를 더 쉽게 발전시키고 강력한 개발자 도구를 사용할 수 있습니다."

GraphQL의 주요 목표는 필요한 데이터만 가져오는 것입니다. 런타임을 사용하면 한 번의 요청으로 여러 리소스를 가져올 수도 있으므로 REST API에 비해 적은 코드로 더 많은 결과를 얻을 수 있습니다.
GraphQL의 또 다른 요점은 클라이언트와 일관되고 공유되는 강력한 유형 시스템을 사용하여 데이터를 정의하므로 모든 것이 투명하다는 것입니다.

먼저 새로운 노드 프로젝트를 생성하고 구성해야 합니다.
제 경우에는 graphql-yoga-api라고 하는 디렉토리를 만드십시오.

npm init -y  

(설치할 일부 패키지와 충돌할 수 있으므로 프로젝트 이름graphql-yoga을 지정하지 않도록 주의하십시오.)

그 후 es-lint와 함께 typescript를 사용하는 것을 좋아하므로 설치하겠습니다.

npm i typescript eslint ts-node ts-node-dev cross-env -D

그리고 cli를 사용하여 다음을 구성합니다.

npx tsc --init
npx eslint --init

마지막으로 업데이트package.json하고 일부 스크립트를 추가할 수 있습니다.

"scripts": {
  "dev": "cross-env NODE_ENV=development ts-node-dev --exit-child --respawn src/index.ts",
  "start": "ts-node src/index.ts"
}

이러한 명령에 대해 크게 걱정할 필요는 없지만 dev 명령 utiliza cross-env는 환경 변수를 설정한 다음 respawn을 사용하여 ts-node-dev를 호출하여 변경할 때 프로젝트를 계속 실행합니다. 시작 명령은 typescript를 직접 실행합니다. 원하는 경우 다음을 사용하여 실행하는 프로젝트를 컴파일할 수도 있습니다node buld/index.js.

지금은 프로젝트 구조를 정의하기에 좋은 시간입니다. 이 프로젝트에서는 다음을 사용할 것입니다.

project
├── src
│   └─── index.ts
│
├── ....
└─── tsconfig.json 

프로젝트 진입점은 src/index.ts입니다.

이제 GraphQL 종속성을 설치해야 합니다.

npm i graphql @graphql-tools/schema @graphql-yoga/node

먼저 index.ts에서 GraphQL 유형을 정의합니다.

const typeDefs = /* GraphQL */ `
  type Query {
    hello: String!
  }
`;

데이터를 검색하는 함수를 정의합니다.

const resolvers = {
  Query: {
    hello: () => 'Hello World!',
  },
};

지금 우리는 GraphQL에 필요한 모든 것을 가지고 있으므로 유형과 리졸버를 결합하고 서버를 시작하겠습니다.

const schema = makeExecutableSchema({typeDefs, resolvers});

async function main() {
  const server = createServer({schema});
  server.start();
}

이 시점에서 귀하의 index.ts는 다음과 같아야 합니다.

import {createServer} from '@graphql-yoga/node';
import {makeExecutableSchema} from '@graphql-tools/schema';

const typeDefs = /* GraphQL */ `
  type Query {
    hello: String!
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello World!',
  },
};

const schema = makeExecutableSchema({typeDefs, resolvers});

async function main() {
  const server = createServer({schema});
  server.start();
}

main();

프로젝트를 실행하면 콘솔에 다음과 같은 메시지가 표시됩니다.

[INFO] 08:55:30 ts-node-dev ver. 2.0.0 (using ts-node ver. 10.8.2, typescript ver. 4.7.4)
💡   🧘 Yoga -   Running GraphQL Server at http://127.0.0.1:4000/graphql

링크로 이동하면 API를 테스트하고 디버그하는 도구인 GraphiQL이 포함된 페이지가 표시됩니다. 방금 만든 것을 실행하려면 왼쪽 컨테이너에 다음을 입력한 다음 큰 재생 버튼을 누릅니다.

query {
  hello
}

요청을 하면 올바른 컨테이너에 다음과 같은 내용이 표시됩니다.

{
  "data": {
    "hello": "Hello World!"
  }
}

수행! 자, 이제 간단합니다. 이제 GraphQL 서버의 기본 사항을 알고 유형과 리졸버를 수정하여 이 최소한의 설정으로 무엇을 달성할 수 있는지 확인할 수 있습니다. GraphQL은 놀라운 도구이며 뛰어난 생태계를 가지고 있습니다. 꼭 사용해 보세요!

GraphQL에 대한 글은 계속 올릴 예정이니 더 보고 싶다면 저를 팔로우하세요!