为什么 useQuery 不起作用但 client.query 起作用？

Question

我正在努力让 ApolloClient useQuery 在简单的 React 本机应用程序中工作。使用 Flipper，我可以看到 useQuery 甚至没有在 graphql 端点上创建命中。在调试它时，我尝试使用 ApolloClient 的 client.query 作为进行 graphql 查询的替代方法并且它有效！所以我很困惑为什么 useQuery 不起作用。

这里是完整的 App.js 代码，显示 client.query 有效但 useQuery 无法获取。以及生成的应用程序的屏幕截图。如果有人能告诉我哪里出错了，我将不胜感激。

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;

注意：我包含了控制台日志语句并注意到来自 Areas2 组件的控制台日志从未触发，而来自 Areas1 的控制台日志确实触发并显示了获取的数据。

我的模拟器中生成的应用程序如下所示：

我正在使用以下软件包版本：

    "@apollo/client": "^3.6.2",
    "graphql": "^16.5.0",
    "react": "17.0.2",
    "react-native": "0.68.2"

Answer 1

我在使用@apollo/client v3.6.2 时遇到了一些问题，并且一直在努力寻找解决方案。但现在您可以查看 @apollo/client (v3.6.4) 以获取解决查询问题的新实现。

卸载@apollo/client 3.6.2

npm uninstall @apollo/client 或 yarn add @apollo/client
现在安装新实现@apollo/client 3.6.4

npm install @apollo/client 或 yarn remove @apollo/client
然后停止 metro bundler 并再次运行应用程序

ios: npm run ios 或 yarn ios android: npm run android 或 yarn android

为什么 useQuery 不起作用但 client.query 起作用？

Why does useQuery not work but client.query does?

react-native

react-hooks

graphql

apollo-client