Estoy trabajando en obtener datos con React y graphql y renderizarlos con react/pdf-renderer.

Uso renderContent pero me da este error. ¿Qué estoy haciendo mal?

TypeError no capturado: no se pueden leer las propiedades de undefined (leyendo 'bookingConfirmationNumber') en renderContent

A continuación se muestra mi código

 const renderContent = () => { const hotelDetails: HotelDetailsType = data.getHotelDetailsByIds.items[0] return ( <PDFViewer> <Document> console.log(hotelDetails.bookingConfirmationNumber) <Page> <View> <Text>{hotelDetails.bookingConfirmationNumber}</Text> <Text>{hotelDetails.hotelName}</Text> <Text>{hotelDetails.address}</Text> <Text>{hotelDetails.hotelContactNumber}</Text> <Text>{hotelDetails.guestName}</Text> <Text>{hotelDetails.guests.adults}</Text> <Text>{hotelDetails.guests.children}</Text> </View> </Page> </Document> </PDFViewer> )}

Aquí está mi esquema

 export type HotelDetailsType = { bookingConfirmationNumber: string hotelName: string address: string hotelContactNumber: string guestName: string guests: HotelGuestsType }

Probé el encadenamiento opcional, representa el componente PDF pero no se obtuvieron los datos y Query funciona bien en Graphql. Cualquier entrada y recurso para leer es muy apreciado.

Gracias.

Actualizar:

hotelDetails hecho está enviando indefinido. Pero todavía no puedo entender por qué. Si consulto directamente en graphql, está funcionando. Consulte a continuación la información adicional.

 const InvoicePDFModal: React.FC<InvoicePDFModalProps> = ({ hideModal, hotelBookingId }) => { const profile = useSelector(selectedCustomerProfileSelector) const { data, loading, error } = useQuery(GET_HOTEL_DETAILS_BY_IDS, { variables: { hotelDetailIds: [hotelBookingId], customerId: profile.userId } })

Recorte de Graphql https://imgur.com/LVjghjy

Realmente aprecio la ayuda chicos. Muchas gracias.