Next.js + Apollo Client + Hasura的模板

仓库的网址

构成要素

• TypeScript

• next.js(React フレームワーク)

• apollo/client(graphql クライアント)

• graphql-codegen(graphqlAPI を呼び出すコードを生成する)

• hasura(graphql サーバー)

• PostgresSQL(DB、graphql バックエンドとして使用)

• eslint(lintツール)

prettier(コードフォーマッター)

首次准备

• yarn install

VS Codeに以下のextensionを追加

ESLint
Prettier

使用方式

1. 使用yarn run dev命令启动next.js服务器。

使用docker-compose up命令启动hasura和PostgresSQL。

使用yarn hasura console –project hasura命令启动hasura的GUI控制台。

TypeScript – TypeScript

• tsファイルの中で、@でsrc/以下にアクセスできる

例: import hoge from “@/libs/hoge”

下一个.js

pagesディレクトリを削除し、src/pagesとsrc/componentsを追加

Visual Studio Code

保存時にコード整形が行われる