使用 Gatsby 从子组件中的选择表单中获取状态

Question

我编写了一个带有主页和两个组件的 Gatsby 应用程序。选择表单中的值将用于通过 graphql 查询来查询 Postgresql 数据库。

我已经可以做的事情： 在表单组件中，我从选择菜单中获取值并将其从该子组件传递给父组件（主页）。在数据组件中，我可以使用 graphql 查询数据库并获取带有硬编码值的结果。

我还不能做的事情：从选择组件获取值到数据组件并在我的graphql查询中使用它。

我使用 this.props.value1 或 this.state.value1 尝试了不同的方法来获取值，但均未成功。我还测试了一个简单的组件，以确保我可以从父组件获取值到子组件并且它可以无缝工作。所以这是我尝试在查询组件中导入值的方式，这就是问题所在。

**//Data component**
let val = 88 //for hardcoded test. That works.

const DataPage = () => {
  const data = useStaticQuery(query)
  return (
    <div>
      <p>From Postgres: {data.postgres.allEstivalsList[val].nbr}</p>
    </div>
  )
}

const query = graphql`
{
  postgres {
    allAveragesList {
     avg
    }
     allEstivalsList {
      year
      nbr
    }
  }
}
`;

export default DataPage; 

**//Main page**
export default class App extends React.Component {
  constructor(props) {
    super(props);
  }
  state = {
    value1: null,
    // other values
  }

  render() {
        return (
          <div>
            <p>Get state in main page: {this.state.value1}</p>
            <DataPage val = {this.state.value1} />
            <SelectForm clickHandler={y => { this.setState({ value1: y }); }} />
          </div>
        )
    }
}

**//Form component**

export default class IndexPage extends React.Component {
  state = {
    value1: null,
  }

  handleClick = () => {
    this.props.clickHandler(this.state.value1);

    this.setState(prevState => {
      return { value1: prevState.value1 };
    });
  };

  render() {
    return (
      <Formlayout>                                    
      <p>Test -- Value for the selected year: {this.state.value1}</p>
      <select onChange = {(e) => this.setState({ value1: e.target.value })}>
      <option value="">-- Year --</option>
      <option value="1">1901</option>
      <option value="2">1902</option>
      <option value="3">1903</option>
      </select>
      <button onClick={this.handleClick}>Go!</button>
      </Formlayout>
    )
  }
}

我很高兴获得一些指示来获取数据组件中的选择值。由于我的测试变量 val 在查询中使用时有效，因此我想要实现的是将组件的状态应用于该变量。这就是我现在卡住的地方。

Answer 1

GraphQL 查询在构建时执行，而不是在运行时执行。查看文档，可以在构建和运行时查询数据。

https://www.gatsbyjs.org/docs/client-data-fetching/

//编辑

通常您会预先生成所有（静态）内容页面 - 例如如果你有 50 年的数据，你让 gatsby 构建这 50 个页面，然后你可以通过页面的路径导航。

如果您想将变量传递给查询，请查看文档：https://www.gatsbyjs.org/docs/graphql-reference/#query-variables

query GetBlogPosts(
  $limit: Int, $filter: MarkdownRemarkFilterInput, $sort: MarkdownRemarkSortInput
) {
    allMarkdownRemark(
    limit: $limit,
    filter: $filter,
    sort: $sort
  ) {
    edges {
      node {
        frontmatter {
          title
          date(formatString: "dddd DD MMMM YYYY")
        }
      }
    }
  }
}