R
Refine

ask-any-question

How to deal with a resource name that has a variable in it?

Mmetropolitan-bronze1/3/2024
My resource name is something like categories/:id/posts this is a list of posts for a specific categories. How can I create a resources based on this url name convention?
Kkapa.ai1/3/2024
Hi @dipbazz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In refine, you can define your resources and their action paths in the <Refine> component under the resources property. This informs refine to use these paths when generating the breadcrumbs, menus, handling redirections, and inferring the current resource and action. For your case, you can define your resource as follows:
{
name: "posts",
list: "/categories/:id/posts",
create: "/categories/:id/posts/create",
edit: "/categories/:id/posts/edit/:id",
meta: {
canDelete: true,
},
}
{
name: "posts",
list: "/categories/:id/posts",
create: "/categories/:id/posts/create",
edit: "/categories/:id/posts/edit/:id",
meta: {
canDelete: true,
},
}
In the path definitions, :id is a placeholder for the actual id value. You can use the same :id notifier multiple times within the same route. Remember to assign a <Route /> for each path and an element to display at that path. The path specified in the resource definition should match the path specified in the route definition. Here is an example:
import { Refine } from "@refinedev/core";
import { PostList, PostCreate, PostEdit, PostShow } from "pages/posts";

const App: React.FC = () => {
return (
<Refine
resources={[
{
name: "posts",
list: "/categories/:id/posts",
create: "/categories/:id/posts/create",
edit: "/categories/:id/posts/edit/:id",
show: "/categories/:id/posts/show/:id",
meta: {
canDelete: true,
},
},
]}
>
<Routes>
<Route path="/categories/:id/posts">
<Route index element={<PostList />} />
<Route path="create" element={<PostCreate />} />
<Route path="edit/:id" element={<PostEdit />} />
<Route path="show/:id" element={<PostShow />} />
</Route>
</Routes>
</Refine>
);
};

export default App;
import { Refine } from "@refinedev/core";
import { PostList, PostCreate, PostEdit, PostShow } from "pages/posts";

const App: React.FC = () => {
return (
<Refine
resources={[
{
name: "posts",
list: "/categories/:id/posts",
create: "/categories/:id/posts/create",
edit: "/categories/:id/posts/edit/:id",
show: "/categories/:id/posts/show/:id",
meta: {
canDelete: true,
},
},
]}
>
<Routes>
<Route path="/categories/:id/posts">
<Route index element={<PostList />} />
<Route path="create" element={<PostCreate />} />
<Route path="edit/:id" element={<PostEdit />} />
<Route path="show/:id" element={<PostShow />} />
</Route>
</Routes>
</Refine>
);
};

