问题标签 [swr]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
143 浏览

reactjs - 在 swr 中获取新数据时避免加载状态

每当我在 swr 中请求具有不同查询参数的新数据时(即单击上一个和下一个按钮),都会在我的代码中触发加载。这意味着数据似乎已被清除,然后被新数据替换。我怎样才能使旧数据被新数据替换,从而不触发加载?

组件.ts

任务服务.ts

0 投票
1 回答
529 浏览

javascript - 我可以将“useSWR”与内容客户端一起使用来创建分页吗?

我正在尝试使用 nextjs 和 useSWR 挂钩创建分页。

这就是我目前所做的,它似乎正在工作......但是我在文档中读到作为第一个参数传递的密钥应该是一个唯一的字符串(通常是一个 URL)。我只是通过索引来获取正确的数据。我的方法会破坏缓存吗?我不确定我这样做是否正确?

index.js

在我的page.js中

最后是fetcher.js

0 投票
4 回答
2844 浏览

reactjs - 设置状态时重新渲染过多 - useSWR

我正在使用useSWR来获取数据,然后使用数据,我想通过使用 reduce 来获得总数。如果我 console.log 输出它的值,它可以正常工作,但是一旦我尝试使用该值设置状态,我就会收到“Too may re-renders”消息。

0 投票
2 回答
66 浏览

reactjs - 我不想让未定义的值传递给组件

我正在使用swr。
swr中的数据类型是IAge| 不明确的。
我不想将 undefined 传递给 AgeComponent,所以我希望年龄的类型是 IAge。
由于在 AgeComponent Type 'IAge | 中不允许 undefined undefined' 不能分配给类型 'IAge'。类型“未定义”不可分配给类型“IAge”。t 错误

如果我不想在 AgeComponent 道具的年龄中允许未定义,我该怎么办?

0 投票
0 回答
139 浏览

reactjs - 删除后从屏幕上删除项目

我有这个与反应应用程序一起使用,但我将项目移植到 next.js 并且由于某种原因它不起作用。我正在使用SWR

自定义挂钩:

在我的页面

按钮:

不过,在 ui 方面绝对没有任何反应(记录在数据库中已删除)。单击删除并运行 deleteBooking 功能后,该记录应从屏幕上消失。

*如果我将它添加到我的 deleteBooking 函数中,它会显示正确的数据:

0 投票
2 回答
1483 浏览

reactjs - Calling multiple endpoints using NextJS and the SWR library

I am using the SWR library in my NextJS project and currently i am building out a dashboard. I want to hit multiple endpoints to get different data, but I can't find any reference of making multiple calls to endpoints using SWR.

The syntax i am using is as follows;

If i use the above code, it errors out saying that data has already been defined, but if i change data to something unique in each try, it doesn't work at all.

0 投票
1 回答
3373 浏览

javascript - 如何防止 react-query 最初获取但启用重新获取?

react-query v3.13用来从 API 获取数据。
我想要做的是从某个点(例如,单击开始按钮时)定期获取 API,而不是从调用 useQuery 时开始。

我尝试了以下方法。

  • enabled属性设置false为禁用自动查询,但它也禁用重新获取。
    我找不到将enabled属性重新启用/设置为true. 而且我不得不setTimeout自己使用定期重新获取。
  • 保留enabled属性,true但我找不到禁用初始提取的方法。

有没有合适的方法来做到这一点?

0 投票
2 回答
219 浏览

reactjs - 缓存问题:CDN 后面的 React + REST 服务器

我正在寻找一种模式,可以让我为我的用户改善 UX。我有一个在 CloudFront 后面运行的 REST 服务器,从前端的普通 React 应用程序中使用。

我将简化我的示例来说明我的问题。

我有一个名为GET /posts/<id>. 当浏览器请求它时,它带有一个max=age=180,这意味着它将存储在浏览器的缓存中,并且任何后续调用都GET /posts/<id>将在这 180 秒的持续时间内从浏览器的缓存中提供服务,之后它将再次访问 CDN 以尝试获取新副本。

这对大多数用户来说是可以的。我不介意任何帖子的更新在传播给所有用户之前延迟最多 3 分钟。但是有一个用户是这篇文章的作者。该用户可以使用PATCH /posts/<id>. 我们称该用户为 The Editor

这是我现在的一个场景:

  • 编辑器加载帖子页面,然后调用GET /posts/5
  • CDN 将最新的副本提供给前端。
  • 然后编辑器对帖子进行更改并将其提交到后端通过PATCH /posts/5.
  • 然后编辑器使用 Command-R(或 CTRL-R)刷新他的浏览器选项卡。
  • 结果,前端然后GET /posts/5再次请求 - 但从更改之前获取过时的副本,因为自上次以来还没有过去 180 秒,GET并且GETPATCH

我想要的体验是:

  • 编辑器加载帖子页面,然后调用GET /posts/5
  • CDN 将最新的副本提供给前端。
  • 然后编辑器对帖子进行更改并将其提交到后端通过PATCH /posts/5.
  • 在 Command-R 浏览器选项卡刷新后,无论在 180 秒内获得新副本之前,都会立即GET /posts/5返回带有编辑器所做更改的数据副本。PATCHttl
  • 至于其他用户,他们可以等待最多 180 秒,然后帖子中的更改才会传播给他们,当GET /posts/5

我正在使用 Axios,但我不认为 SWR 和 React-Query 支持突变。据我了解,这将允许编辑器为他刚刚PATCH'ed在服务器上的对象声明一个突变,以便他进行的任何后续调用GET /posts/5都将从那里得到服务,直到可以从后端获得更新的版本。

我的问题是:

  • 带有“突变”的 SWR 可以通过GET /posts/5透明的方式为突变对象服务吗?
  • 突变会在硬浏览器标签刷新后幸存下来吗?或浏览器关闭,重新打开和后续/GET posts/5
  • 是否有另一种模式/最佳实践来解决这个问题?
0 投票
1 回答
1769 浏览

reactjs - 调用 mutate 时 SWR 不会重新渲染

我正在尝试使用 SWR 和 SSR 创建带有分页的产品列表。为了做到这一点,我将初始数据传递给 SWR,当分页发生变化时,我调用一个 mutate 函数,绑定到第一个 SWR 请求。

问题是页面没有重新渲染,当我打印 mutate 函数的结果时,我看到数据已经改变,但是页面没有重新渲染,我不明白为什么。

代码

0 投票
1 回答
1429 浏览

reactjs - 处理自定义 SWR 挂钩中的错误

我编写了一个自定义钩子,它使用 SWR 从我的 API 中检索数据,同时为请求设置“身份验证”标头。

对于所有成功的请求,该钩子都可以正常工作,但我希望能够处理失败的请求(400 个状态代码)。

我可以使用结果访问状态代码,const res = await fetch(url但是如何将error参数中的错误返回给钩子的调用者?