useSWR 与后端分页的集成

如何解决useSWR 与后端分页的集成

当页面更改时，会创建新查询并将其数据设置为initialData。 在这种情况下，用户会在获取新查询数据之前看到 initialData：

import React from "react";

import fetch from "../lib/fetch";
import useSWR from "swr";

function Component({ initialData }) {
  const [page,setPage] = React.useState(1);
  const { data } = useSWR(
    `/api/data?page=${page}`,{ initialData }
  );
  // ...
}
Component.getServerSideProps = async () => {
  const data = await fetch('/api/data?page=1');
  return { initialData: data };
};

我的问题是每次查询新数据时都使用 initialData 作为后备：

您对如何防止这种闪烁有什么想法吗？

解决方法

所以在 react-query 中，我认为有多种方法可以避免这种情况：

1. keepPreviousData: true

这是主要的分页方式，也体现在docs和examples中。

它将确保当查询键发生变化时，在进行新的获取时，前一个 queryKey 中的数据会保留在屏幕上。生成的对象将有一个 isPreviousData 标志设置为 true，以便您可以例如在转换发生时禁用下一个按钮或在它旁边显示一个小的加载微调器。在 ux 中，反应悬念将给我们带来什么（某个时候）是相似的。

2. initialData 函数

initialData 也接受一个函数，如果您不希望出现初始数据，您可以返回 undefined。您可以将其绑定到您的页面作为第一页，例如：

function Component({ initialData }) {
  const [page,setPage] = React.useState(1);
  const { data } = useQuery(
    ['page',id],() => fetchPage(id),{ initialData: () => page === 1 ? initialData : undefined }
  );
}

请记住，在过渡时您将有一个 loading 微调器，所以我认为这比方法 1 更糟糕。

3. 由于您的 initialData 来自服务器，您可以尝试对整个 queryClient 进行补水。见the docs on SSR。

---

initialData 与 keepPreviousData 配合得很好，因此这里是使用 initialData 的文档中示例的代码和框分支（解决方案 1）。我认为这是最好的选择：https://codesandbox.io/s/happy-murdock-tz22o?file=/pages/index.js