获取所需类型“String”的错误变量“$name”。 没有提供。 在从 React-Apollo 发出 Graphql 请求时

Question

Here's the 1st error on component rendering:

POST http://localhost:4000/graphql 500 (Internal Server Error)

[GraphQL error]: Message: Variable "$name" of required type "String." was not provided.

The 2nd error on firing query(submitting form):

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

Here's the code

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)

Answer 1

What does this error mean?

• Your graphql schema is expecting a variable called $name .
• That variable needs to be of type String and it cannot be undefined or null (it's required )

Debugging information

• What's the value of event.target.value when your searchSubmit executes? I suspect that it's actually undefined

Solution

• Call your query with the name value defined in the state. Because you update the state within the inputs onChange handler, the most up to date value will be stored there

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