実現したいこと
-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
0 コメント