React（Next.js/GraphQL）和Hasura的集成过程备忘录
首先
这篇文章不是教程，而是关于最终目标并记录了中间过程的笔记。
可能有些地方阅读起来比较困难，请您谅解。
最终目标
我要创建一个类似如下结构的应用程序。
目标
-
- 仕事で使っている技術のキャッチアップと復習
- 使う可能性がある技術の理解度向上
过程
我們將假設已經完成了以下開發環境的搭建。
-
- Next.js導入
- Hasura導入
关于 Hasura，在以下的文章以及其他多篇文章中，我们进行了有关其介绍及安装的说明。
阿波罗引入
当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
这是定义code的执行脚本名称。我将其命名为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这个查询。
完成自动生成后，以下文件已在我设置的位置生成。
生成的/graphql.tsx文件的类型
用这个，查询类型的自动生成已经完成了！
今天就到这里吧。
