equal-aqua•9mo ago

After execution getOne in provider, useForm not update the data

Hello everyone, i create a form and i used the hook useUpdate, after the mutation finish, the list show the correct data, but when i edit a register, the useForm show me the previous data. I debugger the getOne method in provider and the data are correctly, but the useForm formProps.initialValues and queryResult?.data?.data still show me previous data. Any suggestion? Please i need help

4 Replies

kapa.ai•9mo ago

Hi @.cnunes. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It seems like you're facing an issue where the useForm hook is not updating the data correctly after a mutation. This could be due to the fact that the queryResult.data object is not being updated when you navigate away from the Edit page and then come back. This could be because the useOne hook is not being triggered again, and so the old data is still being used. One way to handle this is to reset the form when the Edit page unmounts. You can do this by returning a cleanup function from the useEffect hook that calls the reset method from formMethods. Here's how you can modify the code:

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

const PostEdit: React.FC = () => {
  const {  
    formMethods,  
    refineCore: { queryResult },  
  } = useForm();

  useEffect(() => {
    if (queryResult?.data) {
      // Modify the data here
      formMethods.setValue('yourFieldName', 'yourModifiedValue');
    }

    // Cleanup function
    return () => {
      formMethods.reset(); // Reset the form
    };
  }, [queryResult.data, formMethods]); // Add queryResult.data as a dependency

  // Rest of your component
};

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

const PostEdit: React.FC = () => {
  const {  
    formMethods,  
    refineCore: { queryResult },  
  } = useForm();

  useEffect(() => {
    if (queryResult?.data) {
      // Modify the data here
      formMethods.setValue('yourFieldName', 'yourModifiedValue');
    }

    // Cleanup function
    return () => {
      formMethods.reset(); // Reset the form
    };
  }, [queryResult.data, formMethods]); // Add queryResult.data as a dependency

  // Rest of your component
};

In this example, the useEffect hook will run a cleanup function that resets the form when the Edit page unmounts. This should ensure that the old data is not used when you navigate back to the Edit page. For more information, you can refer to the useForm (https://refine.dev/docs/api-reference/core/hooks/useForm/) documentation on the refine website. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

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

equal-aqua•9mo ago

The suggestion not working because formMethods do not exist in useForm

multiple-amethyst•9mo ago

Hello @.cnunes indeed we may have an issue here. Could you create an issue on github ideally with a minimal reproducible example? Would appreicate it, thanks 🙏