如何解决GraphQL查询中带有变量的动态搜索栏
{
fuzzyArticleByTitle(searchString:"tiktok"){
title
}
}
我想使用searchString变量在React的前端编写动态搜索栏。
我尝试过:
import React,{ Component} from 'react'
import { Query } from 'react-apollo'
import gql from 'graphql-tag'
const SearchQuery = gql`
query {
fuzzyArticleByTitle($searchString: String){
title
}
}
`;
export default class Search extends Component {
constructor(props) {
super(props)
this.state = {
search: ''
}
}
updateSearch = (e) => {
this.setState({
search: e.target.value
})
}
submitSearch = (e) => {
e.preventDefault()
console.log(this.state)
}
render() {
const { search } = this.state;
return (
<form onSubmit={ this.submitSearch }>
<input
type='text'
onChange={ this.updateSearch }
value={ search }
placeholder='Search'
/>
<Query query={SearchQuery} skip={!search} variables={{query: search}}>
{({loading,error,data}) => {
if (loading) return null;
if (error) throw err;
return <h1>{data.search.title}</h1>
}}
</Query>
</form>
)
}
}
它不起作用。我在哪里错了?
也许有更好的方法做到这一点
解决方法
您必须在查询标头中声明变量,例如
query SearchArticles($searchString: String) {
fuzzyArticleByTitle(searchString: $searchString){
title
}
}
,然后在Apollo中使用此特定的变量名称(您可以在$
之后的声明中选择任何名称):
<Query query={SearchQuery} skip={!search} variables={{searchString: search}}>
{({loading,error,data}) => {
if (loading) return null;
if (error) throw err;
return <h1>{data.search.title}</h1>
}}
</Query>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。