无法将Apollo客户端连接到AWS AppSync

问题描述

我有一个使用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",。

解决方法

这是一个兼容性问题。当前版本的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;