Next.js Apollo Server using apollo-server-micro@3

_app.tsx

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client'

const client = new ApolloClient({
  uri: '/api/graphql',
  cache: new InMemoryCache(),
})

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
  )
}

export default MyApp

client.tsx

import { gql, useQuery } from "@apollo/client";
import { NextPage } from "next";

const SAY_HELLO = gql`
  query SayHello {
    sayHello
  }
`

const Client: NextPage = () => {
  const {data} = useQuery(SAY_HELLO)

  return (
    <main>
      {JSON.stringify(data)}
    </main>
  ) 
}

export default Client

graphql.ts

import { ApolloServer, gql } from 'apollo-server-micro'
import type { NextApiRequest, NextApiResponse, PageConfig } from 'next'

const typeDefs = gql`
  type Query {
    sayHello: String
  }
`

const resolvers = {
  Query: {
    sayHello() {
      return 'Hello World!'
    },
  },
}

const apolloServer = new ApolloServer({ typeDefs, resolvers })
const handler = apolloServer.start()
  .then(() => apolloServer.createHandler({ path: '/api/graphql' }))

export default async function (req: NextApiRequest, res: NextApiResponse) {
  if (process.env.NODE_ENV === 'development') {
    res.setHeader('Access-Control-Allow-Origin', '*')
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type')

    if (req.method === 'OPTIONS') {
      res.status(200).end()
      return
    }
  }

  await (await handler)(req, res)
}

export const config: PageConfig = {
  api: {
    bodyParser: false,
  },
}