exotic-emerald
exotic-emeraldβ€’16mo ago

How to invalidate a custom query of `useCustom`?

I want to invalidate a custom query that I have fetched using a useCustom hook based on a useDrawerForm successful mutation. For example: I have a custom query as
const {
data, refetch, isLoading
} = useCustom({
url: `${apiUrl}/custom-endpoint/`,
method: 'get',
})
const {
data, refetch, isLoading
} = useCustom({
url: `${apiUrl}/custom-endpoint/`,
method: 'get',
})
And my drawer form as
const {
formProps,
drawerProps,
show,
saveButtonProps,
id,
close,
queryResult
onFinish
} = useDrawerForm<IReservation>({
action: 'edit',
resource,
id: reservationId,
redirect: false,
onMutationSuccess: () => {
navigateToPayment("reservations/payment", reservationId);
// <============== how can I invalidate the above custom query here?
}
});
const {
formProps,
drawerProps,
show,
saveButtonProps,
id,
close,
queryResult
onFinish
} = useDrawerForm<IReservation>({
action: 'edit',
resource,
id: reservationId,
redirect: false,
onMutationSuccess: () => {
navigateToPayment("reservations/payment", reservationId);
// <============== how can I invalidate the above custom query here?
}
});
19 Replies
refine-support-bot
refine-support-botβ€’16mo ago
Hi, I am refine support bot :wave:. I am here to help you with your question. I searched for the answer to your question in the refine documentation and found an answer! πŸ†
Answer: You can invalidate a custom query fetched using a useCustom hook based on a useDrawerForm successful mutation by using the useInvalidate hook. SOURCES: ./docs/api-reference/core/hooks/invalidate/useInvalidate.md, ./docs/api-reference/mantine/hooks/form/useForm.md

Note: If this is the answer you need, then we are very lucky. If not, please wait for someone from the refine core team or the community to try to help you.
deep-jade
deep-jadeβ€’16mo ago
If refetch is not the solution, you can follow this way.
import { Refine, useCustom, useQueryClient } from "@pankod/refine-core";
const {} = useCustom({
method: "get",
url: "https://api.fake-rest.refine.dev/posts",
queryOptions: {
queryKey: ["custom-key"],
},
});

const { invalidateQueries } = useQueryClient();
invalidateQueries(["custom-key"]);
import { Refine, useCustom, useQueryClient } from "@pankod/refine-core";
const {} = useCustom({
method: "get",
url: "https://api.fake-rest.refine.dev/posts",
queryOptions: {
queryKey: ["custom-key"],
},
});

