服务器端渲染后的useQuery

Question

我正在使用 next.js 和带反应挂钩的 apollo。

对于一个页面，我在服务器端渲染第一个 X "posts" 像这样：

// 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 执行的查询与我在服务器端为获取该主题的帖子而执行的查询基本相同。

这里的问题是，在组件中，我已经有从服务器传入的第一批帖子，所以我实际上不想再次获取第一批帖子，但我仍然想支持用户点击按钮加载更多帖子的功能。

我考虑过在此处调用 useQuery 的选项，以便它从带有查询的第二个 "page" 帖子开始，但我实际上并不想要那样。我希望主题页面在页面加载后立即完全加载我想要的帖子（即来自服务器的帖子）。

在这种情况下，useQuery 可以工作吗？或者我是否需要避开它以围绕手动查询调用 apollo 客户端（来自 useApolloClient）的一些自定义逻辑？

Answer 1

事实证明，这只是我对使用 nextjs 进行服务器端渲染的方式的误解。在将结果 html 发送给客户端之前，它会完整渲染 React 树。因此，不需要在 getInitialProps 中调用 "first" useQuery 或类似的任何东西。它可以单独在组件中使用，只要 getDataFromTree 在服务器端配置中正确使用，一切都会正常工作。

服务器端渲染后的useQuery

useQuery after server-side rendering

javascript

apollo

next.js

react-apollo

apollo-client