useQuery from @apollo/client got undefined

Question

I got undefined on console.log below
loading => true
error => undefined
data => undefined

This is my react-native code

const {error, loading, data} = useQuery(gql`
    {
      fetchLatestMessages(channelId: "General") {
        messageId
        text
        datetime
        userId
      }
    }
`);
console.log('loading:', loading);
console.log('error:', error);
console.log('data:', data);

This is My playground it's work fine but empty data.

// Here my setup code and I was try to use fetch for make sure API is fine

const url = 'https://angular-test-backend-yc4c5cvnnq-an.a.run.app/graphql';
const client = new ApolloClient({
  uri: url,
  cache: new InMemoryCache(),
});

const App = () => {
  React.useEffect(() => {
    fetch(url, {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({query}),
    })
      .then(response => response.json())
      .then(responseData => console.log('responseData:', responseData));
  }, []);

  return (
    <ApolloProvider client={client}>
      <Root />
    </ApolloProvider>
  );
};

I try to query using fetch api it's work fine I got a response.
Need help to using useQuery instead of fetch.

Thank you.