Call useCustom on click

How to call a useCustom when i click on a button ?

11 Replies

kapa.ai•13mo ago

Hi @realdragonma. 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 when a button is clicked, you can wrap the useCustom hook inside a function and call that function on the button's onClick event. However, the extracts provided do not contain a direct example of this. Here's a general idea of how you can do it:

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

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

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

  return (
    <button onClick={handleClick}>Call useCustom</button>
  );
};

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

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

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

  return (
    <button onClick={handleClick}>Call useCustom</button>
  );
};

Please note that hooks should not be called conditionally or inside a callback, as it violates the Rules of Hooks (https://reactjs.org/docs/hooks-rules.html). The example above is a simplified illustration and may not work as expected. For more information on how to use the useCustom hook, 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•13mo ago

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

absent-sapphire•13mo ago

So this might be good ? @kapa.ai

const selectInstance = (activityID: string, instanceID: string) => {
        const {isLoading} = useCustom({
            method: "post",
            url: process.env.REACT_APP_LA_URL!+process.env.REACT_APP_LA_API_PATH,
            config: {
                payload: {
                    activityID: activityID,
                    instanceID: instanceID
                }
            }
        })
    }
return (
  <button onClick={() => selectInstance('1','1')}>Button</button>
)

const selectInstance = (activityID: string, instanceID: string) => {
        const {isLoading} = useCustom({
            method: "post",
            url: process.env.REACT_APP_LA_URL!+process.env.REACT_APP_LA_API_PATH,
            config: {
                payload: {
                    activityID: activityID,
                    instanceID: instanceID
                }
            }
        })
    }
return (
  <button onClick={() => selectInstance('1','1')}>Button</button>
)

@kapa.ai si this might be good ?

const selectInstance = (activityID: string, instanceID: string) => {
        const {isLoading} = useCustom({
            method: "post",
            url: process.env.REACT_APP_LA_URL!+process.env.REACT_APP_LA_API_PATH,
            config: {
                payload: {
                    activityID: activityID,
                    instanceID: instanceID
                }
            }
        })
    }
return (
  <button onClick={() => selectInstance('1','1')}>Button</button>
)

const selectInstance = (activityID: string, instanceID: string) => {
        const {isLoading} = useCustom({
            method: "post",
            url: process.env.REACT_APP_LA_URL!+process.env.REACT_APP_LA_API_PATH,
            config: {
                payload: {
                    activityID: activityID,
                    instanceID: instanceID
                }
            }
        })
    }
return (
  <button onClick={() => selectInstance('1','1')}>Button</button>
)

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Unfortunately, the code you provided will not work as expected because it violates the Rules of Hooks (https://reactjs.org/docs/hooks-rules.html) in React. Hooks cannot be called inside callbacks, loops, conditions, or nested functions. They should always be used at the top level of your React function. Instead, you can use the useCallback hook to create a memoized version of the function that will be triggered on the button click. Then, inside this function, you can use the useCustom hook. However, the extracts provided do not contain a direct example of this. Here's a general idea of how you can do it:

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

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

  const selectInstance = useCallback((activityID, instanceID) => {
    const { data, isLoading } = useCustom({  
      url: `${apiUrl}/my-endpoint`,  
      method: "post",  
      config: {  
        payload: {
          activityID: activityID,
          instanceID: instanceID
        }
      },  
    });  
  }, [apiUrl]);

  return (
    <button onClick={() => selectInstance('1','1')}>Call useCustom</button>
  );
};

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

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

  const selectInstance = useCallback((activityID, instanceID) => {
    const { data, isLoading } = useCustom({  
      url: `${apiUrl}/my-endpoint`,  
      method: "post",  
      config: {  
        payload: {
          activityID: activityID,
          instanceID: instanceID
        }
      },  
    });  
  }, [apiUrl]);

  return (
    <button onClick={() => selectInstance('1','1')}>Call useCustom</button>
  );
};

Please note that this is a simplified illustration and may not work as expected. For more information on how to use the useCustom hook, 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•13mo ago

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

absent-sapphire•13mo ago

@kapa.ai 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 See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. Error: 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 See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. at Object.throwInvalidHookError (http://localhost:3000/static/js/bundle.js:299636:13) at useContext (http://localhost:3000/static/js/bundle.js:319451:25) at Y (http://localhost:3000/static/js/bundle.js:99096:60) at Is (http://localhost:3000/static/js/bundle.js:98848:11) at http://localhost:3000/static/js/bundle.js:4416:67 at onClick (http://localhost:3000/static/js/bundle.js:4590:38) at handleClick (http://localhost:3000/static/js/bundle.js:110647:55) at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:289295:18) at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:289339:20) at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:289396:35)

Rules of Hooks – React

The library for web and native user interfaces

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The error message you're seeing is due to a violation of the Rules of Hooks (https://reactjs.org/docs/hooks-rules.html). Hooks can only be called at the top level of a React function component or a custom hook. They cannot be called inside callbacks, loops, conditions, or nested functions. In your case, you're trying to call the useCustom hook inside a callback function (selectInstance), which is not allowed. Unfortunately, the useCustom hook cannot be used directly in an event handler like onClick because it's a hook and must follow the rules of hooks. Instead, you can use the useCustomMutation hook, which is designed for such use cases. It returns a mutate function that you can call in response to events like button clicks. Here's a general idea of how you can do it:

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

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

  const { mutate } = useCustomMutation();

  const handleClick = () => {
    mutate({  
      url: `${apiUrl}/my-endpoint`,  
      method: "post",  
      values: {  
        activityID: '1',
        instanceID: '1'
      },  
    });  
  }

  return (
    <button onClick={handleClick}>Call useCustomMutation</button>
  );
};

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

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

  const { mutate } = useCustomMutation();

  const handleClick = () => {
    mutate({  
      url: `${apiUrl}/my-endpoint`,  
      method: "post",  
      values: {  
        activityID: '1',
        instanceID: '1'
      },  
    });  
  }

  return (
    <button onClick={handleClick}>Call useCustomMutation</button>
  );
};

Please note that this is a simplified illustration and may not work as expected. For more information on how to use the useCustomMutation hook, 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•13mo ago

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

absent-sapphire•13mo ago

@kapa.ai j'ai l'erreur suivante : Not implemented custom on data provider.

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The error message "Not implemented custom on data provider" suggests that the custom method is not implemented in your data provider. In refine, the custom method is used to make custom API requests that are not covered by the standard CRUD operations. If you're trying to use the useCustom or useCustomMutation hooks, you need to ensure that your data provider has a custom method implemented. Here's a general structure of how the custom method can be implemented in a data provider:

const dataProvider = {
  // ...other methods,
  custom: ({ resource, payload, metaData }) => {
    // Implement your custom API request logic here
    throw Error("Not implemented custom on data provider.");
  },
};

const dataProvider = {
  // ...other methods,
  custom: ({ resource, payload, metaData }) => {
    // Implement your custom API request logic here
    throw Error("Not implemented custom on data provider.");
  },
};

Please note that the actual implementation of the custom method will depend on your specific API and requirements. For more information on how to create a custom data provider, you can refer to the Create Data Provider From Scratch (https://refine.dev/docs/tutorial/understanding-dataprovider/create-dataprovider/) section in the refine documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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