Relay useLazyLoadQuery with fragment spread not working

Question

I have a list component and an item component for rendering some cards.
The list component calls useLazyLoadQuery for fetching data, and includes a fragment spread that is used by each item in each of its node.

Currently relay is throwing this error

Relay: Expected to receive an object where ...CardItem_card was spread, but the fragment reference was not found`

Below are relevant codes:

Parent Component

export default function CardList() {
    const cardData = useLazyLoadQuery<CardListQueryType>(
        graphql`
            query CardListQuery {
                allCards {
                    edges {
                        node {
                            code
                            name
                            ...CardItem_card
                        }
                    }
                }
            }
        `,
        {}
    );

    returns...
    <Grid container>
        {cardsData.allCards?.edges.map((cardNode, index) =>
            cardNode ? (
                <Grid
                    item
                    xs="12/mb-2"
                    md="6/pe-2"
                    lg="4"
                    key={cardNode.code ? cardNode.code : index}
                >
                    <CardItem card={cardNode} />
                </Grid>
            ) : null
        )}
    </Grid>
}

Child Component:

export default function CardItem({ card }) {
    const cardData = useFragment(
        graphql`
            fragment CardItem_card on CardNode {
                code
                name
                country {
                    code
                    name
                }
            }
        `,
        card
    );

    renders the card...
}

The generated type file for parent includes the CardItem_card fragment spread so I'm confused as to what the problem may be here. I'm not entirely sure if my method of mapping the CardItem is how it's suppoed to be done, as there is also a ts error indicating that the cardNode I'm passing to CardItem does not contain the $fragmentSpreads property required by CardItem_card$key.

I could not find any documentation for fragment spreads of a item in a list query, "should it be spread inside node?"; nor whether fragment can be included in useLazyLoadQuery, or where should queries and fragments be. I could not implement useQueryLoader + usePreloadedQuery due to React Router v6 compatibility. So this is as far as I go. I am new to relay.

Answer 1

Ok so it was a problem with the mapping part.

Where I passed clientNode to ClientItem, the clientNode wasn't actually the node it's an object containing a node key, thus the correct way would be clientNode.node

(i.e. edges.map(edge => edge.node))

that was a careless mistake