GraphQL查询中带有变量的动态搜索栏

问题描述

我有以下查询在后端运行良好：

{
  fuzzyArticleByTitle(searchString:"tiktok"){
    title
  }
}

结果是多个与“ tiktok”字符串匹配的文章标题。

我想使用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>