问题标签 [swr]

在我的 next.js 应用程序中，我使用 swr 挂钩，因为它提供缓存和实时更新，这对我的项目（facebook 克隆）来说非常棒，但是，有一个问题。

问题是，在我的出版物中，我将它们与 getStaticProps 一起获取，并且我只是映射数组和一切都很好，但是，当我做一个动作时，比如喜欢一个帖子，或者评论一个帖子，我改变了缓存，我认为这样做是询问服务器缓存中的信息是否正确。

但是，它真正的作用是，它进行了另一个 API 调用，问题在于，如果我喜欢一个出版物，在调用 API 以确保缓存中的所有内容都正确之后，如果有是 30 个新出版物，它们将出现在屏幕上，我不希望这样，我希望屏幕上的用户在开始时请求的 pubs，想象评论一个帖子，然后有 50 个新帖子，所以你失去了帖子你评论的地方...

让我给你看一点我的代码。

首先，让我向您展示我的帖子界面

这是我打电话来获取所有帖子的地方

例如，这就是我创建评论、更新缓存、调用 API、然后变异以查看数据是否正确的方式

现在，正如我已经提到的，在创建评论之后，它会再次调用 API，如果有新帖子或其他内容，它将出现在屏幕上，我只想保留我拥有的帖子或添加新帖子如果我是创造它们的人。

所以，假设我会喜欢一个帖子

一切都很棒而且很快，但是，在确保数据正确之后，会出现另一个帖子，因为另一个用户创建了它

有没有一种方法可以确保数据是正确的，而无需再次调用将在屏幕上添加更多帖子的 API？

我是这个 swr 钩子的新手，所以，希望你能帮助我，感谢你的时间！

更新

有一种无需重新获取即可更新缓存的方法

许多 POST API 只会直接返回更新后的数据，因此我们不需要再次重新验证。这是一个显示“本地变异 - 请求 - 更新”用法的示例：

但是，我不知道我应该如何更改我的代码来实现这个，任何想法！？

我被问到一个关于 SWR“加载”状态的问题：

如何在不同的 URL 获取之间从 SWR 创建加载状态？

他们的文档使它看起来直截了当：

然而，这个逻辑在第一次渲染钩子/组件后似乎失败了。在第一个渲染数据是undefined. 然后加载，数据成为 UI 中消耗的值。

假设我id通过 UI 更改并希望显示加载指示器。因为datais no longer undefined，所以同样的逻辑失败了。

有一个额外的项目返回isValidating。所以我更新了我的逻辑：

但是，在以下情况下可能会出现这种情况：

有请求或重新验证加载。

所以理论上其他东西会导致我的组件重新渲染。这可能会无意中导致“重新验证”并显示触发加载状态。这可能会意外地暂时破坏 UI。

那么如何在不重新验证的情况下在 URL 更改之间推导出“加载”？我正在尝试复制 graphQL Apollo Client 如何返回const { loading, error, data } = useQuery(GET_DOGS);

当用户在输入搜索中键入一些文本时 data-testid = 'loading' 必须删除，现在控制台返回 Unable to find an element by: [data-testid="loading"] 有人可以建议我用 swr 或建议编写测试对我来说如何模拟来自 swr 的响应

这是我的组件文件

这是我的测试文件

我在使用 useSWR 钩子时遇到问题，要么是由于在多个位置 onMount 被触发而获取太多次，要么是因为它第一次没有在 onMount 上运行而失败。

我的想法是简单地检查 fetcher 内的缓存，看看在刷新间隔内是否已经有一个值，然后将它发送回来，这似乎有效，但我不能 100% 确定它是否会在 mutate 后按我的意图工作被外部调用......我是否忽略了为什么我不应该使用这种方法？

基本上 mutate(url) 如果在刷新间隔内调用它，它将变得与 mutate(url, false) 相同，我认为这很好，但理想情况下我希望它正常工作。

我尝试过的选项都是：

refreshInterval：RefreshInterval， revalidateOnMount：false， revalidateOnFocus：false， revalidateOnReconnect：false， refreshWhenOffline：false， refreshWhenHidden：false

或允许 revalidateOnMount 但再次尝试 onError 但两种解决方案似乎都没有按计划工作，即如果缓存数据在刷新间隔内，则使用缓存数据。

在 SWR 中，一旦我收到获取结果，我想将它作为道具传递给子组件。钩子定义为：

在 Home 组件中使用如下：

这正在创建某种无限循环，并且 SWR 总是很忙。我是否需要在该子组件中单独调用 SWR 而不是将其作为道具传递？

api根据任意周期返回日志记录

查询字符串（SWR 的键）由用户输入构成。

请求被重复执行。用户可能希望在几天后重新访问先前加载的数据或更改 priod。

因此，结果可能会在浏览器缓存中累积和累积。我担心如果不加以检查，它很容易超过浏览器或操作系统设置的任何限制。

我是否需要尽早采取行动并跟踪请求的内容并根据某些规则清除缓存的数据。如果是这样，更好的方法是什么？

我应该提供自定义缓存实现还是图书馆有一些工具？

我正在尝试使用SWR librarywith react 钩子执行删除请求。我知道不能在 return() 中调用钩子。但是如何在我的反应钩子项目中使用 useSWR 删除请求。谢谢你

错误 ：

我正在使用SWR 来获取文档中所述的数据：

就我而言，唯一的区别是我在同一页面上加载了更多项目（所以更像是无限滚动而不是分页），但问题是：

pageIndex请注意如何根据来自状态的变量获取数据。一旦它改变了一切重新渲染，所以每次用户点击按钮时我总是得到刷新，而不是获得更多项目，然后用户看到初始渲染，然后是新项目。所以简而言之，我想在页面底部加载更多项目，而不是刷新所有内容然后添加项目......我错过了什么？有 useSWRInfinite，但它是同样的故事，它从状态获取 url 数据......

我最近一直在测试Vercel 的 SWR，它看起来是 Next.js 数据获取的最佳库。我在让它与 TypeScript 一起工作时遇到了一些麻烦。

正如在文档中我正在尝试使用以下代码构建一个无限加载器：

但我收到了这些错误：

其余的论点似乎都存在，只有最后两个不存在。我在这里想念什么？没有 TypeScript 也能正常工作。我有最新版本的 Next 和 SWR。我试过按照教程添加 getKey 函数，但没有运气，总是会出现错误。

有什么提示吗？

我正在 NextJS 中使用 SWR 和 API 路由查询 Mongodb Atlas 集合。我希望能够动态更改 API 中的过滤器查询变量。一个用例可能是用户选择查看某些属性，我们需要根据用户的偏好过滤搜索结果。

有没有办法将这些变量传递给 API，或者有没有一种简单的方法来实现这个功能？

这是基本页面代码，swr调用API的地方

这是API