🤖
Next.js の API Routes の機能を利用して Apollo Server を起動する方法
やりたいこと
Next.js の API Routes の機能を利用して Apollo Server を起動したい
達成条件
今回の記事のゴールは、以下のように設定します。
http://localhost:3000/api/graphql で GraphQL の Playground を起動できること
前提条件
- "next": "13.0.5"
- "react": "18.2.0"
- "react-dom": "18.2.0"
実現までのステップ
全体像
- Apollo Server を動かすのに必要なパッケージを追加する
- Next.js と Apollo Server を繋げるためのパッケージを追加
- pages / api / graphql.ts を新規作成して Apollo Server を動かす
-
http://localhost:3000/api/graphqlにアクセスする
① Apollo Server を動かすのに必要なパッケージを追加する
yarn add @apollo/server graphql graphql-tag
② Next.js と Apollo Server を繋げるためのパッケージを追加
Next.js のエンドポイントと Apollo Server を繋げるために apollo-server-integration-next というパッケージを追加します。「Next.js API Routes Apollo Server」などのワードでググってみると、apollo-server-micro を使用した記事がヒットしますが、このパッケージは deprecated になっているため、apollo-server-integration-nextを使用するようにします。
yarn add @as-integrations/next
③ pages / api / graphql.ts を新規作成して Apollo Server を動かす
apollo-server-integration-next | README.md に書かれている通りにファイルを作成
// pages / api / graphql.ts
import { ApolloServer } from '@apollo/server';
import { startServerAndCreateNextHandler } from '@as-integrations/next';
import { gql } from 'graphql-tag';
const resolvers = {
Query: {
hello: () => 'world',
},
};
const typeDefs = gql`
type Query {
hello: String
}
`;
const server = new ApolloServer({ resolvers, typeDefs });
export default startServerAndCreateNextHandler(server);
④ http://localhost:3000/api/graphql にアクセスする
実際に GraphQL Playground を起動することができました。クエリも実行できます。
curlコマンド経由でもクエリを実行できました。
curl -X POST -H 'Content-Type: application/json' -d '{"query": "query { hello }"}' http://localhost:3000/api/graphql | jq
# {
# "data": {
# "hello": "world"
# }
# }
Discussion