Why does useQuery not work but client.query does? - react-native

Question

I am struggling to get ApolloClient useQuery to work in a simple react native application. Using Flipper, I can see that the useQuery does not even create a hit on the graphql endpoint. In debugging this, I tried to use ApolloClient's client.query as an alternative means of making the graphql query and it worked! So I am confused about why useQuery is not working.
Here is the entire App.js code that shows client.query working but useQuery failing to fetch. And a screenshot of the resulting app. I'd really appreciate if someone could tell me where I'm going wrong.
import React, {useState} from 'react';
import {Text, View} from 'react-native';
import {ApolloClient,InMemoryCache,ApolloProvider,gql,useQuery} from '#apollo/client';
const client = new ApolloClient({
uri: 'http://localhost:8000/graphql',
cache: new InMemoryCache(),
});
const ALL_AREAS = gql`
query AllAreas {
allAreas {
id
name
}
}
`;
// Using client.query to make graphql query
function Areas1() {
const [data, setData] = useState('Loading ...');
client
.query({
query: ALL_AREAS,
})
.then(result => {
console.log('Areas 1 Data: ', result.data);
setData('Data ...');
});
return <Text>{data}</Text>;
}
// Using react-hook to make graphql query
function Areas2() {
const {loading, error, data} = useQuery(ALL_AREAS);
if (loading) {
return <Text>Loading ...</Text>;
}
if (data) {
console.log('Areas 2 Data: ', data);
return <Text>Data ...</Text>;
}
}
const App = () => {
return (
<ApolloProvider client={client}>
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text>Hello World {'\n'}</Text>
<Text>
client.query: <Areas1 />
</Text>
<Text>
useQuery: <Areas2 />
</Text>
</View>
</ApolloProvider>
);
};
export default App;
Note: I included console log statements and noticed that the console log from the Areas2 component never fires, whereas the console log from Areas1 does fire and shows the fetched data.
The resulting app in my emulator looks like this:
I am using the following package versions:
"#apollo/client": "^3.6.2",
"graphql": "^16.5.0",
"react": "17.0.2",
"react-native": "0.68.2"

Answer 1

I had some issue with #apollo/client v3.6.2 and have been trying to find the solution. But now you can check on #apollo/client (v3.6.4) for a new realise which is solving the query issue.
Uninstall #apollo/client 3.6.2
npm uninstall #apollo/client or yarn remove #apollo/client
Now install the new realise #apollo/client 3.6.4
npm install #apollo/client or yarn add #apollo/client
Then stop the metro bundler and run the app again
ios: npm run ios or yarn ios
android: npm run android or yarn android