correct-apricot•4mo ago

How can I trigger a data refresh after a form is updated?

When using antd form to update data, how can I ensure the data is refreshed on other places that are using it. For example if a user edits their name it should trigger their name in the header to be reloaded and reset.

2 Replies

kapa.ai•4mo ago

Hi @LoadedDie. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To trigger a data refresh after a form is updated in a Refine application using Ant Design, you can use the useInvalidate hook. This hook allows you to invalidate other resources, ensuring that the data is refreshed wherever it is being used. Here's an example of how you can use the useInvalidate hook to refresh data after a form update:

import { useForm } from "@refinedev/antd";  
import { useInvalidate } from "@refinedev/core"; // Import the useInvalidate hook

const PostEdit = () => {  
  const invalidate = useInvalidate();  
  
  useForm({  
    refineCoreProps: {  
      onMutationSuccess: (data, variables, context) => {  
        invalidate({  
          resource: "users",  // Specify the resource you want to invalidate
          invalidates: ["resourceAll"],  // Specify the invalidation type
        });  
      },  
    },  
  });  
  
  // ---  
};

import { useForm } from "@refinedev/antd";  
import { useInvalidate } from "@refinedev/core"; // Import the useInvalidate hook

const PostEdit = () => {  
  const invalidate = useInvalidate();  
  
  useForm({  
    refineCoreProps: {  
      onMutationSuccess: (data, variables, context) => {  
        invalidate({  
          resource: "users",  // Specify the resource you want to invalidate
          invalidates: ["resourceAll"],  // Specify the invalidation type
        });  
      },  
    },  
  });  
  
  // ---  
};

In this example, when the form mutation (update) is successful, the onMutationSuccess callback is triggered. Inside this callback, the invalidate function is called to invalidate the "users" resource. This will ensure that any component or part of the application using the "users" resource will refresh and reload the updated data. For more details, you can refer to the useInvalidate documentation (https://refine.dev/docs/data/hooks/use-invalidate/). If you need to refresh the data manually, you can also use the refetch function from the useForm, useTable, or useOne hooks as shown in the following example:

const { queryResult: { refetch } } = useForm();
const { queryResult: { refetch } } = useTable();
const { refetch } = useOne();

const { queryResult: { refetch } } = useForm();
const { queryResult: { refetch } } = useTable();
const { refetch } = useOne();

For more information, you can refer to the discussion on GitHub (https://github.com/refinedev/refine/issues/1737). By using these hooks, you can ensure that the data is refreshed and reloaded in other parts of your application after a form update. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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