我是 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>
);
}
}
基本上这就是我想做的:
- 当搜索字段的值形成
this.state.term
更改,我想将其作为 $name 参数传递并查询新结果。
- 当日历中选取的日期值时
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=""
/>
));
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)