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

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)

Hi mohdraqif, welcome to StackOverflow! 👋

JuanCaicedo
– JuanCaicedo

2020-07-14 18:30:48 +00:00
Commented Jul 14, 2020 at 18:30 — JuanCaicedo
– JuanCaicedo, Commented Jul 14, 2020 at 18:30

JuanCaicedo · Accepted Answer · 2020-07-14 18:45:09Z

4

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

edited Jul 14, 2020 at 18:45

answered Jul 14, 2020 at 18:34

JuanCaicedo

3,4963 gold badges21 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mohdraqif Over a year ago

Sir, you're right. It was undefined. But the error: variable not found still persists and shows on component rendering. Also on firing query, even with variables object, it shows movieByname is not a function. A little help there too.

JuanCaicedo Over a year ago

I suspect there might be something wrong with how graphql and the component are wired together in this part export default graphql(movieByName)(Header)

JuanCaicedo Over a year ago

I am surprised that this component is trying to execute the query, but it is not the one that is rendering the results. Could you update your question with what you are trying to do within each component that you are using? If you could put up a codesandbox.io/dashboard that shows how to reproduce your error, that would be very helpful 👍

Collectives™ on Stack Overflow

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

1 Answer 1

What does this error mean?

Debugging information

Solution

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

What does this error mean?

Debugging information

Solution

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related