无法将 apollo 客户端连接到 aws appsync答案

【问题标题】：Cannot connect apollo client to aws appsync无法将 apollo 客户端连接到 aws appsync
【发布时间】：2020-12-05 20:21:42
【问题描述】：

我有一个使用 aws appsync 作为后端并使用 react + apollo 客户端 (v3) 作为前端的 Web 应用程序。但是当我尝试将 apollo 客户端连接到 appsync 时，我从库中收到一条错误消息：

./node_modules/aws-appsync-react/lib/offline-helpers.js

找不到模块：无法解析“/Users/mypath/web/node_modules/aws-appsync-react/lib”中的“react-apollo”

这是客户端的配置：

import AWSAppSyncClient from "aws-appsync";
import AppSyncConfig from "./aws-exports";

export const apolloClient = new AWSAppSyncClient({
  url: AppSyncConfig.aws_appsync_graphqlEndpoint,
  region: AppSyncConfig.aws_appsync_region,
  auth: {
    type: AppSyncConfig.aws_appsync_authenticationType,
    apiKey: AppSyncConfig.aws_appsync_apiKey,
  },
});

在我的App.ts:

import { ApolloProvider } from "@apollo/client";
import { Rehydrated } from "aws-appsync-react";
import { apolloClient } from "./apollo";

...
<ApolloProvider client={apolloClient}>
  <Rehydrated>
      <MyApp />
  </Rehydrated>
</ApolloProvider>

看起来是兼容性问题？

我正在使用"@apollo/client": "^3.1.3", "aws-appsync": "^4.0.0","aws-appsync-react": "^4.0.0",。

【问题讨论】：

标签： reactjs amazon-web-services apollo-client aws-appsync

【解决方案1】：

这是一个兼容性问题。当前版本的aws-appsync 不支持apollo-client v3，请参阅此线程了解进度： https://github.com/awslabs/aws-mobile-appsync-sdk-js/issues/448

最好的解决方法是：Proper way to setup AWSAppSyncClient, Apollo & React

请注意，解决方法确实使用了两个已弃用的库，但可以稍作改进：

import { ApolloClient, ApolloLink, InMemoryCache } from "@apollo/client";
import { createAuthLink } from "aws-appsync-auth-link";
import { createHttpLink } from "apollo-link-http";
import AppSyncConfig from "./aws-exports";

const url = AppSyncConfig.aws_appsync_graphqlEndpoint;
const region = AppSyncConfig.aws_project_region;
const auth = {
  type: AppSyncConfig.aws_appsync_authenticationType,
  apiKey: AppSyncConfig.aws_appsync_apiKey,
};
const link = ApolloLink.from([
  // @ts-ignore
  createAuthLink({ url, region, auth }),
  // @ts-ignore
  createHttpLink({ uri: url }),
]);
const client = new ApolloClient({
  link,
  cache: new InMemoryCache(),
});

export default client;

【讨论】：