GraphQLのエンドポイントを追加してクエリを動かしたい

実現したいこと

-Next.jsをベースにして、ApolloClient,ApolloServer,Prisma,DB（supabase:postgres)を組み合わせて簡易的なCRUDアプリを作りたい

発生している問題・エラーメッセージ

GraphQLのエンドポイントを追加してクエリを実行したところ、chrome検証ツールのネットワークタブのところで「POST body missing, invalid Content-Type, or JSON object has no keys.」となります。

リクエストメソッド:POST
エラーコード：400 Bad Request

エラーによると、

・POSTのリクエストボディがない
・Content-Typeが適正ではない（application/jsonではない）
・Jsonにkeyがない

のどれかが原因ということで検証したのですが、解決するに至っていません。
見落としがあればご教示頂けますと幸いです。

POST body missing, invalid Content-Type, or JSON object has no keys.

試したこと

・POSTのリクエストボディがない、Content-typeが適正ではない、Jsonにkeyがない

→以下の画像にあるようにリクエストボディは存在します。また、Content-typeについてもapplication/jsonで設定されています。
（ApolloClientが勝手にapplication/jsonで設定してくれるものと認識しています）、Jsonのキーについても存在しているように見えます。

apollo studioを

http://localhost:3000/api/graphql

で立ち上げるとDocumentationにbillsのクエリが登録されていません。
schema.tsにて正しく構成できていないということなのでしょうか？

該当のソースコード

prisma/apollo.ts

import { ApolloClient, InMemoryCache } from '@apollo/client' const apolloClient = new ApolloClient({ uri: 'http://localhost:3000/api/graphql/', cache: new InMemoryCache() }) export default apolloClient

prisma/prisma.ts

import { PrismaClient } from "@prisma/client"; declare global { var prisma: PrismaClient | undefined } export const prisma = global.prisma || new PrismaClient({ log: ['query'] }) if( process.env.NODE_ENV !== 'production')global.prisma = prisma

resolver.ts

export const resolvers = { Query: { bills: () => { return [ { id: 1, table: 'test-B', basic_cource:'test_a', numberOfGuest: 1, orderId: 1, extensionId: 1, nominationId: 1, bill_total: 100 }, ] } } }

schema.ts

import { gql } from 'apollo-server-micro' export const typeDefs = gql` type Bill { id: Int, table: String, basic_cource:String, numberOfGuest: Int, orderId: Int, extensionId: Int, nominationId: Int, bill_total: Int } type Query { bills: [Bill]! } `

pages/api/graphql.ts

import { ApolloServer } from 'apollo-server-micro' import { typeDefs } from '../../graphql/schema' import { resolvers } from '../../graphql/resolver' import Cors from 'micro-cors' const cors = Cors() const apolloServer = new ApolloServer({ typeDefs, resolvers }) const startServer = apolloServer.start() export default cors(async function handler(req, res) { if (req.method === 'OPTIONS') { res.end() return false } await startServer console.log('started') await apolloServer.createHandler({ path: '/api/graphql', })(req, res) }) export const config = { api: { bodyParser: false, } }

補足情報（FW/ツールのバージョンなど）

apollo server v3
apollo client 3.7.16
graphql 16.7.1
next.js 13.4.7