Gatsby - Pass state property to GraphQL query variables/parameter?

问题

I am new to gatsby and graphQL and am trying to build a website with this stack that will display a list of concerts/events.

My question is:

Is it possible to pass data from my app state down to my query variables. Where do I connect my state and my graphQL query ?

Here is my code:

class IndexPage extends Component {

state = {
  term: '',
  date: null,
}


onTermChange(term) {
  this.setState({ term });
}

render() {
  return (
  <Layout>
    <SearchForm
      onTermChange={this.onTermChange.bind(this)}
      value={this.state.term}
    />

    <Calendar
      onChange={date => this.setState({ date })}
      value={this.state.date}

    />

    <StaticQuery
      query={graphql`
      query ComingEvents {
        allEvent(sort: {fields: [dateAndTime], order: ASC}) {
          edges {
            node {
              id
              name
              dateAndTime
              venue
              ticketsLink
              city
              thumbnail {
                id
                url
              }
            }
          }
        }
      }`
      }
      render={ data => (
        <EventsList
        events={data.allEvent.edges}
         />
      )}
     />
</Layout>

);

} }

Basically this is what I want to do:

1. When the value of the search field form this.state.term changes, I want to pass this as $name parameter and query new results.
2. When the value of the date picked out in the calendar this.state.date changes, I want to pass this as $dateAndTime parameter and query new results.

来源：https://stackoverflow.com/questions/52844535/gatsby-pass-state-property-to-graphql-query-variables-parameter