sensitive-blue
sensitive-blue•8mo ago

How to calling refetch when I create action after?

export const PointsModal = ({ type, point_id, order_id, member_id }: PointsModalProps) => {
  const {
    register,
    setValue,
    formState: { errors },
    handleSubmit,
    reset,
    refineCore: { onFinish, refetch },
  } = useForm<IPointDetail, HttpError, Nullable<IPointDetail>>({
    refineCoreProps: {
      resource: 'point',
      action: 'create',
      redirect: 'list',
    },
  })
export const PointsModal = ({ type, point_id, order_id, member_id }: PointsModalProps) => {
  const {
    register,
    setValue,
    formState: { errors },
    handleSubmit,
    reset,
    refineCore: { onFinish, refetch },
  } = useForm<IPointDetail, HttpError, Nullable<IPointDetail>>({
    refineCoreProps: {
      resource: 'point',
      action: 'create',
      redirect: 'list',
    },
  })
7 Replies
kapa.ai
kapa.ai•8mo ago
Hi @florent. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To call refetch after a create action in your PointsModal component, you can utilize the onFinish function provided by the useForm hook. This function is called when the form is successfully submitted, and you can use it to trigger the refetch function. Here's how you can modify your PointsModal component to include the refetch call after the form submission: 
import { useForm } from "@refinedev/core";

export const PointsModal = ({ type, point_id, order_id, member_id }: PointsModalProps) => {
  const {
    register,
    setValue,
    formState: { errors },
    handleSubmit,
    reset,
    refineCore: { onFinish, refetch },
  } = useForm<IPointDetail, HttpError, Nullable<IPointDetail>>({
    refineCoreProps: {
      resource: 'point',
      action: 'create',
      redirect: 'list',
    },
  });

  const handleFinish = async (values: IPointDetail) => {
    await onFinish(values);
    refetch();
  };

  return (
    <form onSubmit={handleSubmit(handleFinish)}>
      {/* Your form fields here */}
    </form>
  );
};
import { useForm } from "@refinedev/core";

export const PointsModal = ({ type, point_id, order_id, member_id }: PointsModalProps) => {
  const {
    register,
    setValue,
    formState: { errors },
    handleSubmit,
    reset,
    refineCore: { onFinish, refetch },
  } = useForm<IPointDetail, HttpError, Nullable<IPointDetail>>({
    refineCoreProps: {
      resource: 'point',
      action: 'create',
      redirect: 'list',
    },
  });

  const handleFinish = async (values: IPointDetail) => {
    await onFinish(values);
    refetch();
  };

  return (
    <form onSubmit={handleSubmit(handleFinish)}>
      {/* Your form fields here */}
    </form>
  );
};
In this example, the handleFinish function is defined to first call onFinish with the form values and then call refetch to refresh the data. For more information on the onFinish function, you can refer to the useForm documentation (https://refine.dev/docs/packages/react-hook-form/use-form/#onfinish-1). Additionally, you can find more details on how to refetch data manually in the Frequently Asked Questions (https://refine.dev/docs/guides-concepts/faq/#how-can-i-refetch-data) section of the Refine documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
sensitive-blue
sensitive-blueOP•8mo ago
@kapa.ai 
 const onSubmit = (variables: Nullable<IPointDetail>) => {
    onFinish(variables).then(() => {
      reset()
    })
    handleClose()
    // window.location.reload();
  }

... 
          <form onSubmit={handleSubmit(onFinish)}>
 const onSubmit = (variables: Nullable<IPointDetail>) => {
    onFinish(variables).then(() => {
      reset()
    })
    handleClose()
    // window.location.reload();
  }

... 
          <form onSubmit={handleSubmit(onFinish)}>
But There is no refetch in onFinish.
kapa.ai
kapa.ai•8mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- To ensure that you can call refetch after the onFinish function in your PointsModal component, you need to make sure that refetch is available from the useForm hook. Based on the provided information, it seems like refetch is not directly available in the onFinish function. Instead, you should call refetch after the form submission is completed. Here's how you can modify your PointsModal component to include the refetch call after the form submission: 
import { useForm } from "@refinedev/core";

export const PointsModal = ({ type, point_id, order_id, member_id }: PointsModalProps) => {
  const {
    register,
    setValue,
    formState: { errors },
    handleSubmit,
    reset,
    refineCore: { onFinish },
    queryResult: { refetch },
  } = useForm<IPointDetail, HttpError, Nullable<IPointDetail>>({
    refineCoreProps: {
      resource: 'point',
      action: 'create',
      redirect: 'list',
    },
  });

  const handleFinish = async (values: Nullable<IPointDetail>) => {
    await onFinish(values);
    refetch();
    reset();
    handleClose();
  };

  return (
    <form onSubmit={handleSubmit(handleFinish)}>
      {/* Your form fields here */}
    </form>
  );
};
import { useForm } from "@refinedev/core";

export const PointsModal = ({ type, point_id, order_id, member_id }: PointsModalProps) => {
  const {
    register,
    setValue,
    formState: { errors },
    handleSubmit,
    reset,
    refineCore: { onFinish },
    queryResult: { refetch },
  } = useForm<IPointDetail, HttpError, Nullable<IPointDetail>>({
    refineCoreProps: {
      resource: 'point',
      action: 'create',
      redirect: 'list',
    },
  });

  const handleFinish = async (values: Nullable<IPointDetail>) => {
    await onFinish(values);
    refetch();
    reset();
    handleClose();
  };

  return (
    <form onSubmit={handleSubmit(handleFinish)}>
      {/* Your form fields here */}
    </form>
  );
};
In this example, the handleFinish function is defined to first call onFinish with the form values, then call refetch to refresh the data, and finally reset the form and close the modal. For more information on how to refetch data manually, you can refer to the Frequently Asked Questions (https://refine.dev/docs/guides-concepts/faq/#how-can-i-refetch-data) section of the Refine documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•8mo ago
<@1184365192482652173> kapa.ai is still learning and improving, please let us know how it did by reacting below
sensitive-blue
sensitive-blueOP•8mo ago
@kapa.ai why "refineCoreProps redirect: 'list', " is not working?
kapa.ai
kapa.ai•8mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- The refineCoreProps property, including the redirect option, should work as expected to control the redirection behavior after a form submission. However, if it's not working, there could be a few reasons for this issue. Here are some potential causes and solutions: 1. Incorrect Property Usage: Ensure that you are using the refineCoreProps correctly within the useForm hook. The redirect property should be set within refineCoreProps. 2. Version Compatibility: Make sure you are using a compatible version of the @refinedev/core and @refinedev/react-hook-form packages. There might be a version mismatch causing the issue. 3. Global Configuration: Check if there is a global configuration in your <Refine> component that might be overriding the local redirect setting. Here is an example of how to correctly set the redirect property within refineCoreProps: 
import { useForm } from "@refinedev/react-hook-form";

export const PointsModal = ({ type, point_id, order_id, member_id }: PointsModalProps) => {
  const {
    register,
    setValue,
    formState: { errors },
    handleSubmit,
    reset,
    refineCore: { onFinish },
    queryResult: { refetch },
  } = useForm<IPointDetail, HttpError, Nullable<IPointDetail>>({
    refineCoreProps: {
      resource: 'point',
      action: 'create',
      redirect: 'list', // Ensure this is correctly set
    },
  });

  const handleFinish = async (values: Nullable<IPointDetail>) => {
    await onFinish(values);
    refetch();
    reset();
    handleClose();
  };

  return (
    <form onSubmit={handleSubmit(handleFinish)}>
      {/* Your form fields here */}
    </form>
  );
};
import { useForm } from "@refinedev/react-hook-form";

export const PointsModal = ({ type, point_id, order_id, member_id }: PointsModalProps) => {
  const {
    register,
    setValue,
    formState: { errors },
    handleSubmit,
    reset,
    refineCore: { onFinish },
    queryResult: { refetch },
  } = useForm<IPointDetail, HttpError, Nullable<IPointDetail>>({
    refineCoreProps: {
      resource: 'point',
      action: 'create',
      redirect: 'list', // Ensure this is correctly set
    },
  });

  const handleFinish = async (values: Nullable<IPointDetail>) => {
    await onFinish(values);
    refetch();
    reset();
    handleClose();
  };

  return (
    <form onSubmit={handleSubmit(handleFinish)}>
      {/* Your form fields here */}
    </form>
  );
};
If the redirect property is still not working, you can manually handle the redirection after the form submission as a workaround: 
const handleFinish = async (values: Nullable<IPointDetail>) => {
  await onFinish(values);
  refetch();
  reset();
  handleClose();
  // Manually redirect to the list page
  window.location.href = '/path-to-list-page';
};
const handleFinish = async (values: Nullable<IPointDetail>) => {
  await onFinish(values);
  refetch();
  reset();
  handleClose();
  // Manually redirect to the list page
  window.location.href = '/path-to-list-page';
};
For more detailed information, you can refer to the useForm documentation (https://refine.dev/docs/packages/react-hook-form/use-form/#redirect) and the Refine component options (https://refine.dev/docs/core/refine-component/#redirect). If you continue to experience issues, consider checking the GitHub issues (https://github.com/refinedev/refine/issues) for any related bugs or updates. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•8mo ago
<@1184365192482652173> kapa.ai is still learning and improving, please let us know how it did by reacting below

Did you find this page helpful?