useForm refetch

how to refetch with useForm ?

5 Replies

Hi @koop_g. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To refetch data with useForm in refine, you can use the refetch function provided by the queryResult object. Here's how you can do it:

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

// To refetch the data
refetch();

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

// To refetch the data
refetch();

The refetch function is part of the queryResult object returned by useForm. This approach works for the edit and clone actions of useForm, as these modes use the useOne hook to fetch data. Alternatively, you can also use the useInvalidate hook to invalidate the form data, which will trigger a refetch:

import { useInvalidate } from "@refinedev/core";

const invalidate = useInvalidate();

// To invalidate and refetch the form data
invalidate({
  resource: "your-resource",
  invalidates: ["detail"],
  id: yourRecordId
});

import { useInvalidate } from "@refinedev/core";

const invalidate = useInvalidate();

// To invalidate and refetch the form data
invalidate({
  resource: "your-resource",
  invalidates: ["detail"],
  id: yourRecordId
});

These methods are documented in the Refine FAQ under the "How can I refetch data?" section. Remember that refine automatically invalidates affected resources after mutations, so manual refetching is often unnecessary unless you have specific requirements. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

<@1327562833537400895> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

fair-roseOP•2d ago

@kapa.ai can you modify my current call so I can understand better ?

    const {
        saveButtonProps,
        refineCore: { formLoading, queryResult, onFinish },
        register,
        control,
        formState: { errors },
        setValue,
        getValues
    } = useForm({
        refineCoreProps: {
            meta: {
                extend_url: 'edit',
            },
            action: "edit",
           redirect: false, // Disable automatic redirect
           onMutationSuccess: (data, variables, context) => {
             show("profile", data?.data?.slug);
           },
            queryOptions: {
                  enabled: true,
                  enabled: !!canAccess?.can,
                },
        },
    });

    const {
        saveButtonProps,
        refineCore: { formLoading, queryResult, onFinish },
        register,
        control,
        formState: { errors },
        setValue,
        getValues
    } = useForm({
        refineCoreProps: {
            meta: {
                extend_url: 'edit',
            },
            action: "edit",
           redirect: false, // Disable automatic redirect
           onMutationSuccess: (data, variables, context) => {
             show("profile", data?.data?.slug);
           },
            queryOptions: {
                  enabled: true,
                  enabled: !!canAccess?.can,
                },
        },
    });

kapa.ai•2d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on your current code, I can help you modify it to include the refetch functionality. Here's how you can modify your useForm call to access and use the refetch function:

const {
    saveButtonProps,
    refineCore: { formLoading, queryResult, onFinish },
    register,
    control,
    formState: { errors },
    setValue,
    getValues
} = useForm({
    refineCoreProps: {
        meta: {
            extend_url: 'edit',
        },
        action: "edit",
        redirect: false, // Disable automatic redirect
        onMutationSuccess: (data, variables, context) => {
            show("profile", data?.data?.slug);
        },
        queryOptions: {
            enabled: true,
            enabled: !!canAccess?.can,
        },
    },
});

// Extract the refetch function from queryResult
const { refetch } = queryResult;

// Now you can use refetch when needed
const handleRefetch = () => {
    refetch();
};

const {
    saveButtonProps,
    refineCore: { formLoading, queryResult, onFinish },
    register,
    control,
    formState: { errors },
    setValue,
    getValues
} = useForm({
    refineCoreProps: {
        meta: {
            extend_url: 'edit',
        },
        action: "edit",
        redirect: false, // Disable automatic redirect
        onMutationSuccess: (data, variables, context) => {
            show("profile", data?.data?.slug);
        },
        queryOptions: {
            enabled: true,
            enabled: !!canAccess?.can,
        },
    },
});

// Extract the refetch function from queryResult
const { refetch } = queryResult;

// Now you can use refetch when needed
const handleRefetch = () => {
    refetch();
};

In this modified version: 1. We keep your existing useForm configuration intact. 2. We extract the refetch function from the queryResult object, which is part of the refineCore property returned by useForm. 3. We create a handleRefetch function that you can call whenever you need to refetch the form data. You can now use handleRefetch() in your component to trigger a refetch of the form data. For example, you might call it in response to a button click or some other event:

<Button onClick={handleRefetch}>Refetch Data</Button>

<Button onClick={handleRefetch}>Refetch Data</Button>

This approach allows you to manually refetch the form data when needed, while keeping your existing form configuration and behavior. Remember that in the edit mode, useForm uses the useOne hook internally to fetch data, so the refetch function will re-run this query to get the latest data for your form. Refine useForm Documentation ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

<@1327562833537400895> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

useForm refetch

Did you find this page helpful?