A link with parameters to filter a related list page

[pinale]

according to https://api.fake-rest.refine.dev json

I've a PostList page and CategoryList page

on the CategoryList page i have a link to related posts,

what i expect is to be redirected to the PostList page with filters setted according to the link parameters

for the cetegory link i've used (but it isn't correct)

import routerProvider from "@pankod/refine-react-router-v6";
const { Link } = routerProvider;

<Link to={`/posts/${row.id}`}>  <-- this id is not the post id, but the categoryId
    Related posts
</Link>

so, it should be somethig like:

<Link to={`/posts/?categoryId=${row.id}`}>
    Related posts
</Link>

1. how should be the correct link path?

2. how i should set the routing accordingly?

3. how to set the filters grid when the parameter was passed

4. and above all, is it the correct approach to use a <Link> and querystring parameters to achieve that, or is there a special hook ?

this is the example:
https://github.com/pinale/Refine/blob/master/refinemuiapp/src/pages/categories/list.tsx

[alicanerdurmaz]

Hi @pinale, i created example repo based on @salihozdemir previous answer.

You can use syncWithLocation feature of <Refine>.
When you enable the syncWithLocation the filters can be infered the URL so when you change the URL params the filters apply automatically. The filter syntax like below:
?filters[0][field]=category.id&filters[0][operator]=eq&filters[0][value]=<some-value>

You can refer to qs for more information about syntax.

First create <Link/> like this.

// src/pages/categories/list.tsx
<Link to={`/posts?filters[0][field]=category.id&filters[0][operator]=eq&filters[0][value]=${row.id}`}>
    {filteredPosts?.length}
</Link>

After you should give syncWithLocation:true prop to useDataGrid

// src/pages/posts/list.tsx
const { dataGridProps } = useDataGrid<IPost>({
    syncWithLocation: true,
})

refine will takes care of the rest 🙏