Invalid hook call. Hooks can only be called inside of the body of a function component
hello, i got this error
Invalid hook call. Hooks can only be called inside of the body of a function component
the function is called by a click event on a button
const doExternalCall = () => {
const apiUrl = useApiUrl();
console.log( apiUrl );
const { data: customData, isLoading: customIsLoading } = useCustom<PostUniqueCheckResponse>({
url:
${apiUrl}/strapi-chat
,
method: "get",
/*
config: {
headers: {
"x-custom-header": "foo-bar",
},
query: {
title: "Foo bar",
},
},
*/
});
console.log( customData );
};
what's wrong?15 Replies
Hi @dannywhiteagile. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The error you're encountering is due to the fact that you're trying to use a hook (
useApiUrl
and useCustom
) inside a regular JavaScript function (doExternalCall
). Hooks in React can only be used inside function components or custom hooks.
Here's a correct way to use hooks in your case:
In this example, useApiUrl
and useCustom
are called at the top level of the YourComponent
function component, not inside doExternalCall
. The doExternalCall
function, which is called when the button is clicked, then logs the values.
For more information, you can refer to the React Hooks documentation (https://reactjs.org/docs/hooks-rules.html) and the refine 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:
----------------------<@1129002557419827210> kapa.ai is still learning and improving, please let us know how it did by reacting below
passive-yellow•17mo ago
hello @dannywhiteagile
it's a react rule. you can't use hooks outside react component. actually error text is pretty clear
wise-whiteOP•17mo ago
does the provided solution works?
passive-yellow•17mo ago
yes bot's code seems valid
wise-whiteOP•16mo ago
I confirm, it works
this does not work. i would to call the useCustom only when doExternalCall is invoked
passive-yellow•16mo ago
refine uses tanstack query for data hooks
passive-yellow•16mo ago
Stack Overflow
React-Query: How to useQuery when button is clicked
I am new to this react-query library.
I know that when I want to fetch data, with this library I can do something like this:
const fetchData = async()=>{...}
// it starts fetching data from
passive-yellow•16mo ago
i believe this post should be helpfull
wise-whiteOP•16mo ago
yes, but there is no documentation for "manual: true" here
https://refine.dev/docs/api-reference/core/hooks/data/useCustom/
useCustom | refine
useCustom is used to send custom query requests using the Tanstack Query advantages. It is an extended version of TanStack Query's useQuery and not only supports all features of the mutation but also adds some extra features.
passive-yellow•16mo ago
what is manuel true ? I didn't see on stack overflow
all react query options is here
https://refine.dev/docs/api-reference/core/hooks/data/useCustom/#queryoptions
useCustom | refine
useCustom is used to send custom query requests using the Tanstack Query advantages. It is an extended version of TanStack Query's useQuery and not only supports all features of the mutation but also adds some extra features.
wise-whiteOP•16mo ago
i'm trying to use this
queryOptions: {
enabled: false,
},
but the refetch part does not work
passive-yellow•16mo ago
is it not sending any request ?
wise-whiteOP•16mo ago
it now works. thank you very
passive-yellow•16mo ago
I'm glad to hear that