我可以通过apollo-graphql-studio成功查看我的GraphQL query：resolver配置正确，但我不确定如何呈现数据。
我知道next-jsswrreact-hook是高性能的，所以我想通过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>
  );
}

这只是返回loading...，因此数据显然没有正确获取。但是，正如我所说，我可以通过Apollo-graphql-studioIDE检索它。
控制台错误是API路由上的400 Bad Request：/api/graphql，所以这就是问题所在。

如何渲染数据？

下面是GraphQL API：

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)
})