How to pass a variable to search context?

Question

I have created a SearchContext, defined query, provider etc. I have a variable to pass so can get result depending on what is being passed.

Now, how do I pass this $query variable (which will be a Sitecore field) to SearchContext Provider in JSS so that SearchContext Consumer can get the result set?

If I don't put any such condition then all works fine I get all the records.

Any help will be appreciated.

Answer 1

Assuming you are using ReactJs, you can from your component implementation pass a value to the query. Please see below code snippet where part of it is taken from the ReactJs sample provided by JSS.

import { loader as gqlLoader } from 'graphql.macro';
import GraphQLData from '../../lib/GraphQLData';
import { withSitecoreContext } from "@sitecore-jss/sitecore-jss-react";

const ConnectedDemoQuery = gqlLoader('./query.graphql');
...
//component implementation goes here.
...
const wrappedComponent = withSitecoreContext()(props => {
  const WrappedComponent = compose(
    GraphQLData(ConnectedDemoQuery, {
      name: "connectedQuery",
      options: {
        variables: {
          query: "Your value goes here"
        }
      }
    })
  )(GraphQLConnectedDemo);
  return <WrappedComponent />;
});

export default withSitecoreContext()(wrappedComponent);

From the above code snippet, the query variable is where you specify the value you want to pass to the GraphQL. Note that in this example I've used the withSitecoreContext. This helps to provide more context of the current site.

Moreover, the compose method enables you to execute more than 1 GraphQL query.

Note, if you are using either Angular or ReactJs, you can see how connected GraphQL works by creating a sample project using the JSS CLI. More information is available at JSS Documentation.