Next.js + Apollo Client + Hasuraのテンプレート

リポジトリのURL

構成要素

• TypeScript
• next.js(React フレームワーク)
• apollo/client(graphql クライアント)
• graphql-codegen(graphqlAPI を呼び出すコードを生成する)
• hasura(graphql サーバー)
• PostgresSQL(DB、graphql バックエンドとして使用)
• eslint(lintツール)
• prettier(コードフォーマッター)

初回準備

• yarn install
• VS Codeに以下のextensionを追加
  1. ESLint
  2. Prettier

使い方

1. yarn run devでnext.jsのサーバを起動
2. docker-compose upでhasuraとPostgresSQLを起動
3. yarn hasura console --project hasuraでhasuraのGUIコンソールを起動

TypeScript

• tsファイルの中で、@でsrc/以下にアクセスできる
  • 例: import hoge from "@/libs/hoge"

next.js

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

VS Code

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