atlassian-labs / react-resource-router

Configuration driven routing solution for React SPAs that manages route matching, data fetching and progressive rendering
https://atlassian-labs.github.io/react-resource-router
Apache License 2.0
198 stars 28 forks source link

Ability to respond to query parameter changes with a resource update #167

Open anacierdem opened 1 year ago

anacierdem commented 1 year ago

As it is also implied by the documentation;

... Note: resources are only refreshed on route change. The router does not poll or update resources in the background. Navigation within the same route, e.g. query param change, will not trigger a refresh of resources. The resource is not refreshed when the query is changed by;

const [page = '1', setPage] = useQueryParam('page');
// call setPage() somewhere

Only way to force a refetch seems to be via an additional;

const resource = useResource(routeResource);
// resource.refetch() forces a proper update

Then, in resource's getData function the query is not properly updated and only way to practically access it is via window.location, which is an implementation detail and should not be ideally used:

getData: (routerContext) => {
const params = new URLSearchParams(window.location.search);
const page = params.get('page') || '1';
// want to use page here, routerContext.query is a stale value from the previous route change for some reason
}

Ideally I would expect it to get triggered for query param changes as well. As it has probably now became a public behaviour maybe we can do it behind a boolean option?

Even this is not implemented, routerContext should get properly updated before getData is called so that we have a workaround.

anacierdem commented 1 year ago

There is a potential workaround: using the query parameter in the route key. This is something we will experiment with.

anacierdem commented 1 year ago

Using a cache key that gets invalidated based on query parameter solves the issue. Still, updating documentation would be great. I will try to have a look if I can find the time.