Apollo 的 useQuery 好像根本没有执行，请问如何为 Apollo 客户端开启 debug statements 之类的？

Question

我根据文档使用ApolloProvider配置了 Apollo 客户端，这样我就可以在嵌套组件中使用useQuery 。 当我使用提供给ApolloProvider的apolloClient运行查询时，即：

apolloClient.query({query, variables});

查询工作得很好。 但是，在树下方的屏幕中，我有如下内容：

export default function SomeScreen({ route }: RouteProps) {
  ...
  let query: DocumentNode;
  switch (route.params.someParam) {
    case 'A':
      query = someQuery1;
      break;
    ...
    default:
      query = someQueryX;
  }

  const {loading, error, data} = useQuery<{myData: SomeType[]}, QueryArgTypes>(
    query,
    {variables}, //assigned elsewhere but they're constant
  );

  if (loading) return <Text>Loading</Text>
  if (error) return <Text>Error</Text>
  return (
    <FlatList
      data={data?.myData}
      renderItem={({ item }) => (<SomeComp elem={item} />)}
      keyExtractor={(item) => (
        item._id!.toString()
      )}
    />
  );
}

但是，在这种情况下， if (loading)分支总是为真。 此外，我在实例化apolloClient时使用的uri是我正在处理的项目的一部分。 我能够在其中设置断点以在我的query执行时暂停执行，并且它根本不会到达我设置的任何断点。 据我所知， useQuery甚至没有尝试执行查询（永远不会进入后端），但我没有得到任何关于正在发生的事情的描述。 任何人都知道会发生什么？ 一些相关的依赖项是：

"react": "17.0.1",
"react-native": "0.64.3",
"@apollo/client": "^3.6.2",

Answer 1

老实说，我不知道那个问题可能是什么，但这里有一个例子，所以你可以确保你有正确的客户端设置：

客户端.js

 const httpLink = createHttpLink({ uri: URL_GRAPHQL, }); const authLink = setContext( async (_, { headers }) => { const token = await getTokenService() return { headers: {...headers, authorization: token? `Bearer ${token}`: "", } } }); const client = new ApolloClient({ link: authLink.concat(httpLink), cache: new InMemoryCache() }); export default client

应用程序.tsx

 import React from 'react'; import { StatusBar } from 'react-native'; import { ApolloProvider } from '@apollo/client'; import AppRouter from './src/routes/AppRouter'; import client from './src/graphql/client'; export default function App() { return ( <ApolloProvider client={client}> <StatusBar barStyle='light-content'/> <AppRouter /> </ApolloProvider> ); }

子组件：

 const ListScreen: React.FC<IProps> = ( { route } ) => { let listId = route.params.listId; const styles = useStyles() const { loading, error, data, refetch } = useQuery<ListResponse>(GET_LIST_ById, { variables: { listId } }); return ( <view> </view> ) }

Answer 2

显然这是一个已知的错误。 万一其他人遇到这个问题，升级到测试版为我解决了这个问题：

在 react-native 中使用 'apolloClient' 使用 'useQuery' 加载数据时 'loading' 保持为真