robust-apricot•2y 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?
        }
    });

20 Replies

refine-support-bot•2y 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.

dependent-tan•2y 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"]);

robust-apricotOP•2y 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

dependent-tan•2y ago

Let me test it in a working project. @dipbazz

robust-apricotOP•2y ago

Yeah sure @yildirayunlu

complex-teal•2y ago

@dipbazz sorry for the delay, we'll respond to you today.

dependent-tan•2y 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.

robust-apricotOP•2y ago

Yeah sure @yildirayunlu .

robust-apricotOP•2y ago

Here is an issue https://github.com/refinedev/refine/issues/3671

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...

dependent-tan•2y ago

Thank you for your contribution 🚀

Omer•2y 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...

robust-apricotOP•2y 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],
     }
})

generous-apricot•2y 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

generous-apricot•2y ago

robust-apricotOP•2y 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

generous-apricot•2y ago

where did u console ?

Omer•2y ago

Hey @dipbazz , Can you try like this? const queryClient = useQueryClient(); queryClient.invalidateQueries(["custom-key"]);

robust-apricotOP•2y ago

Hey @Omer, that did work. Can I know the reason behind why it didn't work while destructuring invalidateQueries 🤔

Omer•2y ago

No, I don't know 🙂 It's strange haha

ratty-blush•6mo ago

and over a year later, I have this same issue and after spending over 5 hours, I landed on this comment, and then I got it solved Quite strange that destructuring didn't work

How to invalidate a custom query of `useCustom`?

Did you find this page helpful?