Alter Search UI React App's query paramter

Elastic Search
1

I am trying to set up the search-ui with an app search engine, and embed the generated app into an existing website. One issue I am running into is a clash with the query parameter "?q=". The app uses this for the keyword search, however, this is also used by the Drupal CMS internally to track URL paths. I can't easily change this on the Drupal side, and it will cause unexpected redirects by the CMS, so I'm looking to change it within the generated app.

This doesn't look like something I can configure (although this would be a nice feature to add) I'm not so familiar with React, how can I got about patching the project for this need? I've forked the repo, and I assume I just need to update the references to the parameter in the URLManager class here search-ui/URLManager.ts at 851a6cdbaad176a42216fa112f48a202eb07ffec · elastic/search-ui · GitHub

I guess this is more of a React development question workflow than Elasticsearch specific. But let me know if you have any insight.

2

Hey!

One way is to use routingOptions to customise how the search state serialise / deserialise on the url. You can read more about this functionality in the docs Configuration | Elastic docs

Hope this helps.

Joe

3

Thanks for the suggestion. This looks like it should do exactly what I need. I'm trying that example, and pardon my naivety in React but I'm getting the following when I try to build after placing that const routingOptions in App.js

src/App.js
  Line 66:12:  'asPath' is not defined  no-undef
  Line 69:20:  'router' is not defined  no-undef

I don't see any other references to "asPath" in the documentation, and while "router" seems to have a lot of results, it's not clear which is relevant, or they just point back to the same documentation page. The only references I see to these variables are in this same documentation page in the repo, and this other one that seems NextJS focused. The syntax on that NextJS page seems a bit different, and I'm not sure if that works in the plain React examples.

4

Looking at this more, that routingOptions documentation seems to depend on NextJS, but the generated app for Search UI doesn't seem to include Next, and I can't find any documentation on adding it. Any advice on how to include Next in my app, or how to do this without Next?

5

You could just reuse the default stateToParams / paramsToState methods and adjust the the q object to something else like "query"

6

Perhaps I'm doing something wrong here. I'm defining a routingOptions object in my config in App.js, and I define methods for readUrl, writeUrl, stateToUrl, and urlToState, and I just put a console.log in each of these. But when I go to compile the app, I don't see these firing at all, and the compile version of URLManager doesn't seem to reference the routingOptions either. Here is what it might look like like in App.js:

const config = {
  routingOptions: {
    readUrl: () => {
      console.log('readUrl');
    },
    writeUrl: (url, { replaceUrl }) => {
      console.log('writeurl');
    },
    stateToUrl: (state) => {
      console.log(state);
    },
    urlToState: (url) => {
      console.log(url);
    }
...

I don't quire understand how I can "reuse" the stateToParams and paramsToState methods. I see them also in URLManager, but unlike the other ones I listed, don't appear to check the routing options object first.

Pardon me if there is a clear answer to this, my forte is more PHP than React. I appreciate any help.

7

Could I double check what version of Search UI you are on? I would make sure you're on the latest (1.19.1) as this is a recent addition!

Joe

8

It's whatever the app generator on the website generated as of last week. It said 1.15.0. But it looked like it was checking for the routingOptions in the source code. I just force updated to 1.19.1... I think that might have done the trick.

Ok, here is another question, how can I get access to the queryString module to parse this without reimplementing the whole thing in my app? I can easily override stateToUrl and urlToState, and replace the one query parameter I need, but that seems to break the handling for all the other options.

9

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