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.

This is the search query I want

  • You mean how you would populate the $query from your front end to the graphql? Commented Jun 25, 2020 at 14:52
  • @HishaamNamooya field value is in a sitecore field. I would like to send that value as a query.
    – Kanchan
    Commented Jun 26, 2020 at 7:53

1 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"
  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.

  • Thanks for the reply @WalidRohiman this is another way of doing it, I'm sure I can use it for different propose. But for now I'm trying to implement it using React.createContext();. I created Search provider </SearchContext.Provider> and using Search Consumer to display.
    – Kanchan
    Commented Jun 26, 2020 at 7:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.