首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

useQuery在useMutation中使用refetchQueries时,OnCompleted不起作用,如何修复?

在使用useMutation钩子时,通过refetchQueries参数来触发数据更新是常见的做法。然而,在某些情况下,尽管在mutation完成后设置了onCompleted回调函数,但它可能不会被触发。为了修复这个问题,可以尝试以下几个步骤:

  1. 确保你正确地设置了useMutation钩子。确保传递了正确的mutation函数和options对象。例如:
代码语言:txt
复制
const [mutate, { data }] = useMutation(MUTATION_FUNCTION, {
  onCompleted: () => {
    console.log("Mutation completed");
  },
  // other options
});
  1. 确保refetchQueries参数被正确地设置。refetchQueries应该是一个包含了需要重新获取的查询的数组。例如:
代码语言:txt
复制
const [mutate] = useMutation(MUTATION_FUNCTION, {
  refetchQueries: [{ query: QUERY_FUNCTION }],
  // other options
});
  1. 使用useEffect钩子来监听数据的变化,并在数据发生变化时手动触发refetchQueries。例如:
代码语言:txt
复制
const [mutate, { data }] = useMutation(MUTATION_FUNCTION, {
  // other options
});

useEffect(() => {
  if (data) {
    refetch();
  }
}, [data]);

const refetch = async () => {
  await queryClient.refetchQueries({ query: QUERY_FUNCTION });
};

通过上述步骤,我们可以确保在mutation完成后正确地触发refetchQueries,从而实现数据的更新。请注意,上述代码中使用了queryClient对象来进行查询的重新获取。queryClient是一个用于管理查询缓存和重新获取的对象,具体使用方式可以参考相关文档。

希望上述解决方案能够帮助你修复useQuery在useMutation中使用refetchQueries时onCompleted不起作用的问题。如果问题仍然存在,请提供更多相关的代码和错误信息以便更好地帮助你解决问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

react-query从拒绝到拥抱

下面来看看react-query是如何把这件事变成乐趣的。...Mutations useMutation:用来创建、更新、删除数据,当你的接口涉及这些逻辑你可以使用它。...下面来看下Queries的配置对象 Queries options 配置对象就是第3个参数,它是一个对象,这个配置对象useQueries,useInfiniteQuery也相同,这个对象有数十个参数可供配置...error,//错误对象,如果存在则包含相关的错误信息 refetch,//这个还挺实用的,你可以需要的地方或需要更新数据时调用,则会触发这个请求,比如enabled=false...复制代码 Mutation(突变) 用来创建/更新/删除数据使用,最典型的例子就是一个todoList,对todo进行增删改相关的请求。使用useMutation hooks。

2.7K31

使用React-Query解决接口请求的麻烦事

,需要使用其返回的“refetch”来触发操作 queryFn:全局定义请求方法,其他地方使用时只需要直接传入请求参数 useQuery useQuery是React-Query提供的用于请求接口并管理请求状态等信息的...写入多项如:['repoData', '1'],这样React-Query使用的时候会自动把它拼接为/repoData/1,这个缓存用户访问过的页面,非常有用。...基本是相同的,这里的mutate则是触发更改的方法,如果我们想执行useMutation传入的方法,我们只需要调用mutate即可,传给mutate的参数都会被带到useMutation的构造方法。...那我们可以使用queryClient的prefetchQuery方法,提前拉取到用户可能会访问的数据,并加入到缓存,由于不需要监听服务端状态等,所以这个方法会比useQuery高效许多。...Devtools ,不必担心构建需要排除他们 浮动模式下开启,会将devtools作为固定的浮动元素安装在开发的应用程序,并在屏幕一角提供一个切换按钮以显示和隐藏devtools devtools