export default App;
For more information, refer to the refine documentation (https://refine.dev/docs/tutorial/understanding-resources/index/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
Kkapa.ai1/3/2024
<@494653850632978472> kapa.ai is still learning and improving, please let us know how it did by reacting below
Mmetropolitan-bronze1/3/2024
@kapa.ai when I do this in my list page the query triggred will be on posts url but I want to trigger the url as categories/2/posts
Kkapa.ai1/3/2024
Let me check the knowledge base for you. One moment! :books: ---------------------- To achieve this, you can create a new resource using the identity key to differentiate two URLs in Refine. Based on the params of the category, you can set filters in a useTable hook. Here's an example:
<Refine
resources={[
{
name: "posts",
identity: "posts",
list: "/posts",
},
{
name: "posts",
identity: "posts-from-categories",
list: "/categories/:categoryId/posts",
meta: {
hide: true
}
},
]}
/>
<Refine
resources={[
{
name: "posts",
identity: "posts",
list: "/posts",
},
{
name: "posts",
identity: "posts-from-categories",
list: "/categories/:categoryId/posts",
meta: {
hide: true
}
},
]}
/>
In your post page component's useTable hook, you can set the filters based on the categoryId as follows:
export const PostList = () => {
const { categoryId } = useParams();
useEffect(() => {
if (!!categoryId) {
setFilters([
{
field: "category_id",
operator: "eq",
value: categoryId
}
]);
} else {
setFilters([], "replace");
}
}, [categoryId])
}
export const PostList = () => {
const { categoryId } = useParams();
useEffect(() => {
if (!!categoryId) {
setFilters([
{
field: "category_id",
operator: "eq",
value: categoryId
}
]);
} else {
setFilters([], "replace");
}
}, [categoryId])
}
This solution was discussed in a Discord support thread (https://discord.com/channels/837692625737613362/1153268482620796948) and was confirmed as a good approach by the support staff. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
Kkapa.ai1/3/2024
<@494653850632978472> kapa.ai is still learning and improving, please let us know how it did by reacting below
Mmetropolitan-bronze1/3/2024
@kapa.ai I have a url as categories/:id/posts and I don't have access to posts url.
Kkapa.ai1/3/2024
Let me check the knowledge base for you. One moment! :books: ---------------------- In refine, you can define your resources and their action paths in the <Refine> component under the resources property. This informs refine to use these paths when generating the breadcrumbs, menus, handling redirections, and inferring the current resource and action. For your case, you can define your resource as follows:
{{
name: "categories/:id/posts",
list: "/categories/:id/posts",
create: "/categories/:id/posts/create",
edit: "/categories/:id/posts/edit/:id",
show: "/categories/:id/posts/show/:id",
meta: {{
canDelete: true,
}},
}}
{{
name: "categories/:id/posts",
list: "/categories/:id/posts",
create: "/categories/:id/posts/create",
edit: "/categories/:id/posts/edit/:id",
show: "/categories/:id/posts/show/:id",
meta: {{
canDelete: true,
}},
}}
In the path definitions, :id is a placeholder for the actual id value. You can use the same :id notifier multiple times within the same route. Remember to assign a <Route /> for each path and an element to display at that path. The path specified in the resource definition should match the path specified in the route definition. Here is an example:
import {{ Refine }} from "@refinedev/core";
import {{ PostList, PostCreate, PostEdit, PostShow }} from "pages/posts";

const App: React.FC = () => {{
return (
<Refine
resources={{[
{{
name: "categories/:id/posts",
list: "/categories/:id/posts",
create: "/categories/:id/posts/create",
edit: "/categories/:id/posts/edit/:id",
show: "/categories/:id/posts/show/:id",
meta: {{
canDelete: true,
}},
}},
]}}
>
<Routes>
<Route path="/categories/:id/posts">
<Route index element={{<PostList />}} />
<Route path="create" element={{<PostCreate />}} />
<Route path="edit/:id" element={{<PostEdit />}} />
<Route path="show/:id" element={{<PostShow />}} />
</Route>
</Routes>
</Refine>
);
}};

export default App;
import {{ Refine }} from "@refinedev/core";
import {{ PostList, PostCreate, PostEdit, PostShow }} from "pages/posts";

const App: React.FC = () => {{
return (
<Refine
resources={{[
{{
name: "categories/:id/posts",
list: "/categories/:id/posts",
create: "/categories/:id/posts/create",
edit: "/categories/:id/posts/edit/:id",
show: "/categories/:id/posts/show/:id",
meta: {{
canDelete: true,
}},
}},
]}}
>
<Routes>
<Route path="/categories/:id/posts">
<Route index element={{<PostList />}} />
<Route path="create" element={{<PostCreate />}} />
<Route path="edit/:id" element={{<PostEdit />}} />
<Route path="show/:id" element={{<PostShow />}} />
</Route>
</Routes>
</Refine>
);
}};

export default App;
For more information, refer to the refine documentation (https://refine.dev/docs/tutorial/understanding-resources/index/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
Kkapa.ai1/3/2024
<@494653850632978472> kapa.ai is still learning and improving, please let us know how it did by reacting below
Mmetropolitan-bronze1/3/2024
@kapa.ai, if I use my resource name as categories/:id/:posts my list page will hit an api endpoint with categories/:id/posts where the endpoint should be as categories/2/posts
Kkapa.ai1/3/2024
Let me check the knowledge base for you. One moment! :books: ---------------------- In refine, you can use the resource property on all data hooks to make a request to an API with a nested route. The resource property can be thought of as the URL. For example, if you want to make a request to the URL /categories/2/posts, you can use the useTable hook as follows:
import { useTable } from "@refinedev/core";

useTable({
resource: "/categories/2/posts",
});
import { useTable } from "@refinedev/core";

useTable({
resource: "/categories/2/posts",
});
This will make a request to the URL /categories/2/posts. However, if you want to make this dynamic based on the id, you would need to pass the id dynamically to the resource property. This can be done by getting the id from the route parameters or from the state. Here is an example of how you can do this:
import { useTable } from "@refinedev/core";
import { useParams } from "react-router-dom";

const { id } = useParams();

useTable({
resource: `/categories/${id}/posts`,
});
import { useTable } from "@refinedev/core";
import { useParams } from "react-router-dom";

const { id } = useParams();

useTable({
resource: `/categories/${id}/posts`,
});
In this example, useParams is a hook from react-router-dom that returns the dynamic parts of the route. For more information, refer to the refine documentation (https://refine.dev/docs/guides-concepts/faq#how-can-i-request-an-api-with-nested-route). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
Kkapa.ai1/3/2024
<@494653850632978472> kapa.ai is still learning and improving, please let us know how it did by reacting below

Looking for more? Join the community!

R
Refine

ask-any-question

Join Server
Recommended Posts
Hi,Hi, Is there a plan to support supertokens (https://supertokens.com/) ? if not, how hard is that toHow can I get all records that were created this calender month.I would like to get the amount of records that were created this month after calling useTable.howcan I implement authentication?howcan I implement authentication?environment with t3 stackI was trying to make a environment veriable using t3 stack but i always get error about type not fouproject initializationI am just starting to learn Refine with React. After initializing my app, I noticed that the only bowhen you disable the create button withwhen you disable the create button with `disabled={true}` it still allows the button to be clicked uHow can I limit the amount records that can be createdI would like to limit the total amount of records a user can create for a specific resource, I can rFilter resets automaticallyHey There, when calling the the *search* function of the useDatagrid Hook, the filter executes in fMern Dashboard Client change Auth from Google to Auth0Hi There. I am still new to Javascript/Typescript/ react and everything. Refine has been a great staHow to prefetch a specific query with id?Using invalidate just marks the query invalidated and the new data isn't being loaded when I open thhow to swizzle simple-rest and add authentication headerany idea how to swizzle simple-rest and add authentication header??Get data from api and then push to supabaseis that possible to use refine to get data from an api and then push it to supabase?Hello, i need some help connecting myHello, i need some help connecting my app to appwrite. I am using the template and is ok when i use Hello, everyone, I have a json api and iHello, everyone, I have a json api and i want to connect with it. How can i do it? can someone help is refine easy to translate to a mobile app?is refine easy to translate to a mobile app?how to connect rest api?how to connect rest api with the components of the app?Advise for CRUD apps for small startup projectI'm looking for an advise for my small startup project, recently i was looking refine due to the natHow to rename the tab/menu name and how to use multiple schema in supabase?Hi everyone. I would like to ask you about 2 things. 1. In the tab menu, because of the nature of Json apido you have json api support? for nextjsWhat should be the folder structure for Nextjs App Router i18n.Do i need to wrap all my pages with [locale] or sth to use it?