continuing-cyan•2mo ago

When I use useForm and fetch twice call api

export const CancelModal = ({
  subscriptions = [],
  membershipStateType,
}: CancelModalProps) => {
  const {
    register,
    setValue,
    formState: { errors },
    handleSubmit,
    reset,
    refineCore: { onFinish },
  } = useForm<ICancelDetail, HttpError>({
    refineCoreProps: {
      resource: 'membership/cancel',
      // action: 'create',
      // redirect: 'list',
    },
  });
  const [open, setOpen] = useState(false);
  const [memo, setMemo] = useState('');

  const handleOpen = () => {
    setOpen(true);
  };
  const handleClose = () => {
    setOpen(false);
  };

  const handleCancel = async (
    memberId: string,
    subscriptionId: string,
    state: string,
  ) => {
    try {
      const url = `${process.env.NEXT_PUBLIC_API_URL}/membership/cancel`;

      const response = await fetch(url, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ memberId, subscriptionId, state, memo }),
      });

      if (response.ok) {
        onFinish(response).then(() => {
          reset();
        });
        handleClose();
        window.location.reload();
      } else {
        console.error('Failed to cancel subscription');
      }
    } catch (error) {
      console.error('Error cancelling subscription: ', error);
    }
  };

...
 <Button
                    sx={buttonStyle}
                    onClick={(e) => {
                      e.preventDefault();
                      handleCancel(
                        subscription.member_id,
                        subscription.subscription_id,
                        membershipStateType,
                      );
                    }}
                  >
                    {membershipStateType === 'U'
                      ? '구독 해지'
                      : '멤버십 즉시 해지'}
                  </Button>

export const CancelModal = ({
  subscriptions = [],
  membershipStateType,
}: CancelModalProps) => {
  const {
    register,
    setValue,
    formState: { errors },
    handleSubmit,
    reset,
    refineCore: { onFinish },
  } = useForm<ICancelDetail, HttpError>({
    refineCoreProps: {
      resource: 'membership/cancel',
      // action: 'create',
      // redirect: 'list',
    },
  });
  const [open, setOpen] = useState(false);
  const [memo, setMemo] = useState('');

  const handleOpen = () => {
    setOpen(true);
  };
  const handleClose = () => {
    setOpen(false);
  };

  const handleCancel = async (
    memberId: string,
    subscriptionId: string,
    state: string,
  ) => {
    try {
      const url = `${process.env.NEXT_PUBLIC_API_URL}/membership/cancel`;

      const response = await fetch(url, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ memberId, subscriptionId, state, memo }),
      });

      if (response.ok) {
        onFinish(response).then(() => {
          reset();
        });
        handleClose();
        window.location.reload();
      } else {
        console.error('Failed to cancel subscription');
      }
    } catch (error) {
      console.error('Error cancelling subscription: ', error);
    }
  };

...
 <Button
                    sx={buttonStyle}
                    onClick={(e) => {
                      e.preventDefault();
                      handleCancel(
                        subscription.member_id,
                        subscription.subscription_id,
                        membershipStateType,
                      );
                    }}
                  >
                    {membershipStateType === 'U'
                      ? '구독 해지'
                      : '멤버십 즉시 해지'}
                  </Button>

When the button is clicked, fetch and useForm each call the API. How to only call fetch?

2 Replies

kapa.ai•2mo 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 ensure that only your custom fetch call is made and not the useForm API call, you need to adjust your useForm configuration. Specifically, you should avoid triggering the onFinish method of useForm since it is responsible for making the API call. Here's how you can modify your code: 1. Remove the onFinish call: Since you are handling the API call manually, you don't need to call onFinish. 2. Handle form reset and close manually: You can still reset the form and close the modal manually after your custom fetch call. Here is the updated code:

export const CancelModal = ({
  subscriptions = [],
  membershipStateType,
}: CancelModalProps) => {
  const {
    register,
    setValue,
    formState: { errors },
    handleSubmit,
    reset,
  } = useForm<ICancelDetail, HttpError>({
    refineCoreProps: {
      resource: 'membership/cancel',
      // action: 'create',
      // redirect: 'list',
    },
  });
  const [open, setOpen] = useState(false);
  const [memo, setMemo] = useState('');

  const handleOpen = () => {
    setOpen(true);
  };
  const handleClose = () => {
    setOpen(false);
  };

  const handleCancel = async (
    memberId: string,
    subscriptionId: string,
    state: string,
  ) => {
    try {
      const url = `${process.env.NEXT_PUBLIC_API_URL}/membership/cancel`;

      const response = await fetch(url, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ memberId, subscriptionId, state, memo }),
      });
if (response.ok) {
        // Manually reset the form and close the modal
        reset();
        handleClose();
        window.location.reload();
      } else {
        console.error('Failed to cancel subscription');
      }
    } catch (error) {
      console.error('Error cancelling subscription: ', error);
    }
  };

  return (
    <Button
      sx={buttonStyle}
      onClick={(e) => {
        e.preventDefault();
        handleCancel(
          subscription.member_id,
          subscription.subscription_id,
          membershipStateType,
        );
      }}
    >
      {membershipStateType === 'U' ? '구독 해지' : '멤버십 즉시 해지'}
    </Button>
  );
};

export const CancelModal = ({
  subscriptions = [],
  membershipStateType,
}: CancelModalProps) => {
  const {
    register,
    setValue,
    formState: { errors },
    handleSubmit,
    reset,
  } = useForm<ICancelDetail, HttpError>({
    refineCoreProps: {
      resource: 'membership/cancel',
      // action: 'create',
      // redirect: 'list',
    },
  });
  const [open, setOpen] = useState(false);
  const [memo, setMemo] = useState('');

  const handleOpen = () => {
    setOpen(true);
  };
  const handleClose = () => {
    setOpen(false);
  };

  const handleCancel = async (
    memberId: string,
    subscriptionId: string,
    state: string,
  ) => {
    try {
      const url = `${process.env.NEXT_PUBLIC_API_URL}/membership/cancel`;

      const response = await fetch(url, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ memberId, subscriptionId, state, memo }),
      });
if (response.ok) {
        // Manually reset the form and close the modal
        reset();
        handleClose();
        window.location.reload();
      } else {
        console.error('Failed to cancel subscription');
      }
    } catch (error) {
      console.error('Error cancelling subscription: ', error);
    }
  };

  return (
    <Button
      sx={buttonStyle}
      onClick={(e) => {
        e.preventDefault();
        handleCancel(
          subscription.member_id,
          subscription.subscription_id,
          membershipStateType,
        );
      }}
    >
      {membershipStateType === 'U' ? '구독 해지' : '멤버십 즉시 해지'}
    </Button>
  );
};

By removing the onFinish call, you ensure that only your custom fetch call is made when the button is clicked. This prevents the useForm hook from making an additional API call. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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