Getting Error Variable “$name” of required type “String!” was not provided. on firing Graphql request from React-Apollo

0
votes

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)
1
javascriptgraphqlreact-apolloapollo-clientgraphiql
Hi mohdraqif, welcome to StackOverflow! 👋 – JuanCaicedo

1 Answers

1
votes

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
  }
})