R
Refine

ask-any-question

Call useCustom on click

Ooptimistic-gold7/11/2023
How to call a useCustom when i click on a button ?
Kkapa.ai7/11/2023
Hi @realdragonma. 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 when a button is clicked, you can wrap the useCustom hook inside a function and call that function on the button's onClick event. However, the extracts provided do not contain a direct example of this. Here's a general idea of how you can do it:
import { useCustom, useApiUrl } from "@refinedev/core";

const MyComponent = () => {
const apiUrl = useApiUrl();

const handleClick = () => {
const { data, isLoading } = useCustom({
url: `${apiUrl}/my-endpoint`,
method: "get",
config: {
headers: {
"x-custom-header": "foo-bar",
},
query: {
title: "Foo bar",
},
},
});
}

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

const MyComponent = () => {
const apiUrl = useApiUrl();

const handleClick = () => {
const { data, isLoading } = useCustom({
url: `${apiUrl}/my-endpoint`,
method: "get",
config: {
headers: {
"x-custom-header": "foo-bar",
},
query: {
title: "Foo bar",
},
},
});
}

return (
<button onClick={handleClick}>Call useCustom</button>
);
};
Please note that hooks should not be called conditionally or inside a callback, as it violates the Rules of Hooks (https://reactjs.org/docs/hooks-rules.html). The example above is a simplified illustration and may not work as expected. For more information on how to use the useCustom hook, 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: ----------------------
Kkapa.ai7/11/2023
<@214840332943097856> kapa.ai is still learning and improving, please let us how it did by reacting below
Ooptimistic-gold7/11/2023
So this might be good ? @kapa.ai
const selectInstance = (activityID: string, instanceID: string) => {
const {isLoading} = useCustom({
method: "post",
url: process.env.REACT_APP_LA_URL!+process.env.REACT_APP_LA_API_PATH,
config: {
payload: {
activityID: activityID,
instanceID: instanceID
}
}
})
}
return (
<button onClick={() => selectInstance('1','1')}>Button</button>
)
const selectInstance = (activityID: string, instanceID: string) => {
const {isLoading} = useCustom({
method: "post",
url: process.env.REACT_APP_LA_URL!+process.env.REACT_APP_LA_API_PATH,
config: {
payload: {
activityID: activityID,
instanceID: instanceID
}
}
})
}
return (
<button onClick={() => selectInstance('1','1')}>Button</button>
)
@kapa.ai si this might be good ?
const selectInstance = (activityID: string, instanceID: string) => {
const {isLoading} = useCustom({
method: "post",
url: process.env.REACT_APP_LA_URL!+process.env.REACT_APP_LA_API_PATH,
config: {
payload: {
activityID: activityID,
instanceID: instanceID
}
}
})
}
return (
<button onClick={() => selectInstance('1','1')}>Button</button>
)
const selectInstance = (activityID: string, instanceID: string) => {
const {isLoading} = useCustom({
method: "post",
url: process.env.REACT_APP_LA_URL!+process.env.REACT_APP_LA_API_PATH,
config: {
payload: {
activityID: activityID,
instanceID: instanceID
}
}
})
}
return (
<button onClick={() => selectInstance('1','1')}>Button</button>
)
Kkapa.ai7/11/2023
Let me check the knowledge base for you. One moment! :books: ---------------------- Unfortunately, the code you provided will not work as expected because it violates the Rules of Hooks (https://reactjs.org/docs/hooks-rules.html) in React. Hooks cannot be called inside callbacks, loops, conditions, or nested functions. They should always be used at the top level of your React function. Instead, you can use the useCallback hook to create a memoized version of the function that will be triggered on the button click. Then, inside this function, you can use the useCustom hook. However, the extracts provided do not contain a direct example of this. Here's a general idea of how you can do it:
import { useCustom, useApiUrl } from "@refinedev/core";

const MyComponent = () => {
const apiUrl = useApiUrl();

const selectInstance = useCallback((activityID, instanceID) => {
const { data, isLoading } = useCustom({
url: `${apiUrl}/my-endpoint`,
method: "post",
config: {
payload: {
activityID: activityID,
instanceID: instanceID
}
},
});
}, [apiUrl]);

return (
<button onClick={() => selectInstance('1','1')}>Call useCustom</button>
);
};
import { useCustom, useApiUrl } from "@refinedev/core";

const MyComponent = () => {
const apiUrl = useApiUrl();

const selectInstance = useCallback((activityID, instanceID) => {
const { data, isLoading } = useCustom({
url: `${apiUrl}/my-endpoint`,
method: "post",
config: {
payload: {
activityID: activityID,
instanceID: instanceID
}
},
});
}, [apiUrl]);

return (
<button onClick={() => selectInstance('1','1')}>Call useCustom</button>
);
};
Please note that this is a simplified illustration and may not work as expected. For more information on how to use the useCustom hook, 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: ----------------------
Kkapa.ai7/11/2023
<@214840332943097856> kapa.ai is still learning and improving, please let us how it did by reacting below
Ooptimistic-gold7/11/2023
@kapa.ai 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 See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. Error: 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 See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. at Object.throwInvalidHookError (http://localhost:3000/static/js/bundle.js:299636:13) at useContext (http://localhost:3000/static/js/bundle.js:319451:25) at Y (http://localhost:3000/static/js/bundle.js:99096:60) at Is (http://localhost:3000/static/js/bundle.js:98848:11) at http://localhost:3000/static/js/bundle.js:4416:67 at onClick (http://localhost:3000/static/js/bundle.js:4590:38) at handleClick (http://localhost:3000/static/js/bundle.js:110647:55) at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:289295:18) at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:289339:20) at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:289396:35)
Rules of Hooks – React
The library for web and native user interfaces
Kkapa.ai7/11/2023
Let me check the knowledge base for you. One moment! :books: ---------------------- The error message you're seeing is due to a violation of the Rules of Hooks (https://reactjs.org/docs/hooks-rules.html). Hooks can only be called at the top level of a React function component or a custom hook. They cannot be called inside callbacks, loops, conditions, or nested functions. In your case, you're trying to call the useCustom hook inside a callback function (selectInstance), which is not allowed. Unfortunately, the useCustom hook cannot be used directly in an event handler like onClick because it's a hook and must follow the rules of hooks. Instead, you can use the useCustomMutation hook, which is designed for such use cases. It returns a mutate function that you can call in response to events like button clicks. Here's a general idea of how you can do it:
import { useCustomMutation, useApiUrl } from "@refinedev/core";

const MyComponent = () => {
const apiUrl = useApiUrl();

const { mutate } = useCustomMutation();

const handleClick = () => {
mutate({
url: `${apiUrl}/my-endpoint`,
method: "post",
values: {
activityID: '1',
instanceID: '1'
},
});
}

return (
<button onClick={handleClick}>Call useCustomMutation</button>
);
};
import { useCustomMutation, useApiUrl } from "@refinedev/core";

const MyComponent = () => {
const apiUrl = useApiUrl();

const { mutate } = useCustomMutation();

const handleClick = () => {
mutate({
url: `${apiUrl}/my-endpoint`,
method: "post",
values: {
activityID: '1',
instanceID: '1'
},
});
}

return (
<button onClick={handleClick}>Call useCustomMutation</button>
);
};
Please note that this is a simplified illustration and may not work as expected. For more information on how to use the useCustomMutation hook, 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: ----------------------
Kkapa.ai7/11/2023
<@214840332943097856> kapa.ai is still learning and improving, please let us how it did by reacting below
Ooptimistic-gold7/11/2023
@kapa.ai j'ai l'erreur suivante : Not implemented custom on data provider.
Kkapa.ai7/11/2023
Let me check the knowledge base for you. One moment! :books: ---------------------- The error message "Not implemented custom on data provider" suggests that the custom method is not implemented in your data provider. In refine, the custom method is used to make custom API requests that are not covered by the standard CRUD operations. If you're trying to use the useCustom or useCustomMutation hooks, you need to ensure that your data provider has a custom method implemented. Here's a general structure of how the custom method can be implemented in a data provider:
const dataProvider = {
// ...other methods,
custom: ({ resource, payload, metaData }) => {
// Implement your custom API request logic here
throw Error("Not implemented custom on data provider.");
},
};
const dataProvider = {
// ...other methods,
custom: ({ resource, payload, metaData }) => {
// Implement your custom API request logic here
throw Error("Not implemented custom on data provider.");
},
};
Please note that the actual implementation of the custom method will depend on your specific API and requirements. For more information on how to create a custom data provider, you can refer to the Create Data Provider From Scratch (https://refine.dev/docs/tutorial/understanding-dataprovider/create-dataprovider/) section in the refine documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
Kkapa.ai7/11/2023
<@214840332943097856> kapa.ai is still learning and improving, please let us how it did by reacting below

Looking for more? Join the community!

R
Refine

ask-any-question

Join Server
Recommended Posts
Refine lib error on buildI have this error when I try to build my project : ``` package.json (scripts) ... "build":Trigger useCustom on clickIs there any way to trigger an useCustom on click on a button ?Custom CRUD operationsCan anyone point me towards resources/docs where I can learn about implementing custom crud operatioCan you load/host Refine with Serverless?I want to save costs in AWS and would like to host Refine in Lambda, would that be possible?Supabase clone with new idWhen I am trying to clone a record and hit save I get the error **duplicate key value violates uniuseTranslate doesn't work at app.tsUsing refine v4 I used useTranslate inside app.ts Refine - resources And it's not workingRefetch not working as expected (Table not updating)Hi! I'm using: `tableQueryResult: { refetch }` from useTable, and `refetch` from useList in twRefreshing via RefreshButton & On an IntervalHi! I have three questions relating to refreshing data: 1. I've used RefreshButton with an empty sLayout prop in Refine components is deprecated. What alternatives?How to use my custom layouts if Layout prop in Refine components is deprecated.What the point to duplicate same path in resources and router?What the point to duplicate same path in resources and router?is there any framework restrictions ?Hi can i build project on nodejs ?React refine build is too beefynpm run build inside a docker container is not working, it is taking 5+ minutes no matter the computHow to add Google OAuth as ProviderI can see `providers` in Login Page but there is no where i can find implementation of defination ofEnvironment variables during runtimeAfter running ```npm run build``` is it possible for me to still set the environment variables, suchspecifying useShow endpointHow can I specify the useShow resource/endpoint?Setting resource for data providerHow can I set the resource attribute that is sent to my dataProvider by my saveButtonProps? Here is Custom create routeHow can I add a custom post route for my Create page? Here is my current code: ``` <Create istwo list pages with same resourceI need multiple list pages which are using same resource but with a different permanent filters. so I have this super strange error and I dont know why ... Instance created by useForm is not connectedI have this super strange error and I dont know why ... Instance created by useForm is not connectedSub ResourcesHow can i create sub resources? I have teams and tasks resources. I want to relate the tasks with te