wise-white•6mo ago

how can i remake this 3 functions using refine hooks?

I have this 3 functions that would make a request in a API. How can I achieve this using refine hooks? This are the functions:

  const arriveStep = async () => {
    await fetch(`${apiURL}/routes/${route?.id}/arrive-step`, {
      method: "PATCH",
    });
    refetch();
  };

  const completeStep = async () => {
    await fetch(`${apiURL}/routes/${route?.id}/complete-step`, {
      method: "PATCH",
    });
    refetch();
  };

  const skipStep = async () => {
    await fetch(`${apiURL}/routes/${route?.id}/skip-step`, {
      method: "PATCH",
    });
    refetch();
  };

  const arriveStep = async () => {
    await fetch(`${apiURL}/routes/${route?.id}/arrive-step`, {
      method: "PATCH",
    });
    refetch();
  };

  const completeStep = async () => {
    await fetch(`${apiURL}/routes/${route?.id}/complete-step`, {
      method: "PATCH",
    });
    refetch();
  };

  const skipStep = async () => {
    await fetch(`${apiURL}/routes/${route?.id}/skip-step`, {
      method: "PATCH",
    });
    refetch();
  };

5 Replies

kapa.ai•6mo ago

Hi @Jaoc1811. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can use the useCustom hook provided by Refine to make custom API requests. This hook is designed to handle scenarios where you need to make API requests that don't fit into the standard CRUD operations. Here's how you can rewrite your functions using the useCustom hook:

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

const { mutate: arriveStep } = useCustom({
  resource: `routes/${route?.id}/arrive-step`,
  method: "PATCH",
});

const { mutate: completeStep } = useCustom({
  resource: `routes/${route?.id}/complete-step`,
  method: "PATCH",
});

const { mutate: skipStep } = useCustom({
  resource: `routes/${route?.id}/skip-step`,
  method: "PATCH",
});

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

const { mutate: arriveStep } = useCustom({
  resource: `routes/${route?.id}/arrive-step`,
  method: "PATCH",
});

const { mutate: completeStep } = useCustom({
  resource: `routes/${route?.id}/complete-step`,
  method: "PATCH",
});

const { mutate: skipStep } = useCustom({
  resource: `routes/${route?.id}/skip-step`,
  method: "PATCH",
});

In this example, mutate is a function that you can call to execute the API request. It returns a promise that resolves when the request is complete. Please note that you need to replace route?.id with the actual id of the route. For more information, you can refer to the Refine documentation on the useCustom hook (https://refine.dev/docs/data/hooks/use-custom/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

wise-white•6mo ago

@kapa.ai i'm getting this error message: Property 'mutate' does not exist on type 'QueryObserverResult<CustomResponse<BaseRecord>, HttpError> & UseLoadingOvertimeReturnType'

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The error message you're seeing suggests that you're trying to access the mutate property on a QueryObserverResult object or a UseLoadingOvertimeReturnType object. However, the mutate property is not part of these objects. If you're trying to use the mutate function from a mutation hook like useUpdate, useCreate, or useCustom, you should destructure it directly from the hook call, like this:

const { mutate } = useUpdate();

const { mutate } = useUpdate();

If you're trying to use the mutate function within a useQuery or useTable hook, you might be misunderstanding the usage of these hooks. The useQuery and useTable hooks are used for fetching data, not for mutating it. If you want to mutate (create, update, or delete) data, you should use the appropriate mutation hook (useCreate, useUpdate, or useDelete). For more information, you can refer to the Refine documentation on data hooks (https://refine.dev/docs/data/hooks/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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