React Query invalidateQueries未将加载设置为true
React Query的invalidateQueries方法用于使特定查询无效，并重新加载数据。它的作用是告诉React Query重新发起查询请求，以获取最新的数据。
invalidateQueries方法接受一个查询键（query key）作为参数，该键用于标识查询。当调用invalidateQueries方法时，React Query会将该查询标记为无效，并在下一次访问该查询时重新加载数据。
使用invalidateQueries方法可以实现数据的强制刷新，确保获取到最新的数据。这在某些场景下非常有用，比如当用户执行了某个操作后，需要立即更新相关数据。
以下是invalidateQueries方法的一些常见应用场景：
- 表单提交后的数据更新：当用户提交表单后，可以使用
invalidateQueries方法使与该表单相关的查询无效，以便在下一次访问时重新加载最新的数据。 - 数据更新通知：当后端数据发生变化时，可以使用
invalidateQueries方法使与该数据相关的查询无效，以便在下一次访问时重新加载最新的数据。 - 定时刷新数据：可以使用
invalidateQueries方法结合定时器，定期使查询无效，以便定时刷新数据。
推荐的腾讯云相关产品是腾讯云云服务器（CVM），它提供了高性能、可扩展的云服务器实例，适用于各种应用场景。您可以通过以下链接了解更多关于腾讯云云服务器的信息：腾讯云云服务器产品介绍
请注意，以上答案仅供参考，具体的实现方式和推荐产品可能因实际需求和环境而异。
相关·内容
我有一个按钮，在单击时，必须执行一项使列表显示在我的页面上以进行更改的操作，理论上，页面应该重新加载。然而，无论我按了多少次按钮，这种情况都不会发生。
我按钮的完整代码：
import React from 'react';
import { useSaveOrderItemsForList } from '../../hooks/Lists/useSaveOrderItemsForList';
import ErrorIndicator from '../shared/ErrorIndicator';
import LoadingButton
浏览 1提问于2022-04-22得票数 0
回答已采纳
2回答
我有一个母版页，它是一个项目列表，还有一个详细页，我可以在其中获取和更新项目。我有以下基于react-query库的钩子：
const useItems = (options) => useQuery(["item"], api.fetchItems(options)); // used by master page
const useItem = id => useQuery(["item", id], () => api.fetchItem(id)); // used by details page
const useUpdateItem
浏览 16提问于2021-02-24得票数 6
回答已采纳
我有一个简单的应用程序，它有一个表单和列表。目前，在提交表单后，我正在使用Queryclient.InvalidateQueries更新用户列表。正如文档所述，使用InvalidateQuery将触发重取，但不知何故，在添加用户之后，我没有看到对列表的更新。我是不是遗漏了什么？
添加用户
import React, { useState } from 'react';
import { useFormik } from 'formik';
import Input from '../../elements/Input/Input';
import
浏览 21提问于2022-02-20得票数 0
我为每个文档配置了react-query的无限陈旧时间，如下所示： <ReactQueryConfigProvider config={{
queries: {
staleTime: Infinity
}
}}> 我的大多数查询都不会过时，除了我的'profile‘查询： const getProfile = async () => {
if (!isAuthenticated()) {
return null;
}
try {
const
浏览 60提问于2020-09-01得票数 2
回答已采纳
我正在使用react-query 3.30在一个离子反应应用程序。
我有一个寻呼查询：
export function useCardAdmin(
currentJsonUrl: string,
): UseQueryResult<JsonDataWidgetPagerRead, Error> {
const query = currentJsonUrl;
const queryKey = queryKeyUseWidgetAdmin(currentJsonUrl);
return useQuery<JsonDataWidgetPagerRead, Error
浏览 5提问于2021-10-31得票数 3
回答已采纳
我读过有关查询无效的react query文档。然而，它似乎对我不起作用。以下是代码：
import React from "react";
import ax from "axios";
import { useQueryClient, useQuery } from "react-query";
export default function App() {
const queryClient = useQueryClient();
const [poke, setPoke] = React.useState("pika
浏览 2提问于2021-03-25得票数 6
回答已采纳
我使用api钩子删除实体，使用useQuery钩子从useMutation加载实体，如下所示： const { mutate: $delete } = useMutation(deleteDiscipline, {
onSuccess: () => {
queryClient.invalidateQueries('disciplines')
},
})
const { isLoading, data: disciplines } = useQuery(['disciplines', filter], getFilteredDiscipl
浏览 98提问于2021-04-03得票数 1
回答已采纳
1回答
我正在使用react query钩子，我的目标是将更新的状态发送到数据库并接收更新的状态。
我的目标是一本锻炼日记，它显示每天的努力：
{
name: "my workout diary",
currentDay: 0,
days: [
{dayName: "monday", exercises: {...}},
{dayName: "day 2", exercises: {...}},
{dayName: "rest
浏览 6提问于2021-11-02得票数 0
回答已采纳
我们使用queryClient.invalidateQueries(someQueryKey)来检索查询中的数据，并且它工作得很好。迁移到Next.js的项目和从react-router到next-router代码库的路由器更改除了路由器更改之外，最大限度地保持不变。
现在，如果我从一条路线导航到另一条路线，然后返回，queryClient.invalidateQueries(someQueryKey)停止工作，所有其他查询调用都像它应该执行的useQueris和useMutations一样工作。
奇怪的是，当我在页面之间导航时，除了queryClient.invalidateQueries(
浏览 6提问于2021-12-01得票数 0
我在Posts组件中使用react query，它呈现一个PostForm组件，后面跟着一个PostView组件列表。
-职位
const [ isLoading, data ] = useQuery("get_posts", {...}, )
const [ userPosts, setUserPosts] = useState([]);
const [ isReady, setIsReady ] = useState(false);
useeffect(() => {
newPosts = ..do some things with the data
浏览 4提问于2021-04-24得票数 1
回答已采纳
单击“删除”按钮后，仍将显示已删除的Todo项目。
它不会立即删除显示，但在我的db.json文件中显示它已被删除。
我还通过将组件放置在App.jsx中进行测试，没有问题，所有操作都正常，但是当我嵌套组件时，delete函数可以工作，但它不会立即更新。
我正在使用json-server，，
import React from "react";
import { useQuery, useMutation, QueryClient } from "@tanstack/react-query";
import axios from "axios";
浏览 1提问于2022-10-06得票数 1
4回答
所以我想用react调用API，我的数据没有正确显示，我知道我做得对，但是我是否遗漏了什么，因为我不知道为什么它仍然显示加载
import React from 'react';
import './App.css';
class App extends React.Component {
constructor (props) {
super(props);
this.state = {
students: [],
isLoaded: false,
error: null,
}
浏览 2提问于2019-07-01得票数 0
我有一个表单模式，它将新的联系人数据添加到我的数据库中，但是在我刷新页面之前，我的UI在添加新数据之后才会更新。
我的代码
contact.tsx //文件负责获取
import { useQuery } from 'react-query';
const fetchContact = async () => {
const { data } = await http.get('http://localhost:5000/api/contact/create');
return {
data: data,
};
};
const u
浏览 6提问于2022-02-19得票数 4
我不希望我的组件总是在它们将要挂载并已经在缓存中拥有查询时重新获取，所以我做到了：
export const App = ({ props }) => {
const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
refetchOnMount: false,
},
},
})
return (<QueryClientProvider client={queryCli
浏览 22提问于2021-12-07得票数 2
我有一个显示发票列表的应用程序。单击进入单个发票页面时，您可以选择删除该发票。单击删除时，将弹出一个模式以确认删除，然后将发票从列表中删除。 我使用React Router来导航应用程序中的页面，并使用React查询来处理API交互。 在下面的代码中，我尝试使用useMutation和invalidateQueries删除发票，以便更新发票列表，然后重定向到主页，其中使用重定向列出了所有发票。 我遇到的问题是，重定向似乎是在查询无效之前发生的，所以当我返回到列表时，删除的项目仍然显示，直到您刷新页面。有什么办法可以解决这个问题吗？ import React, { useState } fro
浏览 28提问于2021-04-01得票数 0
回答已采纳
1回答
总结问题：
我试图使我的GET查询无效，以请求获取单个用户。由于有许多用户，所以我必须对我的GET请求fetch-user和id进行2个查询键。
useQuery<User, AxiosError>(['fetch-user', id], () => fetchUser(id));
每当我想要使所述请求失效的用户PATCH时，都会显示前面(缓存的)值，而不是更新的值。
如何使用特定的键(在我的示例中是fetch-user 和 id**?**的附加键)使查询无效
显示一些代码：
具有特定id的GET用户的钩子：
const fetchUser = (id:
浏览 6提问于2022-08-21得票数 0
回答已采纳
每当用户按下按钮"likes“刷新所有查询时，我都会尝试使查询无效，但尽管遵循文档，到目前为止仍未成功。
我有一个获取数据的组件：
const {
data: resultsEnCours,
isLoading,
isError,
} = useQueryGetEvents("homeencours", { currentEvents: true });
这是一个自定义钩子，看起来像这样：
const useQueryGetEvents = (nameQuery, params, callback) => {
const [re
浏览 3提问于2021-07-29得票数 0
我有一个小应用程序，有几种相似的数据。例如，标签和状态的数据。所以apis也是相似的。
现在使用react-query，我正在编写许多重复的突变。所有的突变(添加、更新、删除)都有相同的结构：
export const useUpdateLabel = () => {
const queryClient = useQueryClient();
return useMutation(updateLabel, {
onSuccess: () => {
queryClient.invalidateQueries("labels");
浏览 7提问于2022-05-22得票数 0
我想在react- query的useQuery钩子周围创建一个包装器钩子，这样我就可以捕获401错误，尝试刷新访问令牌，如果刷新成功，则使原始查询无效。
下面是我尝试做的完整示例：
function useMyQUery() {
const queryClient = useQueryClient();
const { tryRefreshToken } = useSession();
const query = useQuery(...arguments);
if (query.isError && query.error?.status === 401
浏览 3提问于2021-02-17得票数 1
2回答
我真的不知道如何清楚地提问，但是，我会先粘贴我的代码，然后在下面提问。
function useToDos() {
const queryCache = useQueryCache();
const fetchTodos = useQuery(
'fetchTodos',
() => client.get(paths.todos).then(({ data }: any) => data),
{ enabled: false }
);
const createTodo = async ({ name ) =>
浏览 1提问于2020-09-19得票数 0
所以我使用了React查询，我有一个突变，我有一个onSucess回调，如下所示：
onSuccess: () => {
return queryClient.invalidateQueries([FETCH_USER, userId]);
}
我想使另一个查询无效，我知道我可以这样做：
onSuccess: () => {
queryClient.invalidateQueries([FETCH_USER, userId]);
queryClient.invalidateQueries([FETCH_USER_BOOKS, userId]);
}
但
浏览 14提问于2022-11-09得票数 0
回答已采纳
我正在从我的express后端获取和显示一组帖子，它以"Blog“组件的形式显示。
组件有一个按钮从后端删除它，然后重新获取帖子，每当我单击delete按钮时，状态从“空闲”更改为“加载”到“成功”，然后在重新获取数据时将其删除。
这是可行的，但当它被删除时，下一篇文章将“成功”显示为状态。为什么？
BlogPost.jsx：
import React from "react";
import axios from "axios";
import { useQueryCache, useMutation } from "react-query
浏览 2提问于2020-10-25得票数 3
回答已采纳
1回答
我正在尝试重新获取一个特定的数据，这些数据应该在另一个API中的post请求之后更新。值得一提的是，基于该请求，应该更新两个API，其中一个更新，另一个不更新。
我尝试过多种方法来根据成功的post请求重新获取API，但是似乎没有什么效果。
我也试着增加这样的第二个选项，但没有成功。
{
refetchInactive: true,
refetchActive: true,
}
正如它在中提到的那样，也许“键不匹配，所以您试图使缓存中不存在的东西失效”，但不确定这是否是我的情况。
更有趣的是，单击devtools中的失效按钮，失效本身就能工作。
突变功能：
import { B
浏览 1提问于2022-04-26得票数 0
我使用react-query库来获取数据。当用户发生变化时，如果以前的用户数据被自动删除&获取新数据，我会很高兴。 然而，这并没有发生，旧的userId被调用了几次，只有在1到2次重新关注应用程序之后，它才会用适当的新userId来获取数据。这里是钩子:当我在getData函数中记录一些信息时，我可以看到注销后旧的userId调用了它几次。 export default function useData() {
const {user} = useAuth();
const queryClient = useQueryClient();
useEffect((
浏览 150提问于2021-06-27得票数 0
回答已采纳
我想通过react-query实现这个场景
我的组件得到了一个API，当客户端的互联网断开时，应该尝试一次，如果互联网重新连接，就永远不会重新获取……3秒后，如果重试不成功，应该显示一个错误，并显示一个用于重试请求的按钮。
const URL = 'https://randomuser.me/api/?results=5&inc=name';
const Example = () => {
const { error, data, isLoading, refetch } = useQuery('test', () =>
fet
浏览 9提问于2021-11-08得票数 0
当我的用户注销时，我想从应用程序中删除所有用户数据，但我在实现这一点时遇到了问题。
我有一个定制的useUserData()钩子来获取用户的数据。getUser()是一个可调用的云函数。到目前为止，这是我的代码。
import { useEffect, useState } from "react"
import { useQuery, useQueryClient } from "react-query"
import { getUser } from "Services/firebase/functions"
import firebase
浏览 30提问于2021-05-21得票数 0
回答已采纳
当我介绍useQueryClient时，我正在经历以下错误？知道为什么会这样吗？
我正试图通过invalidateQueries获得一个queryKey onSuccess of useUpdateEmployee hook。
bundle.js:1427 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
组件
import { use
浏览 6提问于2022-10-19得票数 1
index.js
import {AppRegistry} from 'react-native';
import TabBar from './src/Navigation/TabBar';
import {name as appName} from './app.json';
import App from './App';
AppRegistry.registerComponent(appName, () => App);
App.js
import { Platform } fro
浏览 1提问于2020-11-05得票数 1
我是react的新手，我正在建立一个react网站，我遇到了一个问题，如何显示登录我页面的人的用户名，我希望当这个人登录时，状态从‘嗨，登录’变成'hello x person'： 我的后台登录：(express) app.get("/login", (req, res) => {
if (req.session.user) {
res.send({ loggedIn: true, user: req.session.user });
} else {
res.send({ loggedIn: false });
}
});
app.pos
浏览 36提问于2020-12-26得票数 0
我在使用id 'fetchProducts'重新获取查询时，使用了QueryCache.refetchQueries，但是它失败了。
然后，我看到了react query迁移到了3.0版本，并做了一些更改。我在docs中看到了一个重取查询代码示例queryClient.invalidateQueries('fetchProducts')，并使用了它，但是仍然需要刷新页面以查看最新的更改。
反应截图-devtools：
(这表明查询保存在带有id fetchProducts的缓存中，但在从突变中成功响应后无法重新获取)
浏览 4提问于2021-02-14得票数 0
我有一个叫dbConnect的类，他的功能是连接到数据库并像( insert，read...etc )那样管理数据，到目前为止，我只做了一个方法getRows这个方法假设从表中插入行，问题是当我创建一个新对象( fetchAll Connection)并调用getRows方法时什么都没有发生，甚至没有异常，那么我做错了什么呢？我错过了什么？ Core.php <?php
class dbConnect {
// properties
// Host name
public $db_host = '';
// database use
浏览 12提问于2020-06-20得票数 0
回答已采纳
我正在努力将jPlayer整合到我们的WordPress站点中。我并不特别关心这两个可用的插件，因为我们的客户端有一点技术上的缺陷。我们希望实现的是将标题和Mp3加载到JavaScript中用于jPlayer播放列表。目前一切正常加载，并返回适当的文本，但我无法获得文件名和附件URL加载适当。就这一点而言，我对java和wordpress还很陌生。如果您想查看现场示例，请访问
<!--Begin Jplayer Playlist -->
<script type="text/javascript">
//<![CDATA[
$(do
浏览 1提问于2012-09-19得票数 2
1回答
我有一个页面，只要我点击‘提交’按钮，我就更新信息，并且我想更新屏幕的信息，而不必重新加载页面。
这是提交按钮：
import React from 'react';
import { useSaveOrderItemsForList } from '../../hooks/Lists/useSaveOrderItemsForList';
import ErrorIndicator from '../shared/ErrorIndicator';
import LoadingButton from '../shared/LoadingBu
浏览 3提问于2022-04-19得票数 1
回答已采纳
我目前正在我的项目中试用react。
我很难处理变异中的错误。
在“网络”选项卡中，我可以确认服务器正在使用代码400或500进行响应，我认为这会导致axios抛出错误，从而触发定义的onError函数。
但是，无论onSuccess调用是如何进行的，都会调用该函数。
我在这里错过了什么？提前谢谢。
const { mutate } = useMutation(
['mutation'],
() => axios.patch(API_URL, params),
{
onSuccess: () => {
//this is always fired, ev
浏览 10提问于2022-04-14得票数 5
1回答
如何用数据表解决问题
、、、
我在使用DataTables使用C#加载记录列表时遇到问题，问题是加载表会给出以下错误
一旦发生这种情况，我将检查浏览器控制台中的错误，它将显示以下内容：
下面是加载记录列表的控制器中的代码
/// <summary>
/// Obtain tickets from the database and process them to be presented in the Datatable
/// </summary>
/// <returns>Json with the tickets available
浏览 9提问于2020-05-04得票数 0
回答已采纳
我正在编写一个CRUD应用程序，并使用React查询，我创建了一些自定义钩子，如下所述：
在文档中，我看到基本上有两种方法可以在发生突变后更新缓存：
() 查询失效
onSuccess: () => {
queryClient.invalidateQueries("posts");
}
手动更新缓存的()
// Update post example
// I get the updated post data for onSuccess
onSuccess: (data) => {
queryClient.setQueryData("posts
浏览 1提问于2021-08-25得票数 1
回答已采纳
QueryClass Query;
string UserName = "";
int UserId = 0;
string email = txtEmail.Text;
string name = txtUserName.Text;
string phone = txtPhone.Text;
byte[] buffer = new byte[100];
UserName = Query.GetUserName(email); //ret
浏览 1提问于2013-05-16得票数 1
回答已采纳
我正在使用编写组件的测试。
一个(非常精简的) NoResults组件：
import React from 'react'
import { Text, View } from 'react-native'
import { connectStateResults } from 'react-instantsearch-native'
const NoResults = ({ searching, searchState: { query } }) => searching || !query ? null : (
<View
浏览 1提问于2019-06-03得票数 2
1回答
我正在尝试为react查询中的乐观更新编写测试用例。但这不管用。下面是我为测试它而编写的代码。希望有人能帮我。提前谢谢。当我只编写onSuccess并保持乐观的更新时，它工作得很好，但在这里它不起作用。我们怎么能在这里嘲笑getQueryData和setQueryData呢？
import { act, renderHook } from "@testing-library/react-hooks";
import axios from "axios";
import { createWrapper } from "../../test-utils
浏览 5提问于2022-10-26得票数 1
回答已采纳
我使用的是material-table库。我想使用当前正在加载的动画，库正在使用它进行自定义的异步操作。单击自定义操作后，它会打开，然后在aync解析后关闭。 import React from "react";
import MaterialTable from "material-table";
import ReactDOM from "react-dom";
import "./styles.css";
const handleAsync = () => {
// isLoading = true
//
浏览 13提问于2019-04-25得票数 0
回答已采纳
1回答
对于带有React查询的POST请求，这是一种典型的方法：
import { useMutation, useQueryClient } from 'react-query';
import { IUploadFieldRequest } from '../constants/types';
import { licenseServiceAPI } from '../services';
export const URI = () => '/licenses/upload';
浏览 5提问于2022-10-03得票数 0
1回答
我正在上传一个图像在后端使用react查询useMutation。一切都正常工作，但是onSuccess在useMutation中--当invalidateQueries被称为inValidating useQuery --在POST请求在后端成功执行之前。所以我必须刷新页面以获得新的图像。
const { data: usermedia,} = useQuery(["usermedia"],() => {
return getInfo("http://127.0.0.1:8000/usermedia/").then((t) => t.
浏览 5提问于2022-11-15得票数 0
我正以这种方式在我的react应用程序中使用react查询 const { data, status } = useQuery(key, queryFunc, { staleTime: 1 * 60 * 1000 }); 我希望能够根据数据值使缓存中的某个键失效，基本上是当数据为空时，所以我添加了一个效果 useEffect(() => {
if (data === null) {
queryClient. invalidateQueries(key)
}
}, [data]) 这种方法将导致一个请求循环，其中无效的查询将重新获取，get null作为响应
浏览 32提问于2021-01-05得票数 5
在这篇关于的教程中，作者使用了React路由器v2-3，我想使用新的React路由器v4来实现它。因此，我试图更改这个代码，它使用了react路由器v2：
import React from 'react';
import { IndexLink, Link, browserHistory } from 'react-router';
export class Navigation extends React.Component {
logout(e) {
e.preventDefault();
Meteor.logou
浏览 1提问于2017-03-16得票数 0
回答已采纳
我想使用来自jetpack (安卓架构组件)和Objectbox的paging3。但是在加载下一页时会遇到麻烦。当回收视图向下滚动时，RemoteMediator不会触发LoadType.APPEND事件。可能的原因是什么？ 依赖关系： implementation "io.objectbox:objectbox-android:2.7.1"
implementation 'androidx.paging:paging-runtime:3.0.0-alpha06'
implementation 'androidx.recycle
浏览 69提问于2020-06-28得票数 0
回答已采纳
1回答
React查询中的突变最简单的情况是调用突变，然后使查询无效。
ReactQuery将在突变后重新获取背景中的数据，然后重新获取UI将与服务器状态保持一致。
这是使用ReactQuery时突变的“低挂果”：
import { useMutation, useQueryClient } from 'react-query'
const queryClient = useQueryClient()
// When this mutation succeeds, invalidate any queries with the `todos` or `reminders`
浏览 4提问于2021-05-29得票数 1
回答已采纳
我想通过select状态中提供的信息来显示所选城市的值。选中状态后需要加载的Select Citie。 export default {
data() {
return {
loading: false,
inscription: new InscriptionModel(),
successful: false,
message: '',
arrProfiles: [],
arrStatus: [],
states: [],
cities: [],
};
浏览 46提问于2021-01-30得票数 1
回答已采纳
我正在创建一个应用程序，在运行默认的模板应用程序时，它会显示这个错误。我跟踪了react本机-tvOs GitHub页面中的所有脚本，但是当我尝试在Xcode Apple模拟器上运行它时，它总是会抛出这个错误。
我正在运行的脚本来自GitHub 页面：-
npm install -g @react-native-community/cli
react-native init FinalPOC --template=react-native-tvos@latest
cd FinalPOC && react-native run-ios --simulator "Appl
浏览 8提问于2021-11-01得票数 0
当我在onSettled中执行useMutation时，我想传递一个字符串。
在开始时，我将一个名为top的字符串作为pageType传递，但是一旦我执行了onSettled，我想在pageType中传递一个不同的值(彩票)
我想要修改的是-> -> get(`/api?token=${token}&page='lottery'中变量page中的值(‘top’get(`/api?token=${token}&page='top'`‘抽奖’)。
我试过onSettled: () => queryCache.invalidateQu
浏览 12提问于2022-05-09得票数 1
我正在处理react query，使用无限查询，而且我遇到了一个问题。我无法让setQueryData刷新缓存并返回一个新的第一页。我有一个钩子，它返回一个将消息添加到InfiniteQuery缓存的方法。
通过简单地使整个查询无效，我找到了解决这个问题的方法，但我希望有人能帮助我理解为什么某些东西不能工作。
该解决方案可以工作，只需清除整个相关缓存：
function useManuallyAddMessage() {
const queryClient = useQueryClient();
const manuallyAddMessage = React.useCallback
浏览 5提问于2022-08-04得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
