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
fair-rose•12mo ago
hello @dannywhiteagile
it's a react rule. you can't use hooks outside react component. actually error text is pretty clear
conscious-sapphire•12mo ago
does the provided solution works?
fair-rose•12mo ago
yes bot's code seems valid
conscious-sapphire•12mo ago
I confirm, it works
this does not work. i would to call the useCustom only when doExternalCall is invoked
fair-rose•12mo ago
refine uses tanstack query for data hooks
fair-rose•12mo 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
fair-rose•12mo ago
i believe this post should be helpfull
conscious-sapphire•12mo 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.
fair-rose•12mo 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.
conscious-sapphire•12mo ago
i'm trying to use this
queryOptions: {
enabled: false,
},
but the refetch part does not work
fair-rose•12mo ago
is it not sending any request ?
conscious-sapphire•12mo ago
it now works. thank you very
fair-rose•12mo ago
I'm glad to hear that