deep-jade•14mo ago

useCustom on Click?

I'm attempting to use a useCustom post call when a button is pressed. Re: this thread https://discord.com/channels/837692625737613362/1141851568493310072/1141925039504109609 -- useCustom does not have the property 'mutate'. How could I call useCustom on a button press?

8 Replies

kapa.ai•14mo ago

Hi @avangeous. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The useCustom hook in refine is used for sending custom query requests and it does not have a mutate method. If you want to trigger a custom action when a button is pressed, you should use the useCustomMutation hook instead. This hook returns a mutate method which you can call on a button press. Here is an example of how you can use useCustomMutation:

import { useCustomMutation, useApiUrl } from "@refinedev/core";  
  
interface ICategory {  
 id: number;  
 title: string;  
}  
  
const apiUrl = useApiUrl();  
  
const { mutate } = useCustomMutation<ICategory>();  
  
// Call this function when the button is pressed
const handleButtonClick = () => {
  mutate({  
   url: `${apiUrl}/categories`,  
   method: "post",  
   values: {  
    title: "New Category",  
   },  
  });  
}

import { useCustomMutation, useApiUrl } from "@refinedev/core";  
  
interface ICategory {  
 id: number;  
 title: string;  
}  
  
const apiUrl = useApiUrl();  
  
const { mutate } = useCustomMutation<ICategory>();  
  
// Call this function when the button is pressed
const handleButtonClick = () => {
  mutate({  
   url: `${apiUrl}/categories`,  
   method: "post",  
   values: {  
    title: "New Category",  
   },  
  });  
}

In this example, handleButtonClick is the function you would call when the button is pressed. It calls the mutate method from useCustomMutation to send a POST request to the /categories endpoint. Please note that useCustomMutation should not be used when creating, updating, or deleting a resource. For these operations, you should use the respective hooks: useCreate, useUpdate, or useDelete. For more information, you can refer to the useCustomMutation documentation (https://refine.dev/docs/api-reference/core/hooks/data/useCustomMutation/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

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

deep-jade•14mo ago

@kapa.ai Does useCustomMutation have a property to track its loading state?

kapa.ai•14mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, useCustomMutation does have a property to track its loading state. The hook returns a mutationResult object which includes an isLoading property. This property is a boolean that indicates whether the mutation request is currently in progress. Here is an example of how you can use it:

const { mutate, mutationResult } = useCustomMutation();

console.log(mutationResult.isLoading); // true if the mutation is in progress, false otherwise

const { mutate, mutationResult } = useCustomMutation();

console.log(mutationResult.isLoading); // true if the mutation is in progress, false otherwise

In this example, mutationResult.isLoading will be true while the mutation request is being processed, and false once it's completed. For more information, you can refer to the useCustomMutation documentation (https://refine.dev/docs/api-reference/core/hooks/data/useCustomMutation/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

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

deep-jade•14mo ago

@kapa.ai Property 'mutationResult' does not exist on type 'UseCustomMutationReturnType

kapa.ai•14mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I apologize for the confusion. The useCustomMutation hook in refine does not directly return a mutationResult property. Instead, it returns an object that includes the isLoading property, among others, which are part of the UseMutationResult from the TanStack Query's useMutation. Here's how you can use it:

const { mutate, isLoading } = useCustomMutation();

console.log(isLoading); // true if the mutation is in progress, false otherwise

const { mutate, isLoading } = useCustomMutation();

console.log(isLoading); // true if the mutation is in progress, false otherwise

In this example, isLoading will be true while the mutation request is being processed, and false once it's completed. For more information, you can refer to the useCustomMutation documentation (https://refine.dev/docs/api-reference/core/hooks/data/useCustomMutation/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

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