Não estou conseguindo utilizar o LISTAR_PETS

Não estou conseguindo fazer a aplicação funcionar seguindo os passos do vídeo no momento de

const pets = data.pets ||  []

segue meu código e erros mostrados

Lista.jsx

import React from 'react'
import { Link } from 'react-router-dom'
import { Query } from 'react-apollo'
import petsApi from '../../../api/pets'
import { LISTAR_PETS } from '../../../graphql/pets'


//resto do código
<tbody>
            <Query query={LISTAR_PETS}>
              {({ data }) => {console.log(data);
              const pets = data.pets || []
                return pets.map(pet => (
                  <tr>
                    <td>{pet.nome}</td>
                    <td>{pet.tipo}</td>
                    <td>{pet.donoId}</td>
                    <td>{pet.observacoes}</td>
                    <td>
                      <Link to={`pets/${pet.id}`}>visualizar</Link>
                      <Link to={`pets/alterar/${pet.id}`}>alterar</Link>
                      <button onClick={this.deletarPet.bind(this, pet.id)}>remover</button>
                    </td>
                  </tr>
                ))}
              }
            </Query>
          </tbody>

pets.js

import gql from 'graphql-tag'

export const LISTAR_PETS = gql`
    query {
        pets {
            id
            nome
            tipo
            dono {
                id
            }
            observacoes
        }
    }
`

E estes são o errso acusados:

TypeError: Cannot read property 'pets' of undefined
(anonymous function)
D:/sergi/Arquivos/EngComp/2020.1/Estagio/alura/agenda-petshop/agenda-petshop-front/src/components/Pets/Lista/Lista.jsx:53
  50 | <tbody>
  51 |   <Query query={LISTAR_PETS}>
  52 |     {({ data }) => {console.log(data);
> 53 |     const pets = data.pets || []
     | ^  54 |       return pets.map(pet => (
  55 |         <tr>
  56 |           <td>{pet.nome}</td>