CODEWITHSUNDEEP
reactjsgraphql
jaydanasara
jaydanasara

Reputation: 79

Trying to add variable to apollo Client Graphql but when I inspect the network payload the variable is always an empty object

I am trying to learn Graphql using Appollo. I write a query for countries no problem and I can write a query for just the country if I hardcode the value for code: but when I try to use the variables option I get an error when I inspect the network, I see that the variables option is empty. I have rewritten the code so many times trying it the way the docs have it and then someway that people had done it on here but for some reason it just doesn't work with the variable. Not sure if it's my syntax or something else. At this point I am thinking maybe I have been looking at it so long I am missing the error. Would appreciate any help. this is the API I am using to test it https://countries.trevorblades.com/

     import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import Card from 'react-bootstrap/Card'
import Button from 'react-bootstrap/Button';
import { useParams } from 'react-router';
import { Link } from 'react-router-dom'
import "./details.css"






import {  gql, useQuery, } from "@apollo/client";






const GET_Country = gql`
query Country($code:String) {
country(code:$code){
 
 name

}
}
`
   ;



const Details = (props) => {

  const params =useParams()

  var cCode =params.id




  

  var [countries, setCountry] = useState([])




  
const  { data, error, loading } = useQuery(GET_Country, {variables:"AE"})

console.log(data,error,loading)



  return <div className='detailsContainer'>



    <div className="cardContainer">

      {/* <Card className="bg-dark text-white crd" >

   <Card.Img src="" alt="Card image" />
   <Card.ImgOverlay>
   <Card.Title className="text-dark">Item Details</Card.Title>
     <Card.Title>{newItem.name}</Card.Title>
     <Card.Text >
       
     </Card.Text>
   <Link to = {"/recipe/" + newItem.id}> <Button> View Recipe</Button></Link>
   </Card.ImgOverlay>
 </Card> */}
    </div>






  </div>;
}

const mapStateToProps = (state) => ({

  Items: state

})

export default connect(mapStateToProps)(Details)

Upvotes: 0

Views: 882

Answers (1)

Joseph D.
Joseph D.

Reputation: 12174

The schema is expecting code with type ID! and not String.

Also, the variables part is expecting a code key.

const GET_COUNTRY = gql`
  query Country($code: ID!) {
    country(code: $code) {
      name
      continuent
    }
  }
`;

const code = "AE";
const { loading, error, data } = useQuery(GET_COUNTRY, {
  variables: { code }, // code key
});

Upvotes: 1

Related Questions