wise-white
wise-white17mo ago

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
kapa.ai
kapa.ai17mo ago
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:
import { useCustom, useApiUrl } from "@refinedev/core";

interface PostUniqueCheckResponse {
isAvailable: boolean;
}

const YourComponent = () => {
const apiUrl = useApiUrl();
const { data: customData, isLoading: customIsLoading } = useCustom<PostUniqueCheckResponse>({
url: `${apiUrl}/strapi-chat`,
method: "get",
/*
config: {
headers: {
"x-custom-header": "foo-bar",
},
query: {
title: "Foo bar",
},
},
*/
});

const doExternalCall = () => {
console.log(apiUrl);
console.log(customData);
};

return (
<button onClick={doExternalCall}>Click me</button>
);
};
import { useCustom, useApiUrl } from "@refinedev/core";

interface PostUniqueCheckResponse {
isAvailable: boolean;
}

const YourComponent = () => {
const apiUrl = useApiUrl();
const { data: customData, isLoading: customIsLoading } = useCustom<PostUniqueCheckResponse>({
url: `${apiUrl}/strapi-chat`,
method: "get",
/*
config: {
headers: {
"x-custom-header": "foo-bar",
},
query: {
title: "Foo bar",
},
},
*/
});

const doExternalCall = () => {
console.log(apiUrl);
console.log(customData);
};

return (
<button onClick={doExternalCall}>Click me</button>
);
};
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: ----------------------
kapa.ai
kapa.ai17mo ago
<@1129002557419827210> kapa.ai is still learning and improving, please let us know how it did by reacting below
passive-yellow
passive-yellow17mo ago
hello @dannywhiteagile it's a react rule. you can't use hooks outside react component. actually error text is pretty clear
wise-white
wise-whiteOP17mo ago
does the provided solution works?
passive-yellow
passive-yellow17mo ago
yes bot's code seems valid
wise-white
wise-whiteOP16mo ago
I confirm, it works this does not work. i would to call the useCustom only when doExternalCall is invoked
passive-yellow
passive-yellow16mo ago
refine uses tanstack query for data hooks
passive-yellow
passive-yellow16mo 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
passive-yellow16mo ago
i believe this post should be helpfull
wise-white
wise-whiteOP16mo 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
passive-yellow16mo 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-white
wise-whiteOP16mo ago
i'm trying to use this queryOptions: { enabled: false, }, but the refetch part does not work
passive-yellow
passive-yellow16mo ago
is it not sending any request ?
wise-white
wise-whiteOP16mo ago
it now works. thank you very
passive-yellow
passive-yellow16mo ago
I'm glad to hear that

Did you find this page helpful?