Uncaught TypeError: Cannot read properties of undefined: React Typescript

Question

I'm working on fetching data with React and graphql and render it with react/pdf-renderer.

I use renderContent but it gives me this error. What I'm doing wrong?

Uncaught TypeError: Cannot read properties of undefined (reading 'bookingConfirmationNumber')at renderContent

Below is my code

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>      
  )}

Here is my schema

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

I tried optional chaining, it renders the PDF component but data were not being fetched and Query is working fine in Graphql. Any inputs and resource to read on is highly appreciated.

Thank you.

Answer 1

hotelDetails is resulting in undefined simply because data.getHotelDetailsByIds.items[0] (and data.getHotelDetailsByIds in the previous version of your question) is undefined. When you inspect data , you should see the issue.

Answer 2

It looks like data.getHotelDetailsByIds returns empty array. So, data.getHotelDetailsByIds.item[0] is undefined .