refetch data for table after mutation in create form component

skinny-azure · 2023-10-14T12:54:14.642Z

how do i force refetch data for table after mutation is completed in create form component both have common parent component

K

kapa.ai•10/14/23, 12:54 PM

Hi @tarang._. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

K

kapa.ai•10/14/23, 12:54 PM

----------------------
In refine, after a successful mutation, certain queries are invalidated by default which triggers a refetch of the data. This is handled by the mutation hooks such as

useCreate

useCreate

,

useUpdate

useUpdate

useUpdate

useUpdate,

useDelete

useDelete

useDelete

useDelete, etc.

For instance, when the

useCreate

useCreate

mutation runs successfully, it invalidates the

list

list

and

many

many

many

many queries from the current resource by default. This means that if you use

useList

useList

useList

useList or

useMany

useMany

useMany

useMany hooks on the same page, they will refetch the data after the mutation is completed.

Here is an example of how you can use the

useCreate

useCreate

hook:

const { mutate } = useCreate("resource");

const onSubmit = (values) => {
    mutate(values);
};

const { mutate } = useCreate("resource");

const onSubmit = (values) => {
    mutate(values);
};

const { mutate } = useCreate("resource");

const onSubmit = (values) => {
    mutate(values);
};

const { mutate } = useCreate("resource");

const onSubmit = (values) => {
    mutate(values);
};

In this example, after the

mutate

mutate

function is called and the mutation is successful, the

list

list

and

many

many

many

many queries for the "resource" will be invalidated and refetched.

You can also customize the scope of the invalidation by passing the

invalidates

invalidates

invalidates

invalidates prop to the mutation hook. For example:

const { mutate } = useCreate("resource", {
    invalidates: ["list", "many", "detail"],
});

const onSubmit = (values) => {
    mutate(values);
};

const { mutate } = useCreate("resource", {
    invalidates: ["list", "many", "detail"],
});

const onSubmit = (values) => {
    mutate(values);
};

const { mutate } = useCreate("resource", {
    invalidates: ["list", "many", "detail"],
});

const onSubmit = (values) => {
    mutate(values);
};

const { mutate } = useCreate("resource", {
    invalidates: ["list", "many", "detail"],
});

const onSubmit = (values) => {
    mutate(values);
};

In this example, the

list

list

,

many

many

many

many, and

detail

detail

detail

detail queries for the "resource" will be invalidated and refetched after the mutation is successful.

For more information, refer to the refine documentation (https://refine.dev/docs/api-reference/core/hooks/data/useCreate/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•10/14/23, 12:54 PM

@852840146495340564 kapa.ai is still learning and improving, please let us know how it did by reacting below