Overview
The How-to guide enumerates steps to programatically modify the query before hitting the backend.
Pre-requisite: Create a Search UI
You can follow this 👇🏻 step-by-step tutorial to build a new Search UI, incase you already don't have one.
Note: The tutorial uses a Search UI built on top of faceted-search template, consider using the same template to match exact steps.
The Steps
Code Snippets
Step 9: Modifying the query using transformRequest prop
const transformRequest = (props) => {
const newBody = JSON.parse(props.body);
newBody.query = newBody.query.map((query) => {
if (query.id === "search" && query.type === "search") {
if (!query.value) {
//assign a default value
query.value = "batman returns";
}
}
return query;
});
// eslint-disable-next-line
props.body = JSON.stringify(newBody);
return props;
};
Important Links
-
Starter CodeSandbox
https://codesandbox.io/s/starter-modify-a-query-programmatically-y6i14x
-
Final CodeSandbox
https://codesandbox.io/s/modify-a-query-programmatically-final-jf6u01