実際にクエリを実行してみるQueryMutationこの構成にして良かったことまとめはじめにこんにちは、NRIネットコムの辻下です。普段はアプリ担当エンジニアとして仕事をしています。ClientでWebアプリケーションでのデータフェッチを実装する機会がありましたので、今回はその実装方法について手短に書いていこうと思います。Router)言わずと知れたReactのフレームワークです。Routerのバージョンでの実装になります。ClientGraphQLのクライアントを実装するライブラリです。Routerで利用するためには別途下記プラグインも導入が必要です。npmこちらの利用方法については公式のブログポストがあります。今回の記事でもApolloの設定部分についてこの記事を参考にしています。BlogGraphQL-CodegenGraphQLクエリの実行部分のコードや型定義を自動生成してくれるツールです。the-guild.dev前提Next.jsアプリ、およびGraphQLバックエンドは構築済みとし今回は説明を省かせていただきます。型定義コードの自動生成GraphQL-Codegenを利用して、型定義のコードを自動生成します。graphql:generate*3で設定した出力先にcomponents.tsファイルが出力されていたらOK。設定した、バックエンドGraphQLスキーマ定義ファイルバックエンド側で定義したスキーマファイルのパスを設定します。submoduleでバックエンド側のソースをcloneしてきて、そこのschema.graphqlのファイルパスを指定する形で運用していました。中身はこちらの記事のようなものになります。APIを実施しています。GraphQL-Codegenで自動生成した型定義、クエリ文を使って実装しているのでスッキリ書けます。Componentでの実行例としています。関数を実行することで、Mutation実行後のデータの内容で画面を再レンダリングできます。ClientはGraphQLクライアントのライブラリとして一般的によく利用されていますし、状態管理機能など、今後の機能追加にも耐えうる多くの機能を備えたライブラリです。Routerについても、今後Next.jsではメインでメンテされていくバージョンになります。今回実装したシステムは今後の機能追加を前提としたプロジェクトだったため、将来的な機能追加、保守に耐えうる構成とすることができて良かったです。Routerで使う場合の日本語の記事が少なく、少し調査に苦労したためこの機会に記事を書かせていただきました。レポートNRIネットコムの岩﨑です。前回の新人ブログの執筆から早一年、あっという間に二年目になり、気が付いたら後輩が入って来ていました。STUDYこんにちは、ブログ運営担当の小野です。