Next.jsとApolloとNexus.jsをつなげる

この記事について

この記事ではNext.jsのAPI Routeにapollo-server-micro@3を使ってApollo Serverを立て、さらにNexus.jsを使ってスキーマとリゾルバーを設定する方法について紹介します。関連リソースを下記に示します。

• ソースコード

関連記事を下記に示します。

• Next.js + Apollo

コーディングの準備

ターミナルで下記のコマンドを実行してコーディングの準備をします。

npx create-next-app --typescript next-apollo-nexus
cd next-apollo-nexus
npm install --save apollo-server-micro graphql nexus
mkdir api
touch api/schema.ts
mkdir api/graphql
touch api/graphql/index.ts
touch api/graphql/post.ts
touch pages/api/graphql.ts

コーディング

エディタで下記のファイルを開いて内容を入力します。

pages/api/graphql.ts

api/graphql/post.ts

api/graphql/index.ts

api/schema.ts

動作確認

ターミナルで下記のコマンドを実行してサーバーを起動します。

npm run dev

下記の2つのファイルが出力されていることを確認します。

• generated/nexus-typegen.ts
• generated/schema.graphql

generated/schema.graphqlの内容が下記と同じであることを確認します（generated/nexus-typegen.tsについては内容が多いので割愛します）。

http://localhost:3000/api/graphql にアクセスしてApolloのExplorerページにアクセスして下記のクエリを実行します。

query Query {
  drafts {
    id
    title
    body
    published
  }
}

クエリの実行結果が下記と同じであることを確認します。

{
  "data": {
    "drafts": [
      {
        "id": 1,
        "title": "title",
        "body": "body",
        "published": false
      }
    ]
  }
}

おわりに

Nexus.jsを使うことでGraphQLスキーマからバックエンド用のTypeScript型定義が自動生成されるのでとても便利です。Nexus.jsが自動生成する型定義についてはフロントエンドで利用できないこともないですがGraphQL Code Generatorを併用した方が良いと考えています。