Получение переменной ошибки "$ name" требуемого типа "String!" не было предоставлено. при запуске запроса Graphql от React-Apollo - PullRequest
Новая
       104

Получение переменной ошибки "$ name" требуемого типа "String!" не было предоставлено. при запуске запроса Graphql от React-Apollo

0 голосов
/ 14 июля 2020

Вот первая ошибка при рендеринге компонентов:

POST http://localhost: 4000 / graphql 500 (внутренняя ошибка сервера)

[ошибка GraphQL]: Сообщение: переменная «$ name» из требуемый тип "Строка!" не был предоставлен.

Вторая ошибка при запуске запроса (форма отправки): 

this.props.movieByName is not a function...

Вот код 

import React, { Component } from 'react';
import {HashLink as Link} from 'react-router-hash-link' 
import { graphql } from 'react-apollo';
import {flowRight as compose} from 'lodash'
import { gql } from "apollo-boost";


const movieByName = gql`
  query SomeName($name: String!){
    movieByName(name: $name){
      name
      genre
      year
    }
  }
`

class Header extends Component {
  state = {
  name: '',
  genre: '',
  year: ''
}

searchSubmit = (event) => {
  event.preventDefault()
  this.props.movieByName({
   variables: {
     name: event.target.value
   }
 })
 console.log(this.props)}

 render(){
  return (
  <div className="topnav">
    <a className="logo" href="/">Movie Maker</a>
    <div className="search-container">
      <form onSubmit={this.searchSubmit}>
        <Link smooth to="#form">Add Movies</Link>
        <input type="text" placeholder="Search.." name="search" 
          onChange={(e) => this.setState({name: e.target.value})}/>
        <button type="submit"><i className="fa fa-search"></i></button>
      </form>
    </div>
  </div>
);}}

export default graphql(movieByName)(Header)

1 Ответ

0 голосов
/ 14 июля 2020

Что означает эта ошибка?

  • Ваша схема graphql ожидает переменную с именем $name.
  • Эта переменная должна иметь тип String и не может быть undefined или null (это требуется )

Отладочная информация

  • Какое значение event.target.value при выполнении searchSubmit? Я подозреваю, что это на самом деле undefined

Решение

  • Вызовите свой запрос с именем, определенным в состоянии. Поскольку вы обновляете состояние в обработчике input onChange, там будет храниться самое актуальное значение 

    this.props.movieByName({
  variables: {
    name: this.state.name
  }
})
...