const { invalidateQueries } = useQueryClient();
invalidateQueries(["custom-key"]);
exotic-emerald
exotic-emeraldβ€’16mo ago
Hey @yildirayunlu, Thanks for your response but I get the following error
TypeError: this is undefined
invalidateQueries queryClient.ts:331
batch notifyManager.ts:17
invalidateQueries queryClient.ts:324
onMutationSuccess index.tsx:76
onSuccess useForm.ts:360
notify mutationObserver.ts:167
batch notifyManager.ts:17
notify mutationObserver.ts:155
onMutationUpdate mutationObserver.ts:93
dispatch mutation.ts:326
dispatch mutation.ts:326
batch notifyManager.ts:17
dispatch mutation.ts:328
execute mutation.ts:214
mutate mutationObserver.ts:127
mutate useMutation.ts:91
onFinish useForm.ts:356
setTimeout handler*onFinish/< useForm.ts:355
onFinish useForm.ts:355
onFinish useForm.ts:157
onSubmit index.tsx:185
onFinish Form.js:63
submit useForm.js:756
promise callback*FormStore/this.submit useForm.js:752
onClick useDrawerForm.ts:95
handleClick button.js:104
callCallback bundle.js:234566
React 3
executeDispatch bundle.js:238825
React 14
mutation.ts:240
TypeError: error.response is undefined
checkError authProvider.ts:55
fn mutation.ts:172
run retryer.ts:138
createRetryer retryer.ts:182
executeMutation mutation.ts:167
execute mutation.ts:209
mutate mutationObserver.ts:127
mutate useMutation.ts:91
onError useUpdate.ts:425
execute mutation.ts:241
mutate mutationObserver.ts:127
mutate useMutation.ts:91
onFinish useForm.ts:356
setTimeout handler*onFinish/< useForm.ts:355
onFinish useForm.ts:355
onFinish useForm.ts:157
onSubmit index.tsx:185
onFinish Form.js:63
submit useForm.js:756
promise callback*FormStore/this.submit useForm.js:752
onClick useDrawerForm.ts:95
handleClick button.js:104
callCallback bundle.js:234566
React 3
executeDispatch bundle.js:238825
React 14
mutation.ts:240
undefined query.ts:433
undefined query.ts:433
TypeError: this is undefined
invalidateQueries queryClient.ts:331
batch notifyManager.ts:17
invalidateQueries queryClient.ts:324
onMutationSuccess index.tsx:76
onSuccess useForm.ts:360
notify mutationObserver.ts:167
batch notifyManager.ts:17
notify mutationObserver.ts:155
onMutationUpdate mutationObserver.ts:93
dispatch mutation.ts:326
dispatch mutation.ts:326
batch notifyManager.ts:17
dispatch mutation.ts:328
execute mutation.ts:214
mutate mutationObserver.ts:127
mutate useMutation.ts:91
onFinish useForm.ts:356
setTimeout handler*onFinish/< useForm.ts:355
onFinish useForm.ts:355
onFinish useForm.ts:157
onSubmit index.tsx:185
onFinish Form.js:63
submit useForm.js:756
promise callback*FormStore/this.submit useForm.js:752
onClick useDrawerForm.ts:95
handleClick button.js:104
callCallback bundle.js:234566
React 3
executeDispatch bundle.js:238825
React 14
mutation.ts:240
TypeError: error.response is undefined
checkError authProvider.ts:55
fn mutation.ts:172
run retryer.ts:138
createRetryer retryer.ts:182
executeMutation mutation.ts:167
execute mutation.ts:209
mutate mutationObserver.ts:127
mutate useMutation.ts:91
onError useUpdate.ts:425
execute mutation.ts:241
mutate mutationObserver.ts:127
mutate useMutation.ts:91
onFinish useForm.ts:356
setTimeout handler*onFinish/< useForm.ts:355
onFinish useForm.ts:355
onFinish useForm.ts:157
onSubmit index.tsx:185
onFinish Form.js:63
submit useForm.js:756
promise callback*FormStore/this.submit useForm.js:752
onClick useDrawerForm.ts:95
handleClick button.js:104
callCallback bundle.js:234566
React 3
executeDispatch bundle.js:238825
React 14
mutation.ts:240
undefined query.ts:433
undefined query.ts:433
deep-jade
deep-jadeβ€’16mo ago
Let me test it in a working project. @dipbazz
exotic-emerald
exotic-emeraldβ€’16mo ago
Yeah sure @yildirayunlu
sensitive-blue
sensitive-blueβ€’16mo ago
@dipbazz sorry for the delay, we'll respond to you today.
deep-jade
deep-jadeβ€’16mo ago
Hi @dipbazz , sorry for the late reply. I tried again today and got the same error. Could you please open an issue? Let's see what we can do. We can add this property to the useInvalide hook.
exotic-emerald
exotic-emeraldβ€’16mo ago
Yeah sure @yildirayunlu .
exotic-emerald
exotic-emeraldβ€’16mo ago
GitHub
[BUG] Invalidating custom queries using custom querykey raised Type...
Describe the bug While trying to invalidate a query using a custom queryKey I got an error as TypeError: this is undefined. Steps To Reproduce First create a custom query with a custom queryKey. co...
deep-jade
deep-jadeβ€’16mo ago
Thank you for your contribution πŸš€
Omer
Omerβ€’15mo ago
Hey @dipbazz , We've fixed it this issue πŸ₯³ https://github.com/refinedev/refine/issues/3671#issuecomment-1470685833
GitHub
[BUG] Invalidating custom queries using custom querykey raised Type...
Describe the bug While trying to invalidate a query using a custom queryKey I got an error as TypeError: this is undefined. Steps To Reproduce First create a custom query with a custom queryKey. co...
exotic-emerald
exotic-emeraldβ€’15mo ago
Hey @Omer, I have tested with the latest version of refine. But still get the same error. Is there anything that I missed? I am using
"@refinedev/core": "^4.1.4",
"@tanstack/react-query": "^4.26.1"
"@refinedev/core": "^4.1.4",
"@tanstack/react-query": "^4.26.1"
I am using a custom query using useCustom with the query key and invalidating the query on my useDrawerForm onMutationSuccess, So my code in gist looks like
import { useQueryClient } from "@tanstack/react-query";


const { invalidateQueries } = useQueryClient();


const {
formProps,
drawerProps,
show,
saveButtonProps,
id,
close,
queryResult,
onFinish
} = useDrawerForm({
action: 'edit',
resource: "resource",
id: reservationId,
onMutationSuccess: () => {
invalidateQueries(['schedule-structure', record.id]) // <==== this is where i am invalidating the query.
},
});

const {
data,
refetch
} = useCustom({
url: '/endpoint',
method: 'get',
queryOptions: {
queryKey: ['schedule-structure', record.id],
}
})
import { useQueryClient } from "@tanstack/react-query";


const { invalidateQueries } = useQueryClient();


const {
formProps,
drawerProps,
show,
saveButtonProps,
id,
close,
queryResult,
onFinish
} = useDrawerForm({
action: 'edit',
resource: "resource",
id: reservationId,
onMutationSuccess: () => {
invalidateQueries(['schedule-structure', record.id]) // <==== this is where i am invalidating the query.
},
});

