Gatsby - 将状态属性传递给 GraphQL 查询变量/参数？答案

【问题标题】：Gatsby - Pass state property to GraphQL query variables/parameter?Gatsby - 将状态属性传递给 GraphQL 查询变量/参数？
【发布时间】：2019-03-21 12:32:16
【问题描述】：

我是 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>

);

} }

基本上这是我想做的：

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

【问题讨论】：

您不能在基于组件状态的查询中传递变量，因为数据是在编译时检索的。您可以获取所有数据并在之后申请.filter()
好的 - 我对 graphQL 的理解很差。它可能不是我打算做的最好的堆栈。我想使用 graphCMS 来创建内容，但是如果每次有新内容要显示（每 12 小时）我都必须重新构建和部署。我有点困惑，因为我用我的投资组合网站查询 GitHub graphAPI，它几乎是实时更新的（使用 CRA 和 Apollo）
@Yannick 是的，自动重建和部署是 gatsby 的核心概念。对于一个相当小的站点，应该非常快~ 30 秒，因为它非常快。
@Zlatev 非常好，我会调查一下。谢谢。
重建和部署由 webhook 触发。不幸的是，使用 GraphCMS，免费计划中不提供 webhook。我可能不得不选择另一个 CMS。

标签： reactjs graphql gatsby

【解决方案1】：

如果其他人遇到它。您不能像@ghuntheur 所说的那样传递变量，但是如果您想在构建时获取一些列表，这是一个有用的示例：

export const useGraphFlags = () => {
    const { allFile } = useStaticQuery(
        graphql`
            query GraphAllFile {
                allFile(filter: {relativeDirectory: { eq: "svg/flags" }}) {
                    nodes {
                        relativePath
                        publicURL
                        relativeDirectory
                    }
                }
            }
        `
    );
    return allFile.nodes;
};

稍后在组件中：

const flags = useGraphFlags();

return flags.map(file => (
    <img 
      key={file.relativePath} 
      src={file.publicURL} 
      alt=""
    />
));

【讨论】：