使用Next.js x URQL来使用GraphQL Code Generator

这是什么？

由於個人興趣，我開始學習GraphQL，現在我想將導入手順記錄下來。

如果这篇文章能帮助那些想要入门GraphQL和URQL的人，我会感到非常高兴。

这篇文章的目标

我们的目标是理解以下内容。

URQLを用いてGraphQLコードの自動生成が行えるようになること

这篇文章没有提到的内容 (Zhè tí de

• NestJSのGraphQL Server設定方法

• NestJS側のSchema作成方法

モノレポ環境の設定方法

引入

立即就开始吧。

如果您参考上面的实际代码，就会明白我们将在以下环境中进行实施。

1. 安装必需的软件包

首先我们将引入GraphQL Code Generator的命令行工具（以下简称codegen）来自动生成代码。

命令行界面的安装

$ npm install @graphql-codegen/cli

请参考以下内容。

安装用于URQL代码生成的包裹

$ npm install @graphql-codegen/typescript
$ npm install @graphql-codegen/typescript-operations
$ npm install @graphql-codegen/typescript-urql

请提供一下参考。

2. 初始化codegen并执行自动生成

执行初始化

$ npx graphql-codegen init

$ npm run install # 選択したプラグインをインストール

以下是您输入的 graphql-codegen init 的内容。

➜  web git:(main) ✗ npx graphql-codegen init                        

    Welcome to GraphQL Code Generator!
    Answer few questions and we will setup everything for you.
  
? What type of application are you building? Application built with React
? Where is your schema?: (path or url) ../api/src/schema.gql
? Where are your operations and fragments?: src/**/*.graphql
? Pick plugins: TypeScript (required by other typescript plugins), TypeScript Operations (operations and fragments), TypeScript React Apollo (typed components and HOCs)
? Where to write the output: src/generated/graphql.tsx
? Do you want to generate an introspection file? Yes
? How to name the config file? codegen.yaml
? What script in package.json should run the codegen? generate

代码的自动生成。

如果正常生成，会显示如下内容。

$ npm run generate                                  

> project-name@0.1.0 generate
> graphql-codegen

  ✔ Parse configuration
  ✔ Generate outputs

创建用于确认操作的页面。

我将尝试使用自动生成的代码进行运行验证。

这次我们创建了以下类型的API。

# ------------------------------------------------------
# THIS FILE WAS AUTOMATICALLY GENERATED (DO NOT MODIFY)
# ------------------------------------------------------

"""
A date-time string at UTC, such as 2019-12-03T09:54:33Z, compliant with the date-time format.
"""

type HealthCheck {
  message: String!
}

type Query {
  healthCheck: HealthCheck!
}

调用HealthCheck后，返回一个简单的响应，字符串为”healthy”。

自动生成的codegen.yaml内容如下，该内容是在初始化codegen时自动创建的。

overwrite: true
schema: "../api/src/schema.gql"
documents: "src/graphql/**/*.graphql"
generates:
  src/generated/graphql.tsx:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-urql"
  ./graphql.schema.json:
    plugins:
      - "introspection"

npm run generate命令生成的代码在这里。

import gql from 'graphql-tag'
import * as Urql from 'urql'
export type Maybe<T> = T | null
export type InputMaybe<T> = Maybe<T>
export type Exact<T extends { [key: string]: unknown }> = {
  [K in keyof T]: T[K]
}
export type MakeOptional<T, K extends keyof T> = Omit<T, K> & {
  [SubKey in K]?: Maybe<T[SubKey]>
}
export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & {
  [SubKey in K]: Maybe<T[SubKey]>
}
export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
/** All built-in and custom scalars, mapped to their actual values */
export type Scalars = {
  String: string
}

export type HealthCheck = {
  __typename?: 'HealthCheck'
  message: Scalars['String']
}

export type Query = {
  __typename?: 'Query'
  healthCheck: HealthCheck
}

export type HealthCheckQueryVariables = Exact<{ [key: string]: never }>

export type HealthCheckQuery = {
  __typename?: 'Query'
  healthCheck: { __typename?: 'HealthCheck'; message: string }
}

export const HealthCheckDocument = gql`
  query HealthCheck {
    healthCheck {
      message
    }
  }
`

const HealthCheck: NextPage = () => {
  // HealthCheck APiの呼び出し
  const [result] = useHealthCheckQuery()

  if (!result.data) {
    return <Text>Error Occurred</Text>
  }

  const message = result.data.healthCheck.message

  return <Text>{message}</Text>
}

export default HealthCheck

闲话

由于以前大多数情况下都使用NoSQL，所以我没有接触过GraphQL，但是当我开始使用关系型数据库时，我觉得这已经成为不能缺少的东西了。

我打算继续学习并写文章以不断重复。

再见！

请看以下参考文章。