make an api call only on button click

8 Replies

Hi @jash.s. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In refine, making an API call on button click depends on the data provider you are using. You can use data hooks to make these API calls. Unfortunately, the provided knowledge sources do not contain a specific example of making an API call on button click. However, you can refer to the data hooks documentation on how to pass custom headers and adjust data provider if necessary: Data Hooks Documentation (https://refine.dev/docs/data/hooks/use-show/#usage) For more immediate guidance and support, consider joining the Discord channel mentioned in the discussion (https://github.com/refinedev/refine/discussions/5718). There, you can interact with an AI bot that can assist you with various questions and queries. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

ambitious-aqua•7mo ago

is there a hook like mutate to make an api call on when a button is click @kapa.ai

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, there are several hooks in Refine that you can use to make API calls when a button is clicked. These hooks include useCreate, useUpdate, useDelete, and useCustomMutation. Each of these hooks returns a mutate function that you can use to make the API call. Here's a basic example of how you can use the mutate function from the useCustomMutation hook to make an API call when a button is clicked:

import { useCustomMutation, useApiUrl } from "@refinedev/core";  

const apiUrl = useApiUrl();  

const { mutate } = useCustomMutation();  

const handleClick = () => {
  mutate({  
    url: `${apiUrl}/your-endpoint`,  
    method: "post",  
    values: {  
      // your data here
    },  
  });  
}

return (
  <button onClick={handleClick}>Click me</button>
);

import { useCustomMutation, useApiUrl } from "@refinedev/core";  

const apiUrl = useApiUrl();  

const { mutate } = useCustomMutation();  

const handleClick = () => {
  mutate({  
    url: `${apiUrl}/your-endpoint`,  
    method: "post",  
    values: {  
      // your data here
    },  
  });  
}

return (
  <button onClick={handleClick}>Click me</button>
);

In this example, when the button is clicked, it will trigger the handleClick function, which calls the mutate function to make the API call. Please note that useCustomMutation should not be used when creating, updating, or deleting a resource. For these operations, you should use the useCreate, useUpdate, or useDelete hooks respectively. For more information, you can refer to the useCustomMutation documentation (https://refine.dev/docs/data/hooks/use-custom-mutation). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

ambitious-aqua•7mo ago

@kapa.ai it is a get call

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- If you want to make a GET request when a button is clicked, you can use the useQuery hook from React Query, which is used under the hood by Refine. Here's a basic example:

import { useQuery } from "react-query";
import axios from "axios";

const fetchMyApi = async () => {
  const { data } = await axios.get('<https://my-api.com/data'>);
  return data;
}

const MyComponent = () => {
  const { refetch } = useQuery('myKey', fetchMyApi, { enabled: false });

  const handleClick = () => {
    refetch();
  }

  return (
    <button onClick={handleClick}>Fetch Data</button>
  );
}

import { useQuery } from "react-query";
import axios from "axios";

const fetchMyApi = async () => {
  const { data } = await axios.get('<https://my-api.com/data'>);
  return data;
}

const MyComponent = () => {
  const { refetch } = useQuery('myKey', fetchMyApi, { enabled: false });

  const handleClick = () => {
    refetch();
  }

  return (
    <button onClick={handleClick}>Fetch Data</button>
  );
}

In this example, useQuery is set to not run automatically by setting enabled to false. When the button is clicked, it triggers the handleClick function, which calls refetch to make the API call. Please note that this is a general React Query usage and not specific to Refine. In Refine, data fetching is usually handled by resource-based hooks like useList or useOne. If you want to make a custom API request, you can use the useCustom hook. For more information, you can refer to the Data Fetching documentation (https://refine.dev/docs/guides-concepts/data-fetching). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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