const {
data,
refetch
} = useCustom({
url: '/endpoint',
method: 'get',
queryOptions: {
queryKey: ['schedule-structure', record.id],
}
})
judicial-coral
judicial-coralβ€’15mo ago
i`m working perfectly with new refine/core latest "@chakra-ui/react": "^2.5.1", "@hookform/resolvers": "^2.9.11", "@next/font": "^13.1.6", "@refinedev/chakra-ui": "latest", "@refinedev/cli": "latest", "@refinedev/core": "latest", try to update npm update @refinedev/core const { data } = useCustom<IRoles, HttpError>({ url: 'roles', method: 'get', config: { query: { start: pageIndex, end: pageSize, }, }, queryOptions: { queryKey: ['roles', pageIndex, pageSize], keepPreviousData: true, }, }); this is my custom queryKey and working perfectly
judicial-coral
judicial-coralβ€’15mo ago
No description
exotic-emerald
exotic-emeraldβ€’15mo ago
I guess the invalidate part is working in my case as well, because the response value is updated for my query. But the problem is I still get the error on console as
TypeError: this is undefined
invalidateQueries queryClient.ts:350
batch notifyManager.ts:25
invalidateQueries queryClient.ts:349
onMutationSuccess index.tsx:101
onSuccess useForm.ts:470
notify mutationObserver.ts:172
batch notifyManager.ts:25
notify mutationObserver.ts:168
onMutationUpdate mutationObserver.ts:100
dispatch mutation.ts:356
dispatch mutation.ts:355
batch notifyManager.ts:25
dispatch mutation.ts:354
execute mutation.ts:248
mutate mutationObserver.ts:136
mutate useMutation.ts:109
onFinish useForm.ts:468
setTimeout handler*onFinish/< useForm.ts:459
onFinish useForm.ts:459
onFinish useForm.ts:164
onSubmit index.tsx:212
onFinish Form.js:68
submit useForm.js:761
promise callback*FormStore/this.submit useForm.js:757
onClick useDrawerForm.ts:178
handleClick button.js:109
TypeError: this is undefined
invalidateQueries queryClient.ts:350
batch notifyManager.ts:25
invalidateQueries queryClient.ts:349
onMutationSuccess index.tsx:101
onSuccess useForm.ts:470
notify mutationObserver.ts:172
batch notifyManager.ts:25
notify mutationObserver.ts:168
onMutationUpdate mutationObserver.ts:100
dispatch mutation.ts:356
dispatch mutation.ts:355
batch notifyManager.ts:25
dispatch mutation.ts:354
execute mutation.ts:248
mutate mutationObserver.ts:136
mutate useMutation.ts:109
onFinish useForm.ts:468
setTimeout handler*onFinish/< useForm.ts:459
onFinish useForm.ts:459
onFinish useForm.ts:164
onSubmit index.tsx:212
onFinish Form.js:68
submit useForm.js:761
promise callback*FormStore/this.submit useForm.js:757
onClick useDrawerForm.ts:178
handleClick button.js:109
judicial-coral
judicial-coralβ€’15mo ago
where did u console ?
Omer
Omerβ€’15mo ago
Hey @dipbazz , Can you try like this? const queryClient = useQueryClient(); queryClient.invalidateQueries(["custom-key"]);
exotic-emerald
exotic-emeraldβ€’15mo ago
Hey @Omer, that did work. Can I know the reason behind why it didn't work while destructuring invalidateQueries πŸ€”
Omer
Omerβ€’15mo ago
No, I don't know πŸ™‚ It's strange haha
More Posts
Can I provide filters to resource data being passed to the inferencer in a component?I found the page on using the inferencer as part of a component (https://refine.dev/docs/api-referenmanually modifying inferencer fieldsreference: https://refine.dev/docs/packages/documentation/inferencer/#modifying-the-inferred-fields Add custom query parameter with useListHi, is it possible to add a custom query parameter with `useList` (like `?custom-query=1`) or it shError node-modules @pankod refine-coreI dnt know wha is the error or what it means or what to do to fix it.. the code still works normal ahow do I create a link that will not be on the sidebar?How do I create new routes snd links ghat will not show on the sider , but ll be distributed across how do I switch from google authentication to create a username and password?How can i create a login page where uder can create their username and password or login with as useRefine Layout for Header & FooterHi! I was reading docs & don’t quite understand how the Layout prop works for `<Refine>`. Currentlysearch multiple antd columns field from search boxhow can we search multiple columns field from a search boxHow to add Header into request GLOBALLYI want to add a header for each api call, since my API requires a X-API-KEY header. Anyone know how?Unable to obtain categories from refine strapi demo endpoint using refine, Strapi and chakraUIHello, I’m building a simple CRUD application using refine with a strapi-v4-provider and Chakra-UI a