[legacy-framework] Add useParams and useRouterQuery hooks

[anteprimorac]

Related: blitz-js/legacy-framework#433

What are the changes and their implications?

This PR implements two hooks useRouterParams and useRouterQuery.

Checklist

• Tests added for changes
• User facing changes documented

Breaking change: yes/no

No.

Other information

Example of usage:

// app/locations/pages/locations/[postalCode].tsx
import { useRouterParams, useRouterQuery, useQuery } from 'blitz';

export const Locations = () => {
  const { postalCode } = useRouterParams();
  const { order, orderby } = useRouterQuery();
  const [locations] = useQuery(getLocations, { where: { postalCode }, orderBy: { [orderby]: order } });
  return locations;
};

[flybayer]

Ah nice, very clever!

I think useRouterParams can simply rely on router.query and remove any keys found in useRouterQuery unless the value is different.

So for route /[id] with pathname /1?id=2&name=fox:

router.query	useRouterParams	useRouterQuery
id = 1	id = 1	id = 2
name = fox		name = fox

Can you also add some tests for this?

Lastly, before merging this we should resolve our discussion in #530 about number parsing. Maybe we can have useParamsStr, useParamsInt, and useRouterQuery

[flybayer]

@anteprimorac can you also add at least one unit test for useRouterParams?

[Zeko369]

@anteprimorac Also rerun prettier with our config, it seems like some files weren't formatted correctly

[anteprimorac]

@anteprimorac can you also add at least one unit test for useRouterParams?

I've changed store example to use useRouterParams here ba730b1#diff-1b842ad42068e396b7c21d9376384d87R8 and integration test is run over it. Is that enough?

It's hard to write unit tests because it depends on useRouter hook from next.js. Not sure if they provide a mock for it.

@anteprimorac Also rerun prettier with our config, it seems like some files weren't formatted correctly

🤔 it looks like there is a separate prettier configuration for each example. Going to fix it now. Thanks for pointing this.

[flybayer]

Ok, great! Few more minor things :)

[anteprimorac]

@merelinguist this change was introduced by husky pre-commit hook

[anteprimorac]

@flybayer if you agree, we can merge this as it is and gather more info on what to provide regarding validation, sanitization and casting of params and queries.

[flybayer]

@anteprimorac let's wait until we resolve our discussion in blitz-js/legacy-framework#433. I just made another comment.

And if we add useParamNumber() and friends, I think it'd be better to use useParams() instead of useRouterParams() so all the param hooks are the same, and it's only query that is different. Additionally, all (or most) of other routers have useParams() so this will be more natural/intuitive for many folks.

[flybayer]

@anteprimorac what do you think about also changing useRouter() to have params and query to align with these new hooks?

Current:

// Everything lumped in query
const {query} = useRouter()

Idea:

// Separate route params from query string items
const {params, query} = useRouter()

This would be a breaking change for existing blitz apps

[anteprimorac]

@flybayer that’s an excellent idea. We could provide useRouter as a wrapper around the hook from next.js

[flybayer]

Yes exactly. I think we should do that