在react-native中使用“apolloClient”通过“useQuery”加载数据时，“loading”保持为true

Question

我正在尝试使用useQueryReact Native 中的 Apollo Client 获取数据，但loading挂起在 true 状态并且无法获取data.

\n

下面是实际的代码。

\n

App.js

\n

import React from \'react\';\n\nimport { SafeAreaView, Text, View } from \'react-native\';\n\nimport { ApolloClient, ApolloProvider, InMemoryCache, gql, useQuery } from \'@apollo/client\';\n\nconst EXCHANGE_RATES = gql`\n    query GetExchangeRates {\n        rates(currency: "USD") {\n            currency\n            rate\n        }\n    }\n`;\n\nconst TestScreen = () => {\n    const { loading, error, data } = useQuery(EXCHANGE_RATES);\n\n    console.log(loading, error, data); // Stop at "true undefined undefined" \n\n    if (loading) return <Text>Loading...</Text>;\n    if (error) return <Text>Error :(</Text>;\n\n    return data.rates.map(({ currency, rate }) => (\n        <View key={currency}>\n            <Text>\n                {currency}: {rate}\n            </Text>\n        </View>\n    ));\n};\n\nconst apolloClient = new ApolloClient({\n    // this uri is the uri provided by the apolloClient official documentation.\n    // https://www.apollographql.com/docs/react/get-started#3-connect-your-client-to-react\n    uri: \'https://48p1r2roz4.sse.codesandbox.io\',\n    cache: new InMemoryCache(),\n});\n\nconst App = () => {\n    return (\n        <ApolloProvider client={apolloClient}>\n            <SafeAreaView>\n                <TestScreen />\n            </SafeAreaView>\n        </ApolloProvider>\n    );\n};\n\nexport default App;\n

\n

package.json

\n

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

\n

预期结果：

\n

运行后useQuery()

\n

loading = true, error = undefined, data = undefined\n                    \xe2\x86\x93\nloading = false, error = undefined, data = { ... }\n

\n

实际结果：

\n

运行后useQuery()

\n

loading = true, error = undefined, data = undefined (Stuck at \'loading = true\' )\n

\n

我不知道问题是什么。任何帮助，将不胜感激。

\n

Answer 1

版本使用React 18 的 API3.6实现。由于 expo 目前支持 React 17，您可以通过降级到版本和版本来解决问题。您可以在这里找到更多信息。useQueryuseSyncExternalStore@apollo/client3.5.4graphql^16.3.0