Gatsby-将状态属性传递给GraphQL查询变量/参数? [英] Gatsby - Pass state property to GraphQL query variables/parameter?
本文介绍了Gatsby-将状态属性传递给GraphQL查询变量/参数?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我是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=""
/>
));
这篇关于Gatsby-将状态属性传递给GraphQL查询变量/参数?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文