95830
  • React Query 指南,目前火热的状态管理库!

    你将在本系列中发现更多关于它的内容,学习如何使用它,并欣赏其 React 应用程序的简洁性。 useQuery 第一个核心概念是 useQuery。...为了更好地代码理解突变是什么,让我们从一个代码片段开始 import { useMutation } from '@tanstack/react-query'; const postTodo =...这些 hooks 可用于了解应用程序是否存在获取请求或突变请求正在进行。 如果需要创建一个全局的加载器,存在一个或多个请求进行时出现,它们就会很有用。 但是你如何使用它们呢?...当你开始学习或使用一个工具,检查它周围的工具以了解开发者体验是很正常的,这样你就可以决定是否继续使用它。...权限 每个应用程序都应该处理认证流程;在这篇文章,你将学习如何使用 React Query 在你的 React 应用程序构建认证流程。 注册 构建认证流程的第一步是注册操作。

    3.7K42

    urql实现GraphQL的react客户端

    安装urql # npm npm i --save urql graphql # or yarn yarn add urql graphql 使用urql 从服务器 GraphQL Endpoint...client}> ); 通过createClient创建一个客户端,url指定服务端地址,fetchOptions提供一个函数,返回要添加到请求的参数信息...,比如token 利用react的上下文来传递客户端给子组件,则接下来Todos组件可以直接使用query而不需要再次创建客户端 执行查询 import { useQuery } from 'urql...执行变更 与查询不一样的是,变更语句不会在调用useMutation这个Hook函数立即执行,而是需要通过函数返回值的第二个元素(其是一个函数),传入数据调用以后才会请求执行。...import { useMutation} from 'urql'; const UpdateTodo = ` mutation ($id: ID!, $title: String!)

    1.8K20

    探索 React 状态管理:从简单到复杂的解决方案

    虽然像Redux这样的库是管理应用程序状态的流行选择,但你应该明白何时使用它们,何时不使用它们,而且满足需求考虑像Context API这样的简单替代方案也很重要。...请注意,这是经典redux的例子,今天没有人使用它,而是使用了一个被称为redux toolkit的东西,它与redux的概念相同,但更容易使用,我们将在下一篇博客完全了解redux toolkit以及它是如何简化我们的生活的...Child组件,我们使用useSelector钩子从Redux store获取count状态。我们还使用useDispatch钩子获取对dispatch函数的引用。...DataComponent,我们使用useQuery钩子使用fetchData函数获取数据。它返回一个包含数据、isLoading和isError等属性的对象,用于处理加载和错误状态。...我们使用useMutation钩子使用postData函数处理POST请求。useMutation返回的mutation对象包括一个mutateAsync方法,可用于触发变异。

    45131

    用react-query解决你一半的状态管理问题

    用户交互的中间状态 服务端状态 陈年的老项目中,通常用Redux、Mobx这样的「全局状态管理方案」无差别对待他们。...当「状态」需要跨组件层级传递,通常使用Context API。 再大范围的「状态」会使用Redux这样的「全局状态管理方案」。...不仅如此,React-Query还为我们做了如下工作: 多个组件请求同一个query只发出一个请求 缓存数据失效/更新策略(判断缓存合适失效,失效后自动请求数据) 对失效数据垃圾清理 数据的CRUD由...2个hook处理: useQuery处理数据的查 useMutation处理数据的增/删/改 在下面的例子,点击「创建用户」按钮会发起创建用户的post请求: import { useQuery,...总结 通过使用React-Query(或SWR)这样的数据请求库,可以将服务端状态从全局状态解放出来。

    2.6K10

    Hooks + TS 搭建一个任务管理系统(七)-- 任务组页面实现

    布局的简单介绍 这里我们采用的是 antd 的 List 组件,顶部左右两侧采用的是自己封装的 Row 组件,让它们排列两侧,链接跳转部分采用的 Link 组件,通过遍历数据的方式实现渲染 2....> client('epics', { data: param })) } 我们 epic/index.ts 中使用 ,获取任务组数据 epics 以及用于跳转链接的 tasks 数据 // 关于任务的信息...id }) 这样我们就实现了数据的获取 接下来我们来看看如何在组件中使用这两个数据的 对于 epics 它作为我们需要渲染的主内容,需要通过 List.Item 进行渲染 List 组件,我们可以传入我们的数据源...,第二个参数来配置 config 如何处理缓存的数据 // 删除看板 export const useDeleteEpic = (queryKey: QueryKey) => { const...,最后我们再稍微讲讲任务组 item 的路由跳转 三、路由跳转 当我们点击下面的任务,需要跳转到看板页面对应任务的编辑窗口,我们来看看效果图 其实这只要我们的路由地址配置好了就没有问题了 我们来看看如何配置这个跳转的路由地址

    90320

    Hooks + TS 搭建一个任务管理系统(六)-- 看板页面展示

    获取数据,在这里我们需要十分明确,这个我们的这个组件它只是渲染一列,我们通过遍历实现多列,这个很关键 我们 column 获取所有的 task 数据,通过 filter 方法,将它筛选出来,这样...其实在我们遍历添加 kanbanColumns 组件,只会发起一个请求,即使,我们给每一个 column 都绑定了 useTask 这是因为,我们采用的 react-query 的功劳,我们采用...useQuery ,如果在 2s 之内有相同的 queryKey 发出请求的话,就会合并这些请求,只会发出一个 现在我们已经有了每个看板下的 Task 数据了,我们只需要遍历渲染即可,这里我们采用的还是...Antd 组件库 2. useTaskTypes 处理不同类型任务的 icon 我们的任务又分为 bug 和 task,我们都会有相应的图标展示 在这里我们 utils 下封装一个 useTaskTypes...这部分的内容和之前的项目列表相似度很高,我们这里就不详细讲了,稍微解释以下这些 hook 的作用 1. useAddKanban 接着我们需要处理看板增删的 hook ,在这里我们有必要采用乐观更新来实现,不然服务器请求慢

    74940

    React 应用架构实战 0x5:集成 API 到应用

    之前,了解了如何设置模拟 API,而在本节,将学习如何通过应用程序消费 API。当我们提到 API ,指的是 API 后端服务。...我们将学习如何在客户端和服务器上获取数据,对于 HTTP 客户端,我们将使用 Axios,并使用 React Query 库来处理获取到的数据,它允许我们 React 应用程序处理 API 请求和响应...它支持浏览器和服务器端使用,并且具有创建实例、拦截请求和响应、取消请求等功能的 API。 我们首先要创建一个 Axios 实例,其中包含一些我们希望每个请求上执行的通用操作。...我们可以看到这里有一定量的重复代码: 需要定义相同的data、error和 loading 状态 必须相应地更新不同的状态 数据我们离开组件立即被丢弃 如果使用 React Query,我们可以使用...API 层 之前为了没有 API 功能的情况下构建 UI,我们页面上使用了测试数据。

    1.5K20

    React 应用架构实战 0x6:实现用户认证和全局通知

    目前,当涉及到管理控制台中的用户身份验证,应用程序仍然依赖于测试数据。本节,我们将构建应用程序的身份验证系统,允许用户认证并访问受保护的资源管理控制台中。...除了响应数据之外,还将附加一个 httpOnly cookie,从此时起用于身份验证请求 每当用户进行身份验证,我们将从响应的用户对象存储 react-query 缓存,并使其对应用程序可用 由于身份验证是基于...(user); }, }); return { submit, isLoading, }; }; 登录表单,我们将使用 useLogin hook 来处理登录请求...(); }, }); return { submit, isLoading, }; }; 登出按钮,我们将使用 useLogout hook 来处理注销请求...@/features/auth"; 另外, src/pages/dashboard/jobs/index.tsx ,我们将使用 useUser hook 来获取用户数据: // src/pages

    1.5K20

    Typescript 全栈最值得学习的技术栈 TRPC

    请记住,tRPC 只有当您在诸如 Next、Nuxt、SvelteKit、SolidStart 等全栈项目中使用 TypeScript ,tRPC 才会发挥其优势。...通过 useQueryuseMutation 就能够用 tRPC 实现最基本的 CRUD。此外还有 useInfiniteQuery 可以用作类似无限下拉查询,类似 SWR 无限加载。...(至于如何创建 Github OAuth Apps,我之前的文章以及外面诸多文章中都有介绍到,这里不在演示了,附上配置图) 首先在 server/auth.ts 导入 server/auth.ts...如今 Vercel 应该也已经家喻户晓了,因此这里就不演示如何部署,可到 Vercel • Create T3 App 查看相关步骤。...(不过我比较好奇为啥好多远程数据服务多数都是postgresql) 如果你执意要使用 vercel 部署,当你触发数据库服务便会报错,以下是相关截图。

    3.2K51

    Typescript 全栈最值得学习的技术栈 TRPC

    请记住,tRPC 只有当您在诸如 Next、Nuxt、SvelteKit、SolidStart 等全栈项目中使用 TypeScript ,tRPC 才会发挥其优势。...图片图片通过 useQueryuseMutation 就能够用 tRPC 实现最基本的 CRUD。此外还有 useInfiniteQuery 可以用作类似无限下拉查询,类似 SWR 无限加载。...(至于如何创建 Github OAuth Apps,我之前的文章以及外面诸多文章中都有介绍到,这里不在演示了,附上配置图)图片首先在server/auth.ts 导入import CredentialsProvider...如今 Vercel 应该也已经家喻户晓了,因此这里就不演示如何部署,可到 Vercel • Create T3 App 查看相关步骤。...(不过我比较好奇为啥好多远程数据服务多数都是postgresql)如果你执意要使用 vercel 部署,当你触发数据库服务便会报错,以下是相关截图。

    2K20

    小程序框架Taro中使用 vue3+graphqlFrame

    前言: 小程序中使用 graphql 相对来讲是一个小众的需求,并且 Taro 中就更少一些,但对我们来讲却是一个必需要解决的问题。...graphql client实现是有一套规范标准,并且针对使用复合API编写响应式查询/变量、缓存还是要有一定支持才能体现 graphql 的强大。...helpers.ts │ ├── index.ts │ ├── shared │ ├── symbols.ts │ ├── types.ts │ ├── useClient.ts │ ├── useMutation.ts...客户端测试 总结 此次文章记录了 taro3 + vue3 + graphql 的整合方案,评估了 URQL和Villus两套方案,最终选用 Villus 的改造方案,完成了整套技术的结合,并最终商业应用完美的使用...希望对有小程序中使用 grahql 的朋友有所帮助。

    89610

    为什么我不再用Redux了

    Redux 是 React 生态系统的革命性技术。它使我们能够全局范围内存储不可变数据,并解决了组件树 prop-drilling 的问题。...当我们开始在前端重新创建数据库,后端和前端之间的职责界限很快就变得模糊不清。作为前端开发人员,我们不需要完全了解表及其关系即可创建简单的 UI。我们也不必知道如何高水平地标准化我们的数据。...https://react-query.tanstack.com/docs/overview 现在,无论需要什么数据,你都可以将 useQuery hook 与你设置的唯一键(本例为“todos”)...只要函数是异步的,实现就无关紧要——你可以轻松地使用 Fetch API 代替 Axios。 要更改后端状态,React Query 提供了 useMutation hook。...React Query 和 SWR 大约是同一间开始开发的,并且以积极的方式相互影响。 react-query 文档也对这两个库进行了彻底的比较。

    2.6K20

    Rxjs 响应式编程-第一章:响应式

    假设我们电子表格的单元格A1有一个值,然后我们可以电子表格的其他单元格引用它,并且每当我们更改A1,每个依赖于A1的单元格都会自动更新与A1同步。 ?...然后它调用onCompleted来表示序列已完成。 但是我们究竟如何订阅Observable呢?我们使用Observers来做这件事情。...请注意该名称如何反映我们订阅序列的事实,而不仅仅是离散值。 onCompleted 表示没有更多可用数据。 调用onCompleted后,对onNext的进一步调用将不起作用。...另请注意,这次我们省略了onCompleted回调,因为我们不打算在Observable complete做出反应。我们知道它只会产生一个结果,我们已经onNext回调中使用它了。...这将返回一个Observable,当我们订阅一个Observer,它将正确使用onNext,onError和onCompleted

    2.2K40

    Hooks + TS 搭建一个任务管理系统(三)-- 项目列表功能模块

    modal ,我们的 useProjectModel 已经暴露了 close 方法,我们只需要在 onFinish 调用即可 当 form 表单成功提交,会自动调用 onFinish 方法,...封装增删改查 hook引出 在上一小节,我们也看到了这些 hook 的使用,我们使用的时候只需要传递一个 queryKey ,就能够返回一个 mutate 以及一些相关的配置,这些我们并没有手动的去写...num 的高端操作,其实就是一个转化成 boolean 类型的方法 接着我们就可以 columns 中使用这个 Pin 组件了,星星状态改变时调用编辑方法,改变数据的 pin 状态 {...config 没有讲,它就是实现乐观更新的关键 首先我们需要编写一个 useConfig ,这个几个 hook 中都必须使用到,因为利用 useMutation 这个 API 来实现乐观更新,会牵扯到...useMutation 生命周期的问题,我们封装一个 useConfig 来编写这些生命周期函数 在这个 hook 我们使用了大量的 any ,无关大雅 我们成功、提交、失败设置了相应的回调,来处理不同的请求情况

    1.2K30

    React 设计模式 0x6:数据获取

    学习如何轻松构建可伸缩的 React 应用程序:数据获取 # React 中服务端数据获取的方式 大多数 React 应用程序,应用程序需要来自 API 或服务器的数据才能正常运行。...它是同构的(即可以浏览器和 nodejs 中使用相同的代码库)。服务器端,它使用本地的 node.js http 模块,而在客户端(浏览器),它使用 XMLHttpRequests。...然而,当组件重新渲染,这些数据并不总是需要重新计算或重新获取。有几种方法可以 React 实现数据缓存。...React 应用程序缓存数据并使用它的方法。...从 API 缓存的数据可以存储我们的状态管理,然后我们的应用程序全局使用。尽管数据被缓存,但在刷新页面,它将丢失数据,需要重新获取。

    1.2K20
    领券