Question

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

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

我还不能做什么：将值从select组件获取到data组件，并在我的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")
        }
      }
    }
  }
}

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

1 个答案: