はじめに
この記事はチュートリアルではなく、最終的なゴールがあってその途中過程のメモです。
読みづらいところもあるかもしれませんが、ご了承ください。
最終的なゴール
以下のような構成のアプリを作ることです。
目的
- 仕事で使っている技術のキャッチアップと復習
- 使う可能性がある技術の理解度向上
過程
以下の開発環境の構築は行ったものとします
- Next.js導入
- Hasura導入
Hasuraに関しては、以下の記事をはじめ何記事かにわたって、導入までの紹介しております。
apollo導入
Next.js導入終わったら、apolloに関するパッケージをインストールしました。
yarn add @apollo/client graphql @apollo/react-hooks cross-fetch @heroicons/react
heroiconsとかは若干関係ないのですが使用するので一緒に yarn add しています。
GraphQL
データ型を自動生成するcodegenを導入
yarn add -D @graphql-codegen/cli
続いて初期化
yarn graphql-codegen init
すると、設定値をインタラクティブに決めていきます。
自分が設定した過程は以下
yarn graphql-codegen init
yarn run v1.22.17
warning ../../package.json: No license field
$ /Users/ryosuke/Project/nextjs-hasura-basic-lesson/node_modules/.bin/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) https://ryosuketter-hasura-test.hasura.app/v1/graphql
? Where are your operations and fragments?: queries/**/*.ts
? Pick plugins: TypeScript (required by other typescript plugins), TypeScript Operations (operations a
nd fragments), TypeScript React Apollo (typed components and HOCs)
? Where to write the output: types/generated/graphql.tsx
? Do you want to generate an introspection file? No
? How to name the config file? codegen.yml
? What script in package.json should run the codegen? gen-types
Fetching latest versions of selected plugins...
Config file generated at codegen.yml
$ npm install
To install the plugins.
$ npm run gen-types
To run GraphQL Code Generator.
✨ Done in 297.49s.
Hasuraの導入をあらかじめ行ったので、schemaの場所を尋ねられても、GraphQL の Endpointを設定することができます。
下記は既にHerokuを使って本番環境にデプロイされております。
Where are your operations and fragments?
こちらに関して
まず、codegenというのは、Projectの中に定義されているクエリの内容を読んで自動的に解析を行います。
この質問は、クエリの内容がどの場所にあるかを聞かれています。
その場所が
queries/**/*.ts
ということです。サブフォルダも含めてここにありますよ。という意味です。
? Where to write the output: types/generated/graphql.tsx
型を自動生成したファイルの出力先とその回答です。
? What script in package.json should run the codegen? gen-types
codegen実行スクリプト名の定義ですね。gen-typesにしたので
yarn gen-types
とすれば、型の自動生成が始まります。
あとは、
yarn
すれば、これまでの設定した内容がインストールされます。
codegenのTSモジュールもインストール
yarn add -D @graphql-codegen/typescript
場所/queries/queries.tsに、以下の内容のクエリを作成します。
基本的にはHasuraの管理画面でほぼ自動作成してくれました。
- GET_USERS: ユーザー一覧を取得するクエリ（サーバーサイドから）
- GET_USERS_LOCAL： ユーザー一覧を取得するクエリ（クライアント、つまりキャッシュから）
- GET_USERSIDS: ユーザーidをGETするクエリ
- GET_USERBY_ID: idから1ユーザーをGETするクエリ
- CREATE_USER: ユーザー作成のクエリ
- DELETE_USER: ユーザー削除のクエリ
- UPDATE_USER: ユーザー情報更新のクエリ
import { gql } from '@apollo/client'
export const GET_USERS = gql`
query GetUsers {
users(order_by: { created_at: desc }) {
id
name
}
}
`
export const GET_USERS_LOCAL = gql`
query GetUsers {
users(order_by: { created_at: desc }) @client {
id
name
}
}
`
export const GET_USERSIDS = gql`
query GetUserIds {
users(order_by: { created_at: desc }) {
id
}
}
`
export const GET_USERBY_ID = gql`
query GetUsersById($id: uuid!) {
users_by_pk(id: $id) {
id
name
created_at
}
}
`
export const CREATE_USER = gql`
mutation CreateUser($name: String!) {
insert_users_one(object: { name: $name }) {
id
name
created_at
}
}
`
export const DELETE_USER = gql`
mutation DeleteUser($id: uuid!) {
delete_users_by_pk(id: $id) {
id
name
created_at
}
}
`
export const UPDATE_USER = gql`
mutation UpdateUser($id: uuid!, $name: String!) {
update_users_by_pk(pk_columns: { id: $id }, _set: { name: $name }) {
id
name
created_at
}
}
`
クエリに対して、TSに必要な型の自動生成を、先ほど用意した
yarn gen-types
を実行します。
クエリ名が被ってるので、GET_USERS_LOCALだけコメントアウトしました。
自動生成は完了すると、自分が設定した箇所に、以下のファイルが生成されました。
types/generated/graphql.tsx
これで、クエリの型の自動生成が完了しました！
本日は以上です。