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

Question

这是组件渲染的第一个错误：

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)

Answer 1

这个错误是什么意思？

• 您的 graphql 架构需要一个名为 $name 的变量。
• 该变量必须是 String 类型，并且不能为 undefined 或 null（它是 required）

调试信息

• 当您的searchSubmit 执行时，event.target.value 的值是多少？我怀疑它实际上是未定义的

解决方案

• 使用状态中定义的名称值调用您的查询。因为您更新了输入 onChange 处理程序中的状态，所以最新的值将存储在那里

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