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?
K
kapa.ai212d 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: ----------------------
K
kapa.ai212d ago
<@1129002557419827210> kapa.ai is still learning and improving, please let us know how it did by reacting below
E
evident-indigo212d ago
hello @dannywhiteagile it's a react rule. you can't use hooks outside react component. actually error text is pretty clear
Q
quickest-silver212d ago
does the provided solution works?
E
evident-indigo212d ago
yes bot's code seems valid
Q
quickest-silver212d ago
I confirm, it works this does not work. i would to call the useCustom only when doExternalCall is invoked
E
evident-indigo212d ago
refine uses tanstack query for data hooks
E
evident-indigo212d 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
E
evident-indigo212d ago
i believe this post should be helpfull
Q
quickest-silver212d 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.
E
evident-indigo212d 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.
Q
quickest-silver212d ago
i'm trying to use this queryOptions: { enabled: false, }, but the refetch part does not work
E
evident-indigo212d ago
is it not sending any request ?
Q
quickest-silver212d ago
it now works. thank you very
E
evident-indigo212d ago
I'm glad to hear that
More Posts
useEditableTableHi, i notice that whenever I tried to fetch data using useEditableTable it sends the query with thisuseEditableTable short glitchI'm looking at `useEditableTable` from antd and the thing is there is a short glitch when pressingUpgrade Ant Design from v4 to v5 not workingI am trying to upgrade Ant Design from v4 to v5 so that I can upgrade Refine. As per your docs, I amHandle Errors inside of Forms being posted to a custom APIHey everyone! We're using Refine to such a great extend and I'm very thankful for all the work that How can I just see the current fields value?So this seems like a really dumb question, but using refine, its really difficult to use the value oHow to hide edit button action on specific row at list resourcehiding edit action for specific data in list resourceUnable to modify login error messageIn this documentation https://refine.dev/docs/api-reference/core/components/auth-page/#login Under aredirect to edit after create successi want to redirect user to edit page with its id after create is successfuladding data from useCustom in useForm default values``` const { data } = useCustom({ method: "get", url: "/advertisers/initialize", useCustom filterhey, is it possible to set filter when using useCustom to get a specific range of dates when fetchinhandle axios console error coming from useCreate````import { HttpError } from "@refinedev/core"; import axios, { AxiosRequestConfig } from "axios"; How to use nested Route with antdInferenceHow to use nested Route with antdInferencehandling errors and accessing objects``` onError: async (error) => { console.log(error); if ( error.statusCustom title handler with Typescriptwrite a custom title handler with TypescriptIs Simple-rest made for auth ?is simple rest made just for basic api calls? cause i m trying to implement auth and its forcing me How to use react router lazy for routes?I want to use the react router lazy api to load the components on route as example here https://reacUseTable does not call Connection endpoint for countI did a quick tutorial where I had a single book page with Refine and Ant. I defined the resources iHow to navigate to a list page with a filter parameter?I want to navigate to a list page by setting some filter parameter in the URL. How can I achieve thaGet return value from Edit page```tsx <Edit saveButtonProps={saveButtonProps} > <Form {...formProps} layout="vertical" onFiniAntdInferencer not workingI'm trying to use AntdInferencer when create but it keep showing loading button ```tsx </Route>