我是 gatsby 和 graphQL 的新手，正在尝试使用此堆栈构建一个网站，该网站将显示音乐会/活动列表。

我的问题是：

是否可以将数据从我的应用程序状态传递到我的查询变量。我在哪里连接我的状态和我的 graphQL 查询？

这是我的代码：

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>

);

} }

基本上这就是我想要做的：

1. 当搜索字段表单的值this.state.term发生变化时，我想将其作为 $name 参数传递并查询新结果。
2. 当日历中选取的日期值this.state.date发生变化时，我想将此作为 $dateAndTime 参数传递并查询新结果。