⛄

Next * urql * code-genでフロント開発してみた際の備忘録

2023/02/03に公開

GraphQL

TL;DR

codegen.ts

import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  overwrite: true,
  schema: "../huyou-server/graph/schema.graphqls",
  documents: "graphql/**/*.graphql",
  generates: {
    "generated/graphql.ts": {
      plugins: [
        "typescript",
        "typescript-operations",
        "typescript-urql",
      ],
      config: { withHooks: true }
    },
    "./graphql.schema.json": {
      plugins: ["introspection"]
    }
  }
};

export default config;

これでうまいことcodegenできるようになるはず。

詰まったポイント

codegen.tsの設定がうまく噛み合わずにgenerateされたものをHookとして使用できていなかった。

原因としては
codegen公式サイトにある

codegen.ts

import type { CodegenConfig } from '@graphql-codegen/cli'
 
const config: CodegenConfig = {
   schema: 'https://localhost:4000/graphql',
   documents: ['src/**/*.tsx'],
   generates: {
      './src/gql/': {
        preset: 'client',
        plugins: []
      }
   }
}
export default config

このConfigを参照して、追加でPluginを導入していたから。
どうやらpreset: 'client'となっているのが不要だったみたい。

なぜ不要なのか、、

The client-preset provides typed GraphQL operations (Query, Mutation and Subscription) by perfectly integrating with your favorite GraphQL clients:
Google翻訳: client-preset は、お気に入りの GraphQL クライアントと完全に統合することで、型指定された GraphQL 操作 (クエリ、ミューテーション、およびサブスクリプション) を提供します。

つまり、graphql-clientに応じてよしなにやってくれるぞ。
ただ、なんか色々導入があり大変そうなので今回はこっちを使用するのをやめておきます。
興味がある人はぜひ

TL;DR

詰まったポイント

なぜ不要なのか、、

Discussion