我正在使用next.js带有反应钩子的阿波罗。
对于一页，我在服务器端渲染前X个“帖子”，如下所示：
// pages/topic.js
const Page = ({ posts }) => <TopicPage posts={posts} />;
Page.getInitialProps = async (context) => {
const { apolloClient } = context;
const posts = await apolloClient.query(whatever);
return { posts };
};
export default Page;
然后在组件中，我想使用useQuery钩子：
// components/TopicPage.js
import { useQuery } from '@apollo/react-hooks';
export default ({ posts }) => {
const { loading, error, data, fetchMore } = useQuery(whatever);
// go on to render posts and/or data, and i have a button that does fetchMore
};
请注意，useQuery这里执行的查询与我在服务器端为获取该主题的帖子所做的查询基本相同。
这里的问题是，在组件中，我已经从服务器传入了第一批帖子，因此实际上我不想再次获取第一批帖子，但是我仍然希望支持a的功能。用户单击按钮以加载更多帖子。
我考虑了useQuery在此处进行调用的选项，以使其从带有查询的帖子的第二个“页面”开始，但是我实际上并不想要这样。我希望主题页面在页面加载后立即完全加载我想要的帖子（即来自服务器的帖子）。
useQuery在这种情况下可以工作吗？还是我需要避开它以获取一些有关对apollo客户端（来自useApolloClient）的手动查询调用的自定义逻辑？
事实证明，这只是我对nextjs服务器端渲染工作方式的误解。在将结果html发送到客户端之前，它会完整渲染React树。因此，不需要进行“首次”
useQuery调用getInitialProps或进行任何此类操作。它只能在组件中单独使用，只要getDataFromTree在服务器端配置中正确使用，一切都可以正常工作。