Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Specify query param configurations in one place #14

Closed
jamesplease opened this issue May 18, 2019 · 2 comments
Closed

Specify query param configurations in one place #14

jamesplease opened this issue May 18, 2019 · 2 comments

Comments

@jamesplease
Copy link

jamesplease commented May 18, 2019

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
Copy link
Owner

pbeshai commented May 12, 2020

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 pbeshai closed this as completed May 12, 2020
@pbeshai pbeshai reopened this Apr 27, 2021
@pbeshai
Copy link
Owner

pbeshai commented Jul 25, 2022

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

@pbeshai pbeshai closed this as completed Jul 25, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants