gpt4 book ai didi

reactjs - Gatsby - 将状态属性传递给 GraphQL 查询变量/参数?

转载 作者:行者123 更新时间:2023-12-05 07:29:19 25 4
gpt4 key购买 nike

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

);

}

基本上这就是我想要做的:

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

最佳答案

如果其他人遇到它。您不能像@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=""
/>
));

关于reactjs - Gatsby - 将状态属性传递给 GraphQL 查询变量/参数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52844535/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com