NestJS x Apollo ClientでGraphQL Serverを建ててNext.jsで使えるようにする

mu-suke

まずはNext.js x Apllo Clientでクライアントから使用できるようにする

参考:

mu-suke

上記のドキュメント通りに動作できた

mu-suke

NestJS側のGraphQL設定はこの記事を参考にしたらできた

mu-suke

便利だ

GraphQL Code Generatorを使うと.graphqlファイルからTypeScript型定義を自動生成することができます
さらにApolloのPluginを使うことでBackendにリクエストを投げるReact Hooksも自動生成することができます

mu-suke

このページでNestJS側で作成したAPIの型とhooksを自動生成するところまではできた。

mu-suke

技術スタッツは以下

箇所	選定
フロントエンド	Next.js
サーバーサイド	NestJS
コード自動生成	GraphQL Code Gen
GraphQL Client	URQL

mu-suke

まずは以下でコードの自動生成のセットアップをする

必要なパッケージのインストール

npm install graphql
npm install @graphql-codegen/cli

初期化

npm run graphql-codegen init
npm run install # install the choose plugins

初期化時の入力内容

➜  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

mu-suke

次にURQLで使えるようにする

npm install @graphql-codegen/typescript-react-query
npm install @graphql-codegen/typescript
npm install @graphql-codegen/typescript-operations

mu-suke

URQL用のコード生成パッケージ

npm install @graphql-codegen/typescript-urql

mu-suke

codegen.yamlのplugin内のapollo-clientを以下のように書き換える

codegen.yaml

overwrite: true
schema: "../api/src/schema.gql"
documents: "src/**/*.graphql"
generates:
  src/generated/graphql.tsx:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-urql" # ここを書き換える
  ./graphql.schema.json:
    plugins:
      - "introspection"

mu-suke

コードの自動生成を実行

➜  web git:(main) ✗ npm run generate                            

> nextjs-sample-app@0.1.0 generate
> graphql-codegen

  ✔ Parse configuration
  ✔ Generate outputs

mu-suke

URQLパッケージのインストール

npm install --save urql graphql

mu-suke

Providerを記載する

_app.tsx

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Provider value={urqlClient}>
      <ChakraProvider>
        <Component {...pageProps} />
      </ChakraProvider>
    </Provider>
  )
}
export default MyApp

mu-suke

urqlでfetchするページを作成

health.tsx

const HealthCheck: NextPage = () => {
  const [result] = useHealthCheckQuery()

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

  const message = result.data.healthCheck.message

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

export default HealthCheck