问题标签 [react-query]

我有一个 React Native 表单，我正在尝试将 Formik 与 react-query 一起使用。

问题是在从我收到钩子错误useQuery()调用的函数中使用：onSubmit

警告：从 submitForm() 捕获到未处理的错误 [错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。

我相信我理解错误是什么，但我不明白如何解决这个问题。

我拼凑的例子只是为了演示这个问题：

我有以下情况。我想在列表页面上获取所有用户及其数据。当您调用 getUsers 时，API 具有以下结构，它只返回一个 id 数组。然后我需要通过调用 getUser 查询来获取每个用户数据。

我想要的是有这样的东西，我知道它不起作用，但我想知道如何实现：

我正在使用故事书单独开发我的反应组件。我在将 react-query (useQuery) 与 storybook 一起使用时遇到了问题。在应用程序中实现该组件，我没有收到任何错误，并且事情按预期工作。

我有一个自定义反应钩子 useSearchStationsByCallLetter 返回 useQuery 钩子。React-query 应该使用 searchStationsByCallLetter 作为 api 调用。ApiService 和 makeApiCall 是自定义 axios 设置。

我在故事书中遇到的错误是：

如何使用 React Typescript 在 axios 中设置我的 baseURL？

我试着做axios.defaults.baseURL = 'myurl.com';

但是，它不起作用。在网络选项卡中，它表示承诺待处理。

知道如何实现吗？

我一直在useMutation()为我的应用程序使用 crud 任务的钩子，我觉得我在写很多重复的代码，最初我的代码是这样的：

重置功能是这样的：

我想要的所需结束代码是这样的：

我可以完成这项工作，但对我来说，它的代码看起来很乱（同样有很多重复的代码）：

有一个更好的方法吗？

我真的不知道如何问清楚，但我会先粘贴我的代码并在下面提问。

如您所见，我正在尝试创建自己的自定义挂钩来包装反应查询功能。因此，我需要将我的fetchTodos查询设置为禁用，这样它就不会立即运行。但是，这会破坏所有后台数据获取吗？

具体来说，当我运行createTodo并onMutate触发该方法时，理想情况下，我希望fetchTodos在后台更新查询，以便更新前端的待办事项列表，而无需再次发出请求。但似乎最初将查询设置为禁用，后台更新不会生效。

因为我不认为将 react-query 钩子包装到自定义钩子库中是一个非常好的主意，所以我可能会对相同的设置有更多问题，但现在，我将从这里开始。谢谢你。

我有一个使用useQueryReact Query 的组件，如下所示：

selectedStore是可以从 UI 更改的本地状态变量，触发对 API 的新产品请求。我的问题是，我还需要在另一个组件中使用来自请求的数据，最好是通过queryCache.getQueryData，但要做到这一点，我需要提供一个键，不仅是字符串"Products"，而且是整个数组["products", selectedStore]。

另一个组件无权访问selectedStore，所以我的问题是，有没有一种方法可以让其他组件在不提升selectedStore到全局状态的情况下访问此查询数据？我想将数据保留在其中queryCache，也不要将其提升。

我正在对端点进行n次 API 调用，获取数据，将数据放入卡片中，然后返回n数量的卡片。

我希望能够根据卡片本身的属性对卡片进行排序，但到目前为止我一直无法做到这一点。这是我的代码结构；

Name.js - 有一个名称列表并调用 api 组件。

Api.js - 使用 React-Query 进行 api 调用并返回一个卡片组件。

Card.js - Material-ui 风格的卡片，它以漂亮的格式返回 Api 的数据。

如果我想按“级别”数据对返回的卡片进行排序，我假设这段代码会放在 Name.js 文件中，但我不知道它会是什么样子。任何帮助表示赞赏，谢谢。

我正在开发一个使用 React 查询、https ://react-query.tanstack.com/、React 钩子和功能组件的 React JS 项目。但是当我对 API 调用使用反应查询时，它会引发错误。

这是我的组件以及我如何在其中使用查询。

这是我的 getList API 调用逻辑

当我运行我的代码时，我收到以下错误：

react-dom.development.js:14815 未捕获的错误：重新渲染太多。React 限制了渲染的数量以防止无限循环。

我的代码有什么问题？

我有一张这样的桌子

呈现分页项。在调用 API 时，确切的次数是未知的。所以为了处理这样的表格的分页。使用useInfiniteQuery或usePaginatedQuery来自 React Query 更好？

我真的很难在这里理解这两个 API 的用例差异