React / GraphQL：为什么在我的应用程序中搜索而不在GraphQL游乐场中搜索时会得到一个空数组？

Question

GraphQL查询：这将在操场上运行，但不适用于我的应用程序。

const countryQuery = gql`
query getQuery($filter: _CountryFilter!) {
  Country(filter: $filter) {
    _id
    name
    capital
    population
    nativeName
  }
}

`

pages / search.js

export default function Search()
{
   const [filter, setFilter] = useState({ name: 'Hungary' })
   const { data, loading, error } = useQuery(GET_COUNTRY_INFO, {
        variables: { filter },}) 

    if (loading){ 
      return <Loader />;
    }
    if (error) return <p>Error</p>;            

 return (
   <div className="body">
     <h1>
     Get Information
    <br /> about Countries!
  </h1>
  <div className="wrapper">
    <input 
    className="search" 
    type="text" 
    id="search" 
    placeholder='Enter a Country'
    />

    <button 
    className="submit" 
    type="submit" 
    value=" "
    onClick={e => setFilter({ name: e.target.value })}
    onBlur={e => setFilter({ name: e.target.value })} 
    >
        Search
    </button>
    
    { data?.Country?.[0] && <CountryInfo country={data?.Country[0]} /> }        


    </div>
    {/* <h2>Click search to reset</h2> */}
  </div>
 );
}

components / queryResults.js

import { Card, ListGroup, ListGroupItem } from 'react-bootstrap'

const CountryInfo = ({country}) => (
 <div> 
   <Card style={{ width: '18rem' }}>
    <Card.Body>
      <Card.Title>{country.name}</Card.Title> 
    </Card.Body>
   <ListGroup className="list-group-flush">
    <ListGroupItem>Capital: {country.capital} </ListGroupItem> {' '}
    <ListGroupItem>Population: {country.population}</ListGroupItem>
    <ListGroupItem>Native Name: {country.nativeName}</ListGroupItem>
   </ListGroup>
   </Card>
 </div>
 )

export default CountryInfo; 

我正在创建一个应用程序，允许用户搜索并获取有关不同国家的信息（GraphQL API）。但是，当我单击提交按钮时，我得到了一个空数组。我要去哪里错了？