获取所需类型“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类型，并且不能是未定义的或 null（它是必需的）

调试信息

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

解决方案

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

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