GraphQL 엔드포인트를 기반으로 TypeScript 유형 및 React Hooks 생성

_{^{Cover image by Fred Jesus}}

오늘날 TypeScript로 ReactJS를 개발하면 애플리케이션을 작성하는 확실한 방법이 제공됩니다. 유형 안전성, 구성 요소 자동 문서화, 오류 처리 및 편집기 코드의 정확한 자동 완성의 이점이 추가됩니다. 그러나 형식을 작성하고 유지 관리할 수 있도록 유지하려면 여전히 상당한 노력이 필요합니다. 또한 데이터 공급자가 GraphQL 서버인 경우 서버에 이미 유형에 대한 자체 스키마가 있으므로 쓸모 없는 작업을 수행하고 있는 것처럼 느끼게 됩니다. 중복되는 것 같죠?

이를 염두에 두고 GraphQL Code Generator은 GraphQL 스키마에서 TypesScript 타이핑을 생성하는 기능을 제공합니다. 그 외에도 응용 프로그램에 맞추기 위해 어떤 종류의 유지 관리나 해결 방법이 필요하지 않은 사용자 정의 React 후크를 생성하는 몇 가지 플러그인을 제공합니다.

무엇보다도 이 도구를 사용할 때 얻을 수 있는 몇 가지 이점은 다음과 같습니다.

코드리스: 모든 GraphQL 엔드포인트에 대한 인터페이스/유형을 생성하는 것을 잊으십시오. 시간을 절약하고 중요한 일에 노력을 기울이십시오.

개발 경험: 유형을 항상 사용할 수 있으므로 편집기에서 의미 있는 자동 완성 및 오류 검사를 제공합니다.

항상 최신 유형: GraphQL 끝점 스키마가 변경되면 응용 프로그램이 업데이트되고 TypeScript는 필요한 변경을 수행하는 데 도움이 됩니다.

설정

먼저 필요한 종속성을 설치해 보겠습니다.

npm i @apollo/react-hooks graphql

npm i @graphql-codegen/cli @graphql-codegen/import-types-preset @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-apollo --save-dev

다음 폴더 구조를 고려하고 있지만 물론 원하는 대로 자유롭게 적용할 수 있습니다. 코드 생성기가 가져올 스키마를 저장할 위치가 필요하다는 점을 명심하세요.

📦 my-project
┣ 📂 src
┃ ┣ 📂 pages
┃ ┃ ┗ index.tsx
┃ ┣ 📂 queries
┃ ┃ ┣ 📂 autogenerate
┃ ┃ ┗ my-query.gql
┃ ┗ apollo-client.ts
┣ codegen.yml
┗ package.json

그런 다음 기본적으로 codegen.yml이라는 프로젝트의 루트에 구성 파일을 만들어야 합니다. 다음 스니펫은 프로젝트에서 일반적으로 설정하는 방법을 보여줍니다. 여기에서 자체 목적을 위해 다른 파일을 생성합니다. 즉, GraphQL 작업 및 서버 스키마와 같은 문제로 분할됩니다.

# Endpoint API, the following URL is a example
schema: https://countries-274616.ew.r.appspot.com/graphql/
overwrite: true
# Format files
hooks:
  afterAllFileWrite:
    - prettier --write
generates:
  # Get schemas from server
  src/queries/autogenerate/schemas.tsx:
    documents: 'src/queries/**/**.gql'
    plugins:
      - typescript
  # Create operations based on queries
  src/queries/autogenerate/operations.tsx:
    documents: 'src/queries/**/**.gql'
    preset: import-types
    presetConfig:
      typesPath: ./schemas
    plugins:
      - typescript-operations
  # 1. Export GraphQL documents
  # 2. React interface
  src/queries/autogenerate/hooks.tsx:
    documents: 'src/queries/**/**.gql'
    preset: import-types
    presetConfig:
      typesPath: ./operations
    plugins:
      - typescript-react-apollo
    config:
      # Optionals
      withHOC: false
      withComponent: false
      withHooks: true

또한 스크립트를 추가하여 스키마를 생성하고 package.json에서 파일이 변경되는 것을 살펴보겠습니다.

"scripts": {
  ...
  "schemas": "graphql-codegen --config codegen.yml",
  "schemas:watch": "npm run schemas -- --watch",
},

그리고 에디터 코드에서 알 수 있듯이:


React 상위 구성 요소 생성, Gatsby 통합, 파일을 더 예쁘고 린트하는 것과 같은 다양한 목적을 위해 많은 플러그인, 사전 설정, 통합 및 구성이 있으므로 이것은 가능한 사용 방법 중 하나일 뿐입니다. 것들. 언제든지 문서here를 확인하십시오.

위의 코드를 사용하여 저장소를 사용할 수 있도록 만들었습니다check it out here.


danilowoz.com에 원래 게시됨