我如何使用SWR来渲染数据从一个阿波罗服务器实例的GraphQL，在NextJS应用程序?

Question

我可以通过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)
})

Answer 1

这是我如何与阿波罗客户端:

import { ApolloClient, InMemoryCache, createHttpLink } from "@apollo/client";
const defaultOptions: any = {
watchQuery: {
fetchPolicy: "no-cache",
errorPolicy: "ignore",
},
query: {
fetchPolicy: "no-cache",
errorPolicy: "all",
},
};
const cache = new InMemoryCache({
resultCaching: false,
});

const link = createHttpLink({
uri: process.env.NEXT_PUBLIC_GRAPQL_URI,

});
export const client: any = new ApolloClient({

connectToDevTools: true,
link,
cache,
defaultOptions,
});

then in frontend:

const { data, error } = useSWR(MY_QUERY, query => client.query({ query }));

应该与阿波罗服务器相似