Specify query param configurations in one place

[jamesplease]

The current API requires that you specify the structure of the query parameters in every component that wants to access params. Consider a large app with 1000 components that all need x, q, and filters. You will see the following code 1000 times:

const [query, setQuery] = useQueryParams({
    x: NumberParam,
    q: StringParam,
    filters: ArrayParam,
  });

This seems unnecessarily verbose since it is not like x will be a NumberParam in one component, and an ArrayParam in another.

Have you considered DRY'ing up the API by allowing this to be specified in a single location:

<QueryParamProvider params={{
    x: NumberParam,
    q: StringParam,
    filters: ArrayParam,
  }}>
  <App/>
</QueryParamProvider>

With this, all consumers could then simply do:

const [query, setQuery] = useQueryParams();

Benefits:

• Improved developer experience, as folks have to write less code
• Smaller bundle sizes
• Possible perf gain if right now every hook deserializes rather than reading from a single cached source of truth (likely of no consequence for most apps tho')

Cons:

• More API variations for folks to learn and think about
• Perhaps others?

What do you think?

Thanks for reading!

[pbeshai]

Hi and thank you for the very well written issue. Sorry for the delay in my response!

My current take is this can be solved in userland via hooks/context.

For instance I have a useGlobalFilters hook that just wraps the useQueryParams for a few parameters that are used on each page. I would expect in this case they are deserializing to different instances each time but it hasn't been an issue for me.

The alternative is to create an AppQueryParamsContext or something and a useAppQueryParams() hook that reads from it. e.g.

import * as React from 'react';
import { useQueryParams } from 'use-query-params';

const AppQueryParamContext = React.createContext(undefined);

export function AppQueryParamProvider({ children }) {
  /* [query, setQuery] */
  const contextValue = useQueryParams({ foo: StringParam, bar: NumberParam });
  return (
    <AppQueryParamContext.Provider value={contextValue}>
      {children}
    </AppQueryParamContext.Provider>
  );
}

export function useAppQueryParams() {
  return React.useContext(AppQueryParamContext);
}

Note I haven't tested this context approach, I'm not sure if it results in a render happening between param updates and the context updating, but it should work.

[pbeshai]

Hi there, happy to say this has been added in v2.0.0-rc.0 via the params option. See the changelog for details.