问题标签 [react-query]

我需要react-query库的帮助。我获取一个对象列表，然后为每个需要从另一个服务获取额外数据的人。我应该如何使用 react-queryuseQuery钩子来做到这一点？

示例 1：

错误：

ESLint：useQuery不能在回调中调用 React Hook。React Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用。（反应钩子/钩子规则）

假设我有多个相关查询：

1. api/rewards/plan
2. api/rewards/achieved

突变后，我需要重新获取两个查询。
为上述查询构造查询键的推荐方法是什么，提供的查询键是queryCache.refetchQueries什么？

查询键参数的记录类型为：
queryKey: String | [String, Variables: Object] | falsy | Function => queryKey

这有意义吗？

1. useQuery(["rewards", {plan: true}], ...)
2. useQuery(["rewards", {achieved: true}], ...)
3. queryCache.refetchQueries("rewards")

谢谢

我react-query用来调用 API。该调用运行良好，每次在输入字段中更新查询值时都会执行该调用。
不幸的是，即使查询为空，它也会触发 API 调用。

例如，当用户加载应用程序时，输入（以及查询）将为空白。

如何仅在有查询时触发 API 调用？

代码

我是这个react-query库的新手。

我知道当我想获取数据时，使用这个库我可以做这样的事情：

有用。但是如何仅在单击按钮时触发数据获取？，我知道我可能可以做类似的事情<Button onPress={() => {useQuery(myKey, fetchData())}}/>，但是如何管理返回的数据和状态......

我有一个调用 API 的简单应用程序。我正在使用 react-query 进行提取并缓存数据。但是，即使该函数被包装在 中React.memo，也会useQuery无缘无故地导致多次重新渲染。它应该是 2 个渲染而不是 8 个。

我有一个调用 API 的简单应用程序。我正在使用 react-query 进行提取并缓存数据。但是如果你去网络改成慢3g，在它的状态改变后，它会调用API。文档声明react-query在第二次尝试中将返回缓存的数据。

在新项目中使用 react-query 并且有小问题。要求是在加载数据之前在空页面上显示加载微调器，而不是在用户使用不同查询获取新结果以显示微调器之前的结果之后。

第一种情况非常简单且有据可查：

但是，无法弄清楚第二种情况 - 因为，在查询更改后，react-query 会从 useQuery 获取新结果和数据是空的，因为结果我得到默认的空数组，在这种情况下属于该条件 -if (isLoading && !data.length )

因此，我将 useMutation 与表单一起使用，并尝试处理错误。当请求失败时，error变量不会更新，直到请求第二次失败。https://codesandbox.io/s/dazzling-dewdney-jodpp?file=/src/App.js是我所描述的一个例子。我对开发很陌生，所以您可以提供的任何帮助将不胜感激。:D

我在使用 react-query 时遇到问题。只要来自服务器的响应未经授权，useQuery 就会返回标志 status='success' 和 isError=false。服务器响应状态为 401，json 响应内容为{ error: true, message: 'UNAUTHORIZED' }. 我没有以任何方式自定义 react-query。

我没有使用ReactQueryConfigProvider，也没有在调用中传递任何选项来自定义行为。

这是电话：

这就是服务：

由于令牌无效，服务器正在响应 401 状态代码和我的自定义 json 响应。

这是来自 react-query 的数据和错误对象。

在我的 firestore 数据库中，我引用了 Meal 集合中的 Zutaten 集合。现在我尝试在我的列表组件中显示来自 Zutaten 集合的数据。我的第二个快照中的console.log('ingredient data: ', documentSnapshot.data())语句正常工作，并显示了 Zutaten 集合中的数据。但是我无法访问 useEffect 函数之外的数据，所以我认为我在 react-hooks 上犯了一个错误。我的代码：