Unable to display GraphQL data using Apollo Client in ReactNative - react-native

Question

I am new to RN development.
I am trying to setup Apollo client to fetch GraphQL data.
I am not able to get the data back.
Here is the code in App.js
import {ApolloProvider} from '#apollo/client';
import AppNavigator from './app/navigation/AppNavigator';
import apiClient from './app/api/client';
function App(props) {
console.log('From Main Component');
return (
<ApolloProvider client={apiClient}>
<NavigationContainer>
<AppNavigator />
</NavigationContainer>
</ApolloProvider>
);
}
In AppNavigator, Im displaying only the home screen for now.
In ./app/api/client.js
import {ApolloClient, InMemoryCache} from '#apollo/client';
const apiClient = new ApolloClient({
uri: 'https://phccapi-dev.azure-api.net/NaraakomGraphQLGateway/graphql',
cache: new InMemoryCache(),
headers: {
authorization:'Bearer xxxxxxxxxxxxxx',
'Subscription-Key': 'xxxxxxxxxxxxxxxxxx',
},
});
export default apiClient;
In api/queries.js
import {gql} from '#apollo/client';
export default {
GET_USER_NAME,
};
//Used in the Home Screen
const GET_USER_NAME = gql`
query {
userProfile {
fName
lName
}
}
`;
In HomeScreen.js
import DisplayData from '../components/DisplayData';
function HomeScreen({navigation}) {
return (
<View>
<Text> Home Screen text </Text>
<DisplayData/>
<Button title="Profile" onPress={() => navigation.navigate('Profile')} />
</View>
);
}
export default HomeScreen;
In DisplayData.js
import {useQuery} from '#apollo/client';
import GET_USER_NAME from './../api/queries';
function DisplayData(props) {
console.log('Logging query : ' + GET_USER_NAME);
const {loading, error, data} = useQuery(GET_USER_NAME);
if (loading) {
console.log('Loading : ' + loading);
return (
<View>
<Text>Loading...</Text>
</View>
);
}
if (error) {
console.log('Error : ' + error);
return (
<View>
<Text>Error :</Text>
</View>
);
}
console.log('Data : ' + data);
return (
<View>
<Text> In Component </Text>
<Text> {data.userProfile.fName} </Text>
</View>
);
}
export default DisplayData;
From GraphiQL, if I run the query I am getting the data.
If I follow the Apollo Client Documentation https://www.apollographql.com/docs/react/get-started/ and put all code in a single file , I am able to get the data
But most tutorials that I have gone through suggest to follow a hierarchy , a folder structure to properly maintain code and separate the concerns as the app grows
Hence I have tried to separate different things in different files and components
But I think I have not been able to set it up properly.
Before learning RN , I have also just learned JS and React
So I am guessing that there could also be some issue in the way I have declared constants/components , exported and imported them