5분 안에 GraphQL 스키마에 대한 유형 생성

이 작업을 수행하는 모든 단계를 실제로 포함하는 단 하나의 문서를 찾을 수 없습니다. 그래서 몇 시간 전에 Graphql 스키마에 대한 TypeScript 유형을 생성하는 방법에 대한 단계별 가이드를 제공합니다 🫠

쿼리를 구성 요소에서 분리(선택 사항이지만 유용함)

Appease Webpack 및 TypeScript

일부 패키지 및 플러그인 설치

코드젠 타임!

문맥

저는 GraphCMS을 사용하여 앱을 만들고 있습니다(그런데 매우 훌륭합니다). 유일한 문제는 스키마 유형을 내보내는 플러그인을 제공하지 않는다는 것입니다. TypeScript 없이는 작동할 수 없기 때문에 스키마를 사용하여 변형을 작성하거나 정적 페이지를 생성하려고 시도한 두 번째가 큰 문제였습니다.

1 단계

쿼리만 있을 디렉터리로 쿼리를 이동합니다.

왜요? Separation of concerns 비즈니스 논리를 프리젠테이션 구성 요소와 결합하고 싶지 않습니다. 또한 codegen 구성 파일을 더 쉽게 작성할 수 있습니다.

query Question {
    questions {
    prompt
    tags
    id
    answer {
        html
    }
    }
}

각 쿼리가 고유한 개별 파일.graphql에 저장되어 있는지 확인하십시오.

2 단계

Create React App 또는 NextJS 을 사용하는 경우 webpack은 .graphql 파일이 무엇인지 모르기 때문에 이 시점에서 컴파일할 수 없습니다.

나는 Next를 사용하고 있으므로 이것이 내 next.config.js 파일에 남게 되지만 CRA를 사용하는 경우 웹팩이 쿼리 파일을 구문 분석할 수 있도록 these directions을 따르기를 원할 것입니다.

module.exports = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.(graphql|gql)$/,
      exclude: /node_modules/,
      loader: 'graphql-tag/loader',
    });
    return config;
  },
  webpackDevMiddleware: (config) => {
    return config;
  },
};

그건 그렇고, 이 멋진 기사에서 이러한 구성 단계를 찾았습니다 👏🏼

또한 Typescript가 소리를 지르지 않도록 이러한 파일에 대한 유형을 추가하고 싶을 것입니다. 이것을 앱의 루트에 있는 graphql.d.ts 파일에 추가하십시오.

declare module '*.graphql' {
  import { DocumentNode } from 'graphql';
  const Schema: DocumentNode;

  export = Schema;
}

3단계

많은 것을 설치하십시오.

저는 원사를 사용하고 있으므로 아직 원사 악대차에 합류하지 않았다면 npm i를 yarn add로 교체하세요.

yarn add graphql-tag
yarn add graphql
yarn add @graphql-codegen/cli
yarn add @graphql-codegen/typescript-operations
yarn add @graphql-codegen/typescript

👆🏼 내용이 많으니 분해해보자.

graphql-tag ->는 웹팩 로더입니다

.

graphql -> 이미 설치했을 수도 있지만 나중에 쿼리를 만들 때 필수 패키지가 될 것입니다

.

@graphql-codegen/cli -> 이것은 an awesome CLI
codegen 구성을 설정하는 데 도움이 되는 정보

나머지는 앞서 언급한 CLI용 플러그인입니다. TypeScript와 함께 작동하도록 하려면

4단계

모든 스크립트를 실행하면 마침내 유형을 코드 생성할 수 있습니다!

CLI를 사용하여 구성을 설정할 수 있지만 저는 그렇게 하는 것을 선호합니다manually(또한 더 빠릅니다. tbh. 저는 3개의 다른 codegen CLI를 시도했고 이 수동 방법이 가장 빠르고 오류가 가장 적은 방법입니다).

앱의 루트에 codegen.yaml 파일을 생성하고 쿼리에 대한 API 스키마 및 디렉터리에 대한 링크를 연결하기 시작합니다.

schema: 'http://my-graphql-api.com/graphql'
documents: './src/queries/*.graphql'
generates:
  graphql/generated.ts:
    plugins:
      - typescript
      - typescript-operations

documents 값은 모든 쿼리가 있는 폴더여야 하며 .graphql , .ts 또는 .tsx 로 끝나는 파일 내에 저장되어야 합니다.

마지막으로 package.json에 스크립트를 추가하여 이 모든 것을 실행할 것입니다.

"scripts": {
    "codegen": "graphql-codegen"
}

이제 yarn codegen를 실행하고 생성된 유형을 볼 수 있습니다! 모두 행복한 코딩하세요 ⚛