首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >使用react中的“useQuery”加载数据时,“加载”仍然是正确的--本机

使用react中的“useQuery”加载数据时,“加载”仍然是正确的--本机
EN

Stack Overflow用户
提问于 2022-05-02 07:18:54
回答 3查看 2.8K关注 0票数 3

我试图在Reactinative中使用阿波罗客户端useQuery来获取数据,但是loading挂起了真状态,无法获取data

下面是实际代码。

App.js

代码语言:javascript
复制
import React from 'react';

import { SafeAreaView, Text, View } from 'react-native';

import { ApolloClient, ApolloProvider, InMemoryCache, gql, useQuery } from '@apollo/client';

const EXCHANGE_RATES = gql`
    query GetExchangeRates {
        rates(currency: "USD") {
            currency
            rate
        }
    }
`;

const TestScreen = () => {
    const { loading, error, data } = useQuery(EXCHANGE_RATES);

    console.log(loading, error, data); // Stop at "true undefined undefined" 

    if (loading) return <Text>Loading...</Text>;
    if (error) return <Text>Error :(</Text>;

    return data.rates.map(({ currency, rate }) => (
        <View key={currency}>
            <Text>
                {currency}: {rate}
            </Text>
        </View>
    ));
};

const apolloClient = new ApolloClient({
    // this uri is the uri provided by the apolloClient official documentation.
    // https://www.apollographql.com/docs/react/get-started#3-connect-your-client-to-react
    uri: 'https://48p1r2roz4.sse.codesandbox.io',
    cache: new InMemoryCache(),
});

const App = () => {
    return (
        <ApolloProvider client={apolloClient}>
            <SafeAreaView>
                <TestScreen />
            </SafeAreaView>
        </ApolloProvider>
    );
};

export default App;

package.json

代码语言:javascript
复制
{
    ...,
    "dependencies": {
        "@apollo/client": "^3.5.10",
        "graphql": "^16.4.0",
        "react": "17.0.2",
        "react-native": "0.68.1",
        "react-native-flipper-apollo-devtools": "^0.0.2"
    },
    "devDependencies": {
        "@babel/core": "^7.12.9",
        "@babel/runtime": "^7.12.5",
        "@graphql-codegen/cli": "^2.6.2",
        "@graphql-codegen/fragment-matcher": "^3.2.1",
        "@graphql-codegen/typed-document-node": "^2.2.8",
        "@graphql-codegen/typescript": "^2.4.8",
        "@graphql-codegen/typescript-apollo-client-helpers": "^2.1.15",
        "@graphql-codegen/typescript-operations": "^2.3.5",
        "@react-native-community/eslint-config": "^2.0.0",
        "@types/jest": "^26.0.23",
        "@types/react-native": "^0.67.3",
        "@types/react-test-renderer": "^17.0.1",
        "@typescript-eslint/eslint-plugin": "^5.17.0",
        "@typescript-eslint/parser": "^5.17.0",
        "babel-jest": "^26.6.3",
        "babel-plugin-module-resolver": "^4.1.0",
        "eslint": "^7.32.0",
        "eslint-config-prettier": "^8.5.0",
        "eslint-config-standard-with-typescript": "^21.0.1",
        "eslint-plugin-import": "^2.26.0",
        "eslint-plugin-node": "^11.1.0",
        "eslint-plugin-promise": "^6.0.0",
        "eslint-plugin-react": "^7.29.4",
        "eslint-plugin-react-hooks": "^4.5.0",
        "eslint-plugin-react-native": "^4.0.0",
        "husky": "^7.0.4",
        "jest": "^26.6.3",
        "lint-staged": "^12.4.1",
        "metro-react-native-babel-preset": "^0.67.0",
        "react-native-flipper": "^0.144.0",
        "react-test-renderer": "17.0.2",
        "typescript": "^4.4.4"
    },
    "resolutions": {
        "@types/react": "^17"
    },
    "jest": {
        "preset": "react-native",
        "moduleFileExtensions": [
            "ts",
            "tsx",
            "js",
            "jsx",
            "json",
            "node"
        ]
    }
}

预期结果:

运行useQuery()

代码语言:javascript
复制
loading = true, error = undefined, data = undefined
                    ↓
loading = false, error = undefined, data = { ... }

实际结果:

运行useQuery()

代码语言:javascript
复制
loading = true, error = undefined, data = undefined (Stuck at 'loading = true' )

我不知道问题出在哪里。任何帮助都将不胜感激。

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2022-05-07 19:15:59

version 3.6使用React 18中的useSyncExternalStore API实现了useQuery。由于expo目前支持React 17,所以现在可以通过将@apollo/client降级为3.5.4,将graphql降级为Version ^16.3.0来解决这个问题。您可以找到更多信息,这里

票数 3
EN

Stack Overflow用户

发布于 2022-05-09 18:34:33

不幸的是,这是一个已知的错误,发生在阿波罗客户端3.6中。最后一个合适的工作版本是3.5.10。在那之后,useQuery和useLazyQuery停止工作(在加载时卡住),但只在移动设备/模拟器上工作。网络版本仍然正常工作。试着把评级降到3.5.10。

https://github.com/apollographql/apollo-client/issues/9689

编辑:新的alpha版本解决了这种情况(3.7.0-beta.3)。

尝试:npm i @apollo/client@beta

票数 3
EN

Stack Overflow用户

发布于 2022-05-11 23:17:13

从@Dominik升级到新的alpha版本(3.7.0-beta.3)修正了我的问题,降级到3.5.4没有。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/72083468

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档