GraphQLのコード生成を実装する

GraphQLのコード生成は、型の安全性、開発の高速化、開発者体験の向上など多くの利点を提供します。もともとGraphQLコード生成はJSS Next.jsアプリケーションに標準搭載されていました。しかし、JSSバージョン22.7.0以降、Next.jsスターターアプリケーションからこの要素は削除され、GraphQLコード生成の有無は個々の開発者に委ねられました。

この撤去の理由は二つあります。

• アプリケーションに自動GraphQLコード生成が必要でない場合、この機能を削除することでアプリの複雑さが軽減されます。
• 従来の方法は graphql-let パッケージに依存していましたが、現在はメンテナンスされておらず、そのためアプリにセキュリティ脆弱性を導入する可能性があります。

もしアプリで同様の機能を手動で実装したい場合は、以下の例でgraphql-codegenを使ってその方法を示しています。

graphql-codegenを用いたGraphQLコード生成を実装するには:

1. もしまだ存在していなければ、以下の開発依存関係をアプリのpackage.jsonファイルに追加し、npm installコマンドでインストールしてください。

   "graphql": "^16.11.0", "graphql-tag": "^2.12.6", "@graphql-codegen/cli": "^5.0.7", "@graphql-codegen/typescript": "^4.1.6", "@graphql-codegen/typescript-operations": "^4.6.1", "@graphql-codegen/typescript-react-query": "^6.1.1",

2. GraphQL内省データの取得を可能にするには、/scripts/fetch-graphql-introspection-data.tsファイルに以下の例スクリプトを追加してください:

   import { GraphQLRequestClient } from "@sitecore-jss/sitecore-jss-nextjs/graphql"; import fs from "fs"; import { getIntrospectionQuery } from "graphql";

   let jssConfig;

   // modify path the runtime config if needed jssConfig = require("../src/temp/config");

   console.log( `Fetch graphql introspection data from ${jssConfig.graphQLEndpoint}...` );

   const client = new GraphQLRequestClient(jssConfig.graphQLEndpoint, { apiKey: jssConfig.sitecoreApiKey, });

   client .request(getIntrospectionQuery()) .then((result) => { fs.writeFile( "./src/temp/GraphQLIntrospectionResult.json", JSON.stringify(result, null, 2) ); }) .catch((e) => { console.error(e); });

3. graphql-codegenを設定するには、アプリのルートに以下の内容を含むgraphql-codegen.ymlを作成します。

   overwrite: true # Overwrite existing files documents: 'src/**/*.graphql' # Adjust the path to your GraphQL documents schema: 'src/temp/GraphQLIntrospectionResult.json' # the path to your introspection result file generates: src/temp/graphql-types.ts: # The output file for generated types plugins:

   • 'typescript' # Generates TypeScript types for GraphQL operations
   • 'typescript-operations' # Generates TypeScript types for GraphQL operations
   • 'typescript-react-query' # Generates React Query hooks for GraphQL operations

4. 必要な型を含むsrc/temp/graphql-types.tsファイルを生成するために、以下のコマンドを実行してください。

   graphql-codegen --config graphql-codegen.yml