使用 Apollo GraphQL 和 SSR NextJS 页面对数据进行分页

Question

我正在使用 Next.js v14、graphql、ApolloClient 和 ApolloGraphQL 对 NextJS 的实验支持

{
    "@apollo/client": "^3.12.0-rc.3",
    "@apollo/experimental-nextjs-app-support": "^0.11.6",
}

到目前为止，我一直在关注这篇关于如何将 ApolloClient 与 NextJS v13+ 一起使用的博客文章 https://www.apollographql.com/blog/how-to-use-apollo-client-with-next-js-13。

我正在尝试制作一个展示用户帖子的 SSR 首页。它是分页的，这样 它最初加载 X 数量，然后如果用户选择加载更多，则加载更多。

但是，我对如何实现分页感到困惑。查看有关分页的文档 https://www.apollographql.com/docs/react/pagination/core-api#the-fetchmore-function。

很容易理解，但是，它使用的是

useQuery

中的

@apollo/client

，它只能工作 关于企业社会责任组件。因为我的页面是SSR，所以使用第一篇博客的代码，我必须使用

getClient().query()

，但是这个响应结果上没有任何

fetchMore()

方法。我实现了一个我认为可行的

fetchMore

函数，但由于页面是 SSR，所以按钮不能有

onClick

处理程序。我错过了什么吗？解决办法是什么？我想将数据的检索保留在服务器上。

这是我的相关代码：

import { getClient } from '@/lib/apollo';
import { gql } from '@apollo/client';

const GET_ALL_POSTS = gql`
    query GetAllPosts($limit: Int!, $cursor: String) {
        posts(limit: $limit, cursor: $cursor) {
            posts {
                id
                title
            }
            hasMore
        }
    }
`;

export const revalidate = 0;

export default async function Home() {
    const queryResult = await getClient().query({
        query: GET_ALL_POSTS,
        variables: {
            limit: 10,
        },
    });

    // irrelevant code for handling loading state

    const data = queryResult.data?.posts;

    // example idea for fetching more, but can't have onClick for buttons with SSR
    async function fetchMore() {
        await getClient().query({
            query: GET_ALL_POSTS,
            variables: {
                limit: 10,
                cursor: data.posts[data.posts.length - 1].createdAt,
            },
        });

        getClient().cache.writeQuery({
            query: GET_ALL_POSTS,
            data: {
                posts: {
                    posts: [...data.posts, ...queryResult.data.posts.posts],
                    hasMore: queryResult.data.posts.hasMore,
                },
            },
        });
    }


    return (<div>
        // irrelevant code for showcasing posts
            {queryResult.data && data.hasMore && (
                <button
                    onClick={fetchMore}
                >
                    Load more
                </button>
            )}
    </div>);
}

我想即使我确实有可用的

fetchMore

调用，该按钮仍然无法调用它，因为它的 SSR 页面并且不能有

onClick

事件。因此，也许将其设为 CSR 页面才是正确的做法。有没有办法让所有查询都在服务器上运行？

Answer 1

这样的东西只能在客户端组件中工作 - 在你的 React Server 组件中，每个渲染都以一个完全空的缓存开始，该缓存不连接到任何先前的用户请求，并且正如你已经注意到的，你将非交互式 HTML 发送到浏览器。

也就是说，您可能没有任何真正的理由在这里使用 React 服务器组件 - 只需在客户端组件中使用

useSuspenseQuery

即可。客户端组件也在第一页加载时在服务器端呈现，但随后它们将在浏览器中继续交互。 （您链接到的 Nextjs/Apollo 包将确保浏览器中正确的水合作用）。

这可能就是您想要的。