Manage Large Applications

[kinsyudev]

Hey! I'm working on a fairly big application, I am managing and consuming URL state on different components, I ended up creating a record that has the following skeleton:

export const pageSearchParams = {
  pageSize: {
    key: "pageSize",
    parser: parseAsInteger.withDefault(10),
  },
  search: {
    key: "search",
    parser: parseAsString.withOptions({
      throttleMs: 250,
    }),
  },
} as const

I am then consuming like so:

const [search, setSearch] = useQueryState(liquiditySearchParams.search.key, liquiditySearchParams.search.parser)

I've tried searching for a better solution around here and was unsuccessful, I would like to learn how other people are managing this.

On paper, I like the idea of being able to pass a type parameter that limits the different possible keys, something like:

type StateKeys = 'sortDir' | 'page' | 'sortKey'
...
const [sortDirection, setSortDirection] = useQueryState<StateKeys>('sortDir', stateMap['sortDir'])

[rik-iso]

In the same boat! I basically did the same thing although didn't quite stick them in a single object.
My use case is a modal that has multiple sub-pages (called 'panel's here). I'm currently playing with this:

// query states for my 'main' panel (no actual params)
export const mainQueryStates = {
  // this is always a fixed single value. exists so I can serialize links.
  panel: parseAsStringLiteral(['main']).withDefault('main'),
} as const satisfies UseQueryStatesKeysMap

// query states for my 'fulfillment' panel (has country and type params)
export const fulfillmentQueryStates = {
  panel: parseAsStringLiteral(['fulfillment']).withDefault('fulfillment'),
  country: parseAsStringLiteral(['AU', 'CA', 'GB', 'ROW', 'US']).withDefault('US'),
  type: parseAsStringLiteral(['fixed', 'calculated']),
} as const satisfies UseQueryStatesKeysMap

// used for generating urls that link to the fulfillment panel
export const fulfillmentPanelQuerySerializer = createSerializer(fulfillmentQueryStates)

// ... any other panels ...

// only used in my top level dispatcher to decide which panel to render/delegate to
// (the panel components then use one of the ones above)
export const panelQueryStates = {
  panel: parseAsStringLiteral([
    // referencing the objects above to ensure I don't make a typo 
    mainQueryStates.panel.defaultValue,
    fulfillmentQueryStates.panel.defaultValue,
  ]).withDefault('main'),
} as const satisfies UseQueryStatesKeysMap

not super happy with it but satisfies my goal of ensuring type-safety both at individual page level and for the dispatcher, while keeping the different pages' settings independent.