[FEAT]ListButton from @refinedev/mui doesn't implement the meta query properly

[arndom]

Describe the bug

• I tried to use the ListButton to route to the list page with some query filters but it completely overlooks the filters.
• Here is what I did

<ListButton
      resource="contacts"
      meta={{
        query: {
          filters: [
            {
              field: filterField,
              operator: "contains",
              value: filterValue
            }
          ]
        }
      }}
    >
      Contacts
    </ListButton>

• But instead of having the filters be part of the URL query, there is only /contacts

---

• I followed the component definition and the error may be how the useNavigationButton from @refinedev/core is handling the meta prop

  const navigation = useNavigation();

  const to = React.useMemo(() => {
    if (!resource) return "";
    switch (props.action) {
      case "create":
      case "list": // here
        return navigation[`${props.action}Url`](resource, props.meta);
      default:
        if (!id) return "";
        return navigation[`${props.action}Url`](resource, id, props.meta);
    }
  }, [resource, id, props.meta, navigation[`${props.action}Url`]]);

• I believe the issue is in the definition of listUrl inside the definition of useNavigation, though I'm unsure since I haven't indepthly gone through the source.

Steps To Reproduce

• Attempt to navigate to a list page using:

<ListButton
      resource="contacts"
      meta={{
        query: {
          filters: [
            {
              field: filterField,
              operator: "contains",
              value: filterValue
            }
          ]
        }
      }}
    >
      Contacts
    </ListButton>

Expected behavior

• the list button works with url query filters

Packages

• "@refinedev/mui": "^5.14.4",
• "@refinedev/core": "^4.47.1",

Additional Context

No response

[OmkarBansod02]

The issue arises because the listUrl function in the useNavigation hook isn't properly handling query parameters from the meta object when generating URLs. This impacts both legacy and modern router implementations.
To address this, I'll update the listUrl function to handle query parameters correctly by :

1. Passing the meta.query object to the composeRoute function.
2. Merging existing URL parameters with new query filters.

The key change will involve updating the composeRoute call:

The updated code ensures existing parameters are preserved, new filters are added seamlessly, and the URL structure stays consistent. I'll be submitting a PR with these changes . Would you like me to proceed with the implementation?

[arndom]

That sounds good to me, the maintainers will point out anything that may be amiss if any.

I also suggest you check the other useNavigationButton uses incase they have a similar issue.

[aliemir]

@arndom thank you for reporting! We can treat this one as a feature request.

@OmkarBansod02 Thank you for your interest, while your guess on listUrl is correct, composeRoute method is not the place for this. It will generate the route without query parameters by filling the parameter names (if any defined) in the route definition of the resources.

Instead of working on composeRoute, we can update the useNavigation method's listUrl, createUrl, editUrl, createUrl and cloneUrl methods to pass meta.query as query param of the go calls like below:

Changing the lines here

refine/packages/core/src/hooks/navigation/index.ts

Lines 295 to 298 in 454515f

	return go({
	to: composeRoute(listActionRoute, resourceItem?.meta, parsed, meta),
	type: "path",
	}) as string;

with below:

return go({
  to: composeRoute(listActionRoute, resourceItem?.meta, parsed, meta),
  type: "path",
+ query: meta.query,
}) as string; 

query will be handled by the go method as expected.

[OmkarBansod02]

@aliemir Thanks for pointing that out! I’ve made the changes to the useNavigation methods to pass meta.query in the go calls as suggested. here #6530