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

Question

I have tried to fetch data onClick with GraphQL but for some reason I can't setState multiple queries. It says (Loading Static query)

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

I can switch only between images, and it shows this warning:

We were unable to find the declaration of variable "value3", which you passed as the "query" prop into thedeclaration

Answer 1

It's unclear to me what exactly you are trying to do but you can't pass variables for static queries. They must be truly static and the queries passed directly into query attribute:

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

This way they can be discovered, extracted and transformed into static json during develop/build.