plain-purple•16mo ago

How 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 that, I have asked the same question earlier as https://discord.com/channels/837692625737613362/1079657600532090992 but couldn't figure out how to do it. For example, I have a list page of category and now I want to go to a list page of post with a filter of the same category. I have an action link in my category for a post list and when I click that link I should navigate to a list of post, but here in my filters that post should be filtered based on the category that I navigated to.

8 Replies

kapa.ai•16mo ago

Hi @dipbazz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can achieve this by using the syncWithLocation feature of refine. This feature allows you to sync the URL with the contents of a page, including filters, sort order, and pagination. To use this feature, you need to set the syncWithLocation option to true in your Refine component. Here is an example:

function App() {  
 return (  
 <Refine  
 options={{ syncWithLocation: true }}  
 >  
 {/*...*/}  
 </Refine>  
 );  
}

function App() {  
 return (  
 <Refine  
 options={{ syncWithLocation: true }}  
 >  
 {/*...*/}  
 </Refine>  
 );  
}

(Source: How to Build a React Admin Panel with Mantine and Strapi (https://refine.dev/blog/react-admin-panel/)) Once syncWithLocation is enabled, you can manually modify the list of query parameters by editing directly in the URL. For example, if you want to filter posts by category, you can add a category parameter to the URL like this:

/posts?category=1

/posts?category=1

(Source: Build internal tools using Low Code with refine, React-based framework (https://refine.dev/blog/build-internal-tools-using-low-code-with-refine/)) To navigate to a list page with a filter parameter, you can use the useNavigation hook's list method. This method allows you to navigate to a list page and pass filter parameters. Here is an example:

const { list } = useNavigation();

list("posts", { filter: { category: "1" } });

const { list } = useNavigation();

list("posts", { filter: { category: "1" } });

Please note that the above code is not directly extracted from the provided sources, but it's based on the principles explained in the sources. You may need to adjust the code according to your actual data structure and requirements. For more information about syncWithLocation and other refine features, you can check out the refine documentation (https://refine.dev/docs/core/components/refine-config). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•16mo ago

<@494653850632978472> kapa.ai is still learning and improving, please let us know how it did by reacting below

plain-purpleOP•16mo ago

@kapa.ai this is not working.

kapa.ai•16mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I'm sorry to hear that you're having trouble. Based on the information provided in the extracts, here's a more detailed approach: 1. First, ensure that the syncWithLocation option is set to true in your Refine component. This allows the URL to reflect the current state of your page, including filters, sort order, and pagination.

function App() {  
 return (  
 <Refine  
 options={{ syncWithLocation: true }}  
 >  
 {/*...*/}  
 </Refine>  
 );  
}

function App() {  
 return (  
 <Refine  
 options={{ syncWithLocation: true }}  
 >  
 {/*...*/}  
 </Refine>  
 );  
}

(Source: How to Build a React Admin Panel with Mantine and Strapi (https://refine.dev/blog/react-admin-panel/)) 2. When you want to navigate to the list page of posts filtered by a specific category, you can use the useNavigation hook's methods. However, the extracts do not provide a direct example of using useNavigation to navigate with filters. The useNavigation hook provides methods like list, create, edit, show, clone, push, replace, goBack, listUrl, and createUrl for navigation. Each method accepts different parameters, and some of them accept a meta parameter which could potentially be used to pass filter parameters. However, the exact usage of these methods for your specific use case is not clear from the provided extracts. (Source: useNavigation API Reference (https://refine.dev/docs/api-reference/core/hooks/navigation/useNavigation/)) 3. Once syncWithLocation is active, the URL on the listing page shows query parameters like those shown below:

/posts?current=1&pageSize=8&sort[]=createdAt&order[]=desc

/posts?current=1&pageSize=8&sort[]=createdAt&order[]=desc

Users can change the current page, items count per page, and sort and filter parameters. (Source: Refine Config (https://refine.dev/docs/api-reference/core/components/refine-config/)) If the above steps do not work, it might be due to some other issues in your code or setup. I would recommend checking the official refine documentation or seeking help from the refine community for more specific guidance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•16mo ago

<@494653850632978472> kapa.ai is still learning and improving, please let us know how it did by reacting below

plain-purpleOP•16mo ago

I have implemented the solution by creating a new resource using the identity key to differentiate two url in Refine and based on the params of the category I have set a filters in a useTable hook. I am not sure if this is the way to do so. Let me know if anyone can suggest me a proper way to do it. For instance:

<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
      }
    },
   ]}
/>

Now in my post page component's useTable hook I set the filters based on the categoryId as

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])
}

metropolitan-bronze•16mo ago

Hello @dipbazz, I think your solution looks great, I think it's way to go.

plain-purpleOP•16mo ago

Thanks @batuhanw for your feedback. If this solutions looks good we may keep it in the documentation so that if someone require this they may use it, what do you think?