🚀

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

2023/01/08に公開約1,200字

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

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

やり方は単純でこちらのライブラリを使えば良いみたいです。
https://www.npmjs.com/package/@as-integrations/next

使い勝手は変わらず 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 について初めて調べた時のスクラップも置いておきます。
https://zenn.dev/yu_undefined/scraps/1da167ef8009a6

参考

https://stackoverflow.com/questions/74865910/upgrading-from-apollo-server-micro-to-apollo-server-4

https://github.com/apollo-server-integrations/apollo-server-integration-next#readme

Discussion

ログインするとコメントできます