Блог

У меня есть следующий запрос, который хорошо работает на внутренней стороне:

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

Результатом является совпадение нескольких заголовков статей со строкой «tiktok».

Я хотел бы закодировать динамическую панель поиска во интерфейсной части с помощью React, используя переменную для searchString.

Я попробовал это:

 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>