routingOptions: how to merge custom functions with defaults?

Elastic Search
1

I see that it's possible to customize how search parameters get serialized by writing my own routingOptions object as shown here: Configuration | Elastic docs

Can I customize selected parts of this, perhaps just the stateToUrl and urlToState functions? Basically, is there a way to access the default routingOptions so I can merge/spread my custom functions with it?

Something like:

import { defaultRoutingOptions } from "@elastic/search-ui";

const routingOptions = {
  ...defaultRoutingOptions,
  stateToUrl: (state) => {
    const statesFilter = state.filters.find(
      (filter) => filter.field === "states"
    );
    const states = statesFilter ? statesFilter.values.join(",") : "all";
    return `/search/${states}?query=${state.searchTerm}`;
  },
  urlToState: (url) => {
    const match = url.match(/\/search\/(\w+)\?query=(\w+)/);
    if (!match) return {};
    return {
      searchTerm: match[2],
      filters: [{ field: "states", values: [match[1].split(",")], type: "any" }]
    };
  }
};
2

unfortunately the functions are not exported currently.

Couple of choices for now:

  • Copy and paste and maintain these functions
  • Submit a PR which exports them so they can be imported from your code

joe

3

Thanks Joe!

In that case, is there somewhere asPath and router are defined (from the example in the docs)?

Or are readUrl() and writeUrl() intended to a sort of getter/setter for window.location?

4

Ah, reading those functions, it seems that’s the case, so I don’t need to define asPath and router if I’m not using NextJS.

Thanks again for your help Joe!

5

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.