在Next.js应用程序中,getServerSideProps执行在服务器端,在此期间无法直接使用Apollo Client进行查询,因为Apollo Client需要在客户端浏览器上执行。但是,您可以使用isomorphic-unfetch模块,在服务器端执行查询并返回结果。
以下是使用isomorphic-unfetch解决此问题的示例代码:
import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
import fetch from 'isomorphic-unfetch';
async function fetchData() {
const client = new ApolloClient({
ssrMode: true,
link: new SchemaLink({
schema: mySchema,
context: {},
}),
cache: new InMemoryCache()
});
const { data } = await client.query({
query: gql`
query MyQueryName {
// your query here
}
`
});
return data;
}
export async function getServerSideProps() {
const data = await fetchData();
return { props: { data } };
}
此代码将创建一个新的Apollo Client实例,并使用isomorphic-unfetch模块执行查询,并将数据作为prop传递给页面组件。