Call useCustom on click

14 Replies

Hi @dreamer9067. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To call useCustom on a click event, you would typically use it inside a function that is triggered by the click event. However, please note that hooks cannot be called inside callbacks or loops, they must be called at the top level of a React function component or a custom hook. Here's a basic example of how you might structure this:

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

function MyComponent() {
  const apiUrl = useApiUrl();  

  const handleClick = () => {
    const { data, isLoading } = useCustom({
      url: `${apiUrl}/posts-unique-check`,  
      method: "get",  
      config: {  
        headers: {  
          "x-custom-header": "foo-bar",  
        },  
        query: {  
          title: "Foo bar",  
        },  
      },  
    });  
  }

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

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

function MyComponent() {
  const apiUrl = useApiUrl();  

  const handleClick = () => {
    const { data, isLoading } = useCustom({
      url: `${apiUrl}/posts-unique-check`,  
      method: "get",  
      config: {  
        headers: {  
          "x-custom-header": "foo-bar",  
        },  
        query: {  
          title: "Foo bar",  
        },  
      },  
    });  
  }

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

However, this is not a recommended way to use hooks. Hooks should be called at the top level of your component, not inside callbacks or loops. This is a rule of hooks enforced by React. If you need to perform a data fetch when a button is clicked, consider using a state variable to trigger the fetch. For more information, you can refer to the useCustom documentation (https://refine.dev/docs/api-reference/core/hooks/data/useCustom/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

adverse-sapphireOP•2y ago

@kapa.ai getting below issue: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The error message you're seeing is a common one when working with React hooks. It's telling you that you're trying to use a hook in a way that violates the Rules of Hooks (https://reactjs.org/docs/hooks-rules.html). Here are the rules: 1. Only call hooks at the top level: Don't call hooks inside loops, conditions, or nested functions. Hooks should always be used at the top level of your React functions. This ensures that hooks are called in the same order each time a component renders, which is necessary for React to correctly preserve the state of hooks between multiple useState and useEffect calls. 2. Only call hooks from React functions: You can call hooks from React function components or from custom hooks, but not from regular JavaScript functions. The error message also suggests a couple of other possible issues: - Mismatching versions of React and the renderer (such as React DOM): Make sure you're using matching versions of React and ReactDOM. You can check this in your package.json file or by running npm list react react-dom in your terminal. - More than one copy of React in the same app: This can happen if you have nested node_modules folders in your project, or if you're using npm link to link to another module that also includes React. You can check for multiple copies of React by running npm ls react in your terminal. If you're still having trouble, please provide more details about where and how you're calling your hook. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

adverse-sapphireOP•2y ago

@kapa.ai can u give any correct example of using useCustom hook on click of a button??

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Sure, I can provide an example of how you might structure this. However, please note that hooks cannot be called directly inside callbacks or loops, they must be called at the top level of a React function component or a custom hook. To handle this, you can use a state variable to trigger the useCustom hook when the button is clicked. Here's an example:

import { useCustom, useApiUrl } from "@refinedev/core";  
import { useState } from 'react';

function MyComponent() {
  const apiUrl = useApiUrl();  
  const [buttonClicked, setButtonClicked] = useState(false);

  const { data, isLoading } = useCustom({
    url: `${apiUrl}/posts-unique-check`,  
    method: "get",  
    config: {  
      headers: {  
        "x-custom-header": "foo-bar",  
      },  
      query: {  
        title: "Foo bar",  
      },  
    },  
  }, buttonClicked);  

  const handleClick = () => {
    setButtonClicked(true);
  }

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

import { useCustom, useApiUrl } from "@refinedev/core";  
import { useState } from 'react';

function MyComponent() {
  const apiUrl = useApiUrl();  
  const [buttonClicked, setButtonClicked] = useState(false);

  const { data, isLoading } = useCustom({
    url: `${apiUrl}/posts-unique-check`,  
    method: "get",  
    config: {  
      headers: {  
        "x-custom-header": "foo-bar",  
      },  
      query: {  
        title: "Foo bar",  
      },  
    },  
  }, buttonClicked);  

  const handleClick = () => {
    setButtonClicked(true);
  }

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

In this example, the useCustom hook is called at the top level of the component, but it only sends a request when the buttonClicked state is true. The handleClick function sets buttonClicked to true, triggering the useCustom hook. For more information, you can refer to the useCustom documentation (https://refine.dev/docs/api-reference/core/hooks/data/useCustom/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

adverse-sapphireOP•2y ago

@kapa.ai getting Expected 1 arguments, but got 2 on useCustom

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I apologize for the confusion. The useCustom hook does not take a second argument. The hook should be called with a single argument, an object that contains the configuration for the request. Here's a corrected example:

import { useCustom, useApiUrl } from "@refinedev/core";  
import { useState } from 'react';

function MyComponent() {
  const apiUrl = useApiUrl();  
  const [buttonClicked, setButtonClicked] = useState(false);
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  const { mutate } = useCustom({
    url: `${apiUrl}/posts-unique-check`,  
    method: "get",  
    config: {  
      headers: {  
        "x-custom-header": "foo-bar",  
      },  
      query: {  
        title: "Foo bar",  
      },  
    },
  });  

  const handleClick = async () => {
    setIsLoading(true);
    const response = await mutate();
    setData(response);
    setIsLoading(false);
  }

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

import { useCustom, useApiUrl } from "@refinedev/core";  
import { useState } from 'react';

function MyComponent() {
  const apiUrl = useApiUrl();  
  const [buttonClicked, setButtonClicked] = useState(false);
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  const { mutate } = useCustom({
    url: `${apiUrl}/posts-unique-check`,  
    method: "get",  
    config: {  
      headers: {  
        "x-custom-header": "foo-bar",  
      },  
      query: {  
        title: "Foo bar",  
      },  
    },
  });  

  const handleClick = async () => {
    setIsLoading(true);
    const response = await mutate();
    setData(response);
    setIsLoading(false);
  }

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

In this example, when the button is clicked, the handleClick function is called. This function calls the mutate function returned by useCustom, which sends the request. The response from the request is then stored in the data state variable. For more information, you can refer to the useCustom documentation (https://refine.dev/docs/api-reference/core/hooks/data/useCustom/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

adverse-sapphireOP•2y ago

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

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I apologize for the confusion. The useCustom hook does not return a mutate function. It returns a QueryObserverResult object, which includes properties like data and isLoading. If you want to perform a mutation (like a POST, PUT, or DELETE request), you should use the useCustomMutation hook instead. This hook does return a mutate function that you can call to perform the mutation. Here's an example of how you might use useCustomMutation:

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

function MyComponent() {
  const apiUrl = useApiUrl();  
  const [buttonClicked, setButtonClicked] = useState(false);

  const { mutate } = useCustomMutation();

  const handleClick = () => {
    mutate({  
      url: `${apiUrl}/categories`,  
      method: "post",  
      values: {  
        title: "New Category",  
      },  
    });
    setButtonClicked(true);
  }

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

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

function MyComponent() {
  const apiUrl = useApiUrl();  
  const [buttonClicked, setButtonClicked] = useState(false);

  const { mutate } = useCustomMutation();

  const handleClick = () => {
    mutate({  
      url: `${apiUrl}/categories`,  
      method: "post",  
      values: {  
        title: "New Category",  
      },  
    });
    setButtonClicked(true);
  }

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

In this example, when the button is clicked, the handleClick function is called. This function calls the mutate function returned by useCustomMutation, which sends the request. 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•2y ago

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

Call useCustom on click

Did you find this page helpful?