尝试向 apollo Client Graphql 添加变量，但是当我检查网络有效负载时，变量始终是一个空对象

Question

我正在尝试使用 Appollo 学习 Graphql。我为国家编写查询没问题，如果我硬编码代码的值，我可以只为国家编写查询：但是当我尝试使用变量选项时，我在检查网络时遇到错误，我看到变量选项为空。我已经按照文档的方式重写了很多次代码，然后人们以某种方式在此处完成了代码，但由于某种原因它只是不适用于变量。不确定这是我的语法还是其他原因。在这一点上，我在想也许我一直在看它，但我错过了错误。将不胜感激任何帮助。这是我用来测试的 API 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)

Answer 1

架构需要 code 类型 ID! 而不是 String。

此外，variables 部分需要一个 code 键。

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

尝试向 apollo Client Graphql 添加变量，但是当我检查网络有效负载时，变量始终是一个空对象

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

reactjs

graphql