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:
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:
----------------------<@560876002046377984> kapa.ai is still learning and improving, please let us how it did by reacting below
quickest-silver•14mo 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
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:
----------------------<@560876002046377984> kapa.ai is still learning and improving, please let us how it did by reacting below
quickest-silver•14mo ago
@kapa.ai can u give any correct example of using useCustom hook on click of a button??
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:
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:
----------------------<@560876002046377984> kapa.ai is still learning and improving, please let us how it did by reacting below
quickest-silver•14mo ago
@kapa.ai getting Expected 1 arguments, but got 2 on useCustom
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:
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:
----------------------<@560876002046377984> kapa.ai is still learning and improving, please let us how it did by reacting below
quickest-silver•14mo ago
@kapa.ai getting error:
Property 'mutate' does not exist on type 'QueryObserverResult<CustomResponse<BaseRecord>, HttpError> & UseLoadingOvertimeReturnType'
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
:
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:
----------------------<@560876002046377984> kapa.ai is still learning and improving, please let us how it did by reacting below