Cannot Read properties of undefined when mapping data from graphql using react typescript

Question

I have dogs component like this

const Dogs: React.FC = () => {
  const { loading, error, data } = useQuery(GET_DOGS);
  console.log(data)
  const renderedOption = data ? data.dogs.map(({dog, index}: {dog:any, index:number}) => (
    <option key={dog.id} value={dog.breed}>
      {dog.breed}
    </option>
  )) : "" ;

  return (
    <>
      {loading && "Loading..."}
      {error && `Error: ${error.message}`}
      {renderedOption}
    </>
  );
};

and ihave query for graphql like this

export const GET_DOGS = gql`
  {
    dogs {
      id
      breed
    }
  }
`;

and why its error: TypeError: Cannot read properties of undefined (reading 'breed') when i console.log(data) its appear and query its successfully, i also check my network to on browser its 200 status code. But i dont know when im try to mapp that data its error like that.

Answer 1

try to change your renderOption to this and let me know if it will work.

const renderedOption = data ? data.dogs.map((dog:any, index: number) => (
    <option key={dog?.id} value={dog?.breed}>
      {dog?.breed}
    </option>
  )) : "" ;