我无法在 gatsby js 上设置状态 graphql 查询

Question

我尝试使用 GraphQL 获取数据 onClick，但由于某种原因我不能 setState 进行多个查询。它说（加载静态查询）

class Math extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      value: url,
      value2: texts[1],
      value3: queryOne,
    }
  }
  render() {
    return (
        <Sidebar>
          <div
            className="post"
            onClick={() =>
              this.setState({
                value: pablo,
                value2: texts[1],
               value3: queryTwo,
              })
            }
          >
            <img src={pablo} alt="pablo"/>
            <h3>1deg school</h3>
          </div>
          <div
            className="post"
            onClick={() =>
              this.setState({ value: clip, value2: texts[2], value3: queryOne })
            }
          >
            <img src={clip} alt="clip"/>
            <h3>2deg school</h3>
          </div>
        </Sidebar>
        <Content>
          <img src={this.state.value} alt="img"></img>
          <p>{this.state.value2}</p>
          <div className="posts">
            <StaticQuery
              query={queryOne}
              render={data => {
                return (
                  <div>
                    {data.allMarkdownRemark.edges.map(({ node }) => (
                      <Post
                        title={node.frontmatter.title}
                        path={node.frontmatter.path}
                        body={node.excerpt}
                        date={node.frontmatter.date}
                      />
                    ))}
                  </div>
                )
              }}
            />
          </div>
        </Content>
    )
  }
}
const queryOne = graphql`
  query MyQuery {
    allMarkdownRemark {
      edges {
        node {
          frontmatter {
            title
            date
            path
          }
          excerpt
        }
      }
    }
  }
`
const queryTwo = graphql`
  query MyQuery {
    allMarkdownRemark(filter: { fileAbsolutePath: { regex: "/001/" } }) {
      edges {
        node {
          frontmatter {
            titledatepath
          }
          excerpt
        }
      }
    }
  }
`
export default Math

我只能在图像之间切换，它会显示以下警告：

我们找不到变量“value3”的声明，您 作为“查询”道具传递到 声明

Answer 1

我不清楚你到底想做什么，但你不能为静态查询传递变量。它们必须是真正静态的，并且查询直接传递到查询属性中：

<StaticQuery query={graphql`query MyStaticQuery {...}`} />

通过这种方式，它们可以在开发/构建过程中被发现、提取并转换为静态 json。