Puedo ver correctamente mi GraphQL query a través apollo-graphql-studio : el resolver está configurado correctamente, pero no estoy seguro de cómo representar los datos.

Sé que el next-js swr react-hook funciona, por lo que me gustaría obtener datos a través del método swr :

 import useSWR from "swr"; const Query = ` books { title } `; export default function Home() { const fetcher = async () => { const response = await fetch("/api/graphql", { body: JSON.stringify({ query: Query }), headers: { "Content-type": "application/json" }, method: "POST" }); const { data } = await response.json(); return data; }; const { data, error } = useSWR([Query], fetcher); if (error) return <div>failed to load</div>; if (!data) return <div>loading...</div>; return ( <div> <div>hello {data?.books?.title}</div> </div> ); }

Esto solo está volviendo a loading... por lo que los datos claramente no se obtienen correctamente. Aunque, como dije, puedo recuperarlo a través del IDE Apollo-graphql-studio .

El error de la consola es una 400 Bad Request en la ruta API: /api/graphql , por lo que aquí es donde está el problema.

¿Cómo puedo renderizar los datos?

Aquí está la API de GraphQL:

 import Cors from 'micro-cors' import { gql, ApolloServer } from 'apollo-server-micro' import { Client, Map, Paginate, Documents, Collection, Lambda, Get } from 'faunadb' const client = new Client({ secret: process.env.FAUNA_SECRET, domain: "db.fauna.com", }) export const config = { api: { bodyParser: false } } const typeDefs = gql` type Book { title: String author: String } type Query { books: [Book] } ` const resolvers = { Query: { books: async () => { const response = await client.query( Map( Paginate(Documents(Collection('Book'))), Lambda((x) => Get(x)) ) ) const books = response.data.map(item => item.data) return [...books] }, }, } const cors = Cors() const apolloServer = new ApolloServer({ typeDefs, resolvers, context: ({ req }) => { }, introspection: true, playground: true, }) const serversStart = apolloServer.start() export default cors(async (req, res) => { if (req.method === "OPTIONS") { res.end(); return false; } await serversStart; await apolloServer.createHandler({ path: '/api/graphql' })(req, res) })