ReactJS/Javascript/Graphql/React-apollo：无法读取未定义的属性“名称”

Question

GraphQL Query Defined here

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: 'Chile' })
const { data, loading, error } = useQuery(countryQuery, {
        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>
    
       <div>

        { data?.Country && <CountryInfo country={data?.Country[0]} /> }
    
       </div>
     </div>
   </div>
  );
 }

components/queryResults.js This is were I am getting the error. Is {country.name}, {country.capital} etc. the incorrect way to apply the data here?

import React from 'react'
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;

When I type a country and click the search the error is happening on this line: <Card.Title>{country.name}</Card.Title> Why is name, capital, population and nativeName undefined? What am I doing wrong?

Answer 1

I'm looking at this line and would like to note that if data.country is an empty array, it will still be truthy. Add a check to see if there is a value in the first element of the array before rendering CountryInfo

{ data?.Country && <CountryInfo country={data?.Country[0]} /> }