🚀

Apollo Server の4系を Next.js の API Routes で動かす

2023/01/09に公開

GraphQL

Next.js で GraphQL を使いたいなと思って調べていたら、API Routes を使えるっぽかったのでさらに色々と調べてたところ、出てくる記事のほとんどが非推奨になった apollo-server-micro というライブラリを使っていました。

この記事では代替となる @apollo/server を使って Next.js の API Routes に立てるやり方を共有します（全然記事が見つからなくて調査にかなり時間を溶かしました...）

やり方は単純でこちらのライブラリを使えば良いみたいです。

使い勝手は変わらず startServerAndCreateNextHandler() 関数を噛ませれば良いみたいです。

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);

自分がかなり詰まったところなのでみなさんの助けになれば幸いです。

僕が GraphQL について初めて調べた時のスクラップも置いておきます。

Apollo Server の4系を Next.js の API Routes で動かす

参考

Discussion