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.