Elasticsearch with React.js: match_phrase

[Karina_Ivanova]

Hello,

I'm quite new to Elasticsearch and React and I'm trying to build an app that fetches .json data through API. Everything works fine but I can't get my head around two things: how to use Match phrase query and how to display a custom message when no matches were found in my app.
I'm using the shakespeare.json file from elastic.

Here is the snippet of where, I suppose, I should insert the query:

const configurationOptions = {
    apiConnector: connector,

    searchQuery: {

        //Results: name of the play, its speaker, text entry, and speech number.
        result_fields: {
            play_name: {
                snippet: {
                    size: 35,
                    fallback: true
                }
            },
            speaker: {
                snippet: {
                    size: 50,
                    fallback: true
                }
            },
            text_entry: {
                snippet: {
                    size: 70,
                    fallback: true
                },
            },
            speech_number: {
                snippet: {
                    size: 50,
                    fallback: true
                }
            }
        }
    }
};

and here is the App component snippet, just in case:

function App() {
    return (
        <SearchProvider 
        config={configurationOptions}>
            <div className="App">
              <h1 className="heading">Shakespeare Work Library</h1>
                <Layout
                    header={<SearchBox 
                      inputProps={{ placeholder: "type a character name or a text line"}}/>}
                    bodyContent={
                      <Results 
                        titleField = "play_name"/>}
                        bodyHeader={
                        <> 
                          <PagingInfo/> 
                          <ResultsPerPage 
                          options = {[5, 10, 20]}
                          /> 
                        </>}
                        bodyFooter={< Paging />}
                />
            </div>
        </SearchProvider>
    );
}
export default App;

Any advice would be appreciated, thanks in advance!

[casterQ (caster)]

You need to know the inverted index first，then match query and finally match_phrase