render FlatList only when data is present

I run a graphql query and depending on the data, render a flatList.

  const { data, error } = useGetMyProfileQuery({    //onCompleted: _onCompleted,    onError: _onGetMyProfileQueryError,  });....return (<SafeAreaView style={styles.safeView}><Container style={styles.container}><View style={styles.listHolder}><FlatList            data={data ? data.me.friends : null}            horizontal={false}            renderItem={({ item }) => (<Friend                friend={item}                onDeleteFriend={onDeleteFriend}                originatorId={data ? data.me.id : null}              />            )}            keyExtractor={(data: any) => '3'}            ListEmptyComponent={renderEmptyContainer()}          /></View></Container></SafeAreaView>  );};

However, currently, I have to use ternary operators for checks like data? data.me.friends: null in the FlatList to avoid Typescript errors. If the query fails, and the data is null, It disturbs the whole performance and I will have to use multiple if-else within the whitelist item component too.

So I am looking for the best way such that data is passed into the Flatlist only when the mutation is successful. I could use onCompleted for that but I am not sure how to organize it such that no flat list is displayed from the main return when there's an error.

Also, currently, I am using the same key for all elements of the list but it shouldn't be like that obviously