Javascript 获取错误变量"$名称“；“所需类型”；绳子&引用；没有提供。关于React Apollo发射Graphql请求

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

职位http://localhost:4000/graphql 500（内部服务器错误）

[GraphQL错误]：消息：未提供所需类型为“String！”的变量“$name”

触发查询（提交表单）时的第二个错误：

这是密码

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)

import React，{Component}来自'React'；
从“反应路由器哈希链接”导入{HashLink as Link}
从'react apollo'导入{graphql}；
从“lodash”导入{flowRight as compose}
从“阿波罗助推”导入{gql}；
const movieByName=gql`
查询SomeName（$name:String！）{
movieByName（名称：$name）{
名称
体裁
年
}
}
`
类头扩展组件{
状态={
名称：“”，
类型：''，
年份：''
}
searchSubmit=（事件）=>{
event.preventDefault（）
this.props.movieByName({
变量：{
名称：event.target.value
}
})
console.log（this.props）}
render（）{
返回(
添加电影
this.setState（{name:e.target.value}）}/>
);}}
导出默认图形QL（movieByName）（标题）

此错误是什么意思？

• 您的graphql架构需要一个名为

  $name

  的变量
• 该变量的类型必须为

  String

  ，并且不能为未定义或null（它是空的）

调试信息

• 执行

  searchSubmit

  时，

  event.target.value

  的值是多少？我怀疑它实际上是未定义的

解决方案

• 使用状态中定义的名称值调用查询。因为您更新了inputs

  onChange

  处理程序中的状态，所以最新的值将存储在那里

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

---

你好，mohdraqif，欢迎来到StackOverflow！先生，你说得对。它没有定义。但错误：未找到变量仍然存在，并在组件渲染时显示。同样在触发查询时，即使使用变量对象，也会显示movieByname不是一个函数。还有一点帮助。我怀疑在这一部分中graphql和组件的连接方式可能有问题

export default graphql（movieByName）（Header）

我很惊讶这个组件试图执行查询，但它不是呈现结果的组件。您是否可以更新您的问题，说明您在使用的每个组件中尝试执行的操作？如果你能拿出一个能显示如何重现错误的例子，那将是非常有帮助的

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