reactjs - AWS AppSync + React-Apollo Query/useQuery 引发异常 this.currentObservable.query.getCurrentResult 不是函数

Question

我对 GraphQL/Apollo 不太熟悉，并且很难使用 React 应用程序来设置它。

我有一个 React 组件，它从使用 Amplify/AppSync 构建的 GraphQL API 加载列表。

如果我手动调用来获取项目，即:

    const videosData = await client.query({
      query: gql(queries.listVideos)
    });
    const videosItems = videosData.data.listVideos.items;
    setVideosData(videosItems);

就像魅力一样。但是，如果我尝试使用 Apollo Query 组件或 useQuery hook，则会引发以下错误:

TypeError: this.currentObservable.query.getCurrentResult is not a function

如果我只是添加行来使用 Hook 获取查询，它已经给了我这个错误

Hook 调用:

const {loading, error, data, refetch} = useQuery(gql(queries.listVideos));

引发问题的被调用函数:

QueryData.getQueryResult
node_modules/@apollo/react-hooks/lib/react-hooks.esm.js:325
  322 |     called: true
  323 |   });
  324 | } else {
> 325 |   var currentResult = this.currentObservable.query.getCurrentResult();
      | ^  326 |   var loading = currentResult.loading,
  327 |       partial = currentResult.partial,
  328 |       networkStatus = currentResult.networkStatus,

如果我使用<Query>，也会发生完全相同的问题组件

软件包版本:

"aws-amplify": "^1.1.30",
"aws-amplify-react": "^2.3.10",
"aws-appsync": "^1.8.1",
"graphql-tag": "^2.10.1",
"react-apollo": "^3.0.1",

知道我可能做错了什么以及如何解决它吗？

Answer 1

如果添加:

"resolutions": {
  "apollo-client": "2.6.3"
}

在您的package.json中并重新安装它应该可以工作。

您可能会看到此警告:

Resolution field "apollo-client@2.6.3" is incompatible with requested version "apollo-client@2.4.6"

这是因为Appsync依赖于旧版本的react-apollo，但我发现它工作正常。

您可以关注this issue希望这个问题能够很快得到解决，我们将不再需要这样做。