queryOptions
I want to hit an Api with a specific route, for exampe, lets say api/user-directories/ for example to show a root directory. how can I use queryOptions on a table to be able to add those query parameters to the query? I'm totally stuck on this.
const {tableProps, sorter} = useTable<any>({
initialSorter: [
{
field: "id",
order: "desc",
},
],
initialPageSize: 25,
queryOptions: {
queryKey: 'path',
}
});
20 Replies
Hey @rothwulf 👋 ,
Thanks for reaching out to us. Could this be what you're looking for?
https://refine.dev/docs/faq/#how-can-i-request-an-api-with-nested-route
flat-fuchsia•2y ago
Thank you very much @Omer. Let me check please and try in my codebase. I really appreciate it.
No @Omer It didn't work. when I add the nested route here, I don't hit the api from the backend.
Sorry, I didn't understand exactly what you want to do
flat-fuchsia•2y ago
i need to make a query to a route of a Api with this kind of structure for example: api/v1/profile-directories?path=%2F
Because I don't know how to pass the query parameters using queryOptions:
const {tableProps, sorter} = useTable<any>({
initialSorter: [
{
field: "id",
order: "desc",
},
],
initialPageSize: 25,
queryOptions:
});
I have no idea about what I should pass in queryOptions for passing that path=%2F query parameter.
Sorry if I don't have too much knowledge about react-query, but this is related to React Query.
Aha okay. You can use "metaData" for this. Could you check out this doc?
https://refine.dev/docs/faq/#how-i-can-override-specific-function-of-data-providers
FAQ | refine
How can I change the form data before submitting it to the API?
flat-fuchsia•2y ago
Sure, thank you very much. I really appreciate your help @Omer
If it doesn't work, just let us know. We will be happy to assist you ⚡️
flat-fuchsia•2y ago
Thank you very much.
Sorry @Omer I don't really understand how to use it. I didn't sleep all night trying to solve this issue.
Something like this:?
const {tableProps, sorter} = useTable<any>({
initialSorter: [
{
field: "id",
order: "desc",
},
],
initialPageSize: 25,
resource: "<path with query parameters here?",
metaData: {
httpMethod: "patch",
}
});
But this requires to modify the App.js and I was asking to only touch the file with the table.
and to use queryOptions according to my team.
Could you check this?
https://refine.dev/docs/api-reference/general-concepts/#metadata
General Concepts | refine
- refine core is fully independent of UI. So you can use core components and hooks without any UI dependency.
flat-fuchsia•2y ago
Sure, but there is not a way to use the queryOptions?
You can't with queryOptions. You can pass data to your dataProvider using metaData 🚀
flat-fuchsia•2y ago
Thank you very much @Omer, then, I'll better discuss with my team about this.
I created an example for you 🚀 I hope it helps you
https://stackblitz.com/edit/refinedev-refine-du56u7?file=src%2FApp.tsx,src%2Fpages%2Fposts%2Flist.tsx%3AL54&preset=node
flat-fuchsia•2y ago
Thank you very much @Omer
Hi @Omer can I ask you one more question please?
Yes
flat-fuchsia•2y ago
Thank you very much.
flat-fuchsia•2y ago
In the case that for example, the fields of a table like the table you showed me, were not just records, but for example folders. How can I implement a functionality that shows me the contect of each folder with a click. I'm sorry for asking too much. Just I started with Refine two days ago and it's being a little bit hard to understand the whole entire system.
At the moment I'm trying, using useShow and useCustom but I'm not pretty sure.
Don't worries 🍻 Is this what you are looking for?
https://refine.dev/docs/examples/table/react-table/advanced-react-table/
flat-fuchsia•2y ago
let me check please and thanks a lot!
No @Omer, not really. Similar but when I click a button I need to see the content of each listed item (considering that the item is a directory).
Sorry, I don't understand exactly what you want to do. Have you finished the refine tutorials?
https://refine.dev/docs/
Tutorials | refine
Introduction