call some init function when the data received at edit page

How to call some init function when the data loaded on edit page, with antd

6 Replies

kapa.ai•11mo ago

Hi @viveksingh0143. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Refine, when an Edit page loads, it fetches and fills the fields with data from the response. If you want to modify this data or call some function when the data is initially loaded, you can use the useForm hook and useEffect hook from React. Here's an example of how you can do it:

import { useState, useEffect } from 'react';
import { useForm } from '@refinedev/core';

const PostEdit: React.FC = () => {
  const { formMethods, formLoading, formError, formState } = useForm();
  const [initialRender, setInitialRender] = useState(true);

  useEffect(() => {
    if (initialRender && formState?.data) {
      // Modify the data here
      formMethods.setValue('yourFieldName', 'yourModifiedValue');
      setInitialRender(false);
    }
  }, [formState, formMethods, initialRender]);
}

import { useState, useEffect } from 'react';
import { useForm } from '@refinedev/core';

const PostEdit: React.FC = () => {
  const { formMethods, formLoading, formError, formState } = useForm();
  const [initialRender, setInitialRender] = useState(true);

  useEffect(() => {
    if (initialRender && formState?.data) {
      // Modify the data here
      formMethods.setValue('yourFieldName', 'yourModifiedValue');
      setInitialRender(false);
    }
  }, [formState, formMethods, initialRender]);
}

In this example, a state initialRender is used to track if it's the first render. When the component mounts, if it's the initial render and the form data is available, we modify the data using the setValue method from formMethods and then set initialRender to false. If you want to modify the data when the Refresh button is clicked, you can add a dependency to the useEffect hook to listen for changes in the formState.data object. This will cause the useEffect hook to run whenever the data is refreshed.

useEffect(() => {
  if (formState?.data) {
    // Modify the data here
    formMethods.setValue('yourFieldName', 'yourModifiedValue');
    setInitialRender(false);
  }
}, [formState.data, formMethods]); // Add formState.data as a dependency

useEffect(() => {
  if (formState?.data) {
    // Modify the data here
    formMethods.setValue('yourFieldName', 'yourModifiedValue');
    setInitialRender(false);
  }
}, [formState.data, formMethods]); // Add formState.data as a dependency

This information is based on the extracts from the Refine Discord support thread (https://discord.com/channels/837692625737613362/1138081572709470228). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11mo ago

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

metropolitan-bronze•11mo ago

Hello @viveksingh0143 what do you mean by init function ? All data hooks has onSuccess callback. you can use this to do some actions after data fetched.

    useForm(({
        queryOptions: {
            onSuccess: (data) => {
                console.log(data);
            },
        }
    }))

    useForm(({
        queryOptions: {
            onSuccess: (data) => {
                console.log(data);
            },
        }
    }))

foreign-sapphire•11mo ago

Hello @alicanerdurmaz onSuccess called after form submission success, I need to identify, when data loads for any resource at edit page

metropolitan-bronze•11mo ago

for submission you need to use onMutationSuccess https://refine.dev/docs/packages/documentation/react-hook-form/useForm/#onmutationsuccess https://refine.dev/docs/api-reference/antd/hooks/form/useForm/#onmutationsuccess sorry link was wrong

foreign-sapphire•11mo ago

Thanks @alicanerdurmaz for document link