结合使用自定义Apollo客户端和AWS AppSync

Question

背景

在一个新项目中，我们正在研究将GraphQL服务器（带有Amplify）用于AppSync。但是，由于它依赖于Apollo Client（2.4.6）的旧版本，并且Apollo Client在3.0版中进行了重大更改，因此使用AwsAppSyncClient并不是最佳选择。我们也不能等待AppSync迁移到Apollo Client 3.0，所以我想知道现在是否最好将自定义客户端与Apollo Client 3.0一起使用，并在其Apollo依赖项迁移到3.0后再迁移到AwsAppSyncClient。这是一个好主意吗？当前的实现可以在下面找到。但是，这提出了一些新问题。

（这是我关于Stack Overflow的第一个问题，因此希望不要一次过多！）

我已经做了相当多的研究，但是对于GraphQL，Apollo，AppSync和Amplify还是一个新话题，因此认为最好向那里的专家咨询！

问题

• 如何最好地将Apollo Client 3.0与AppSync结合在一起（请参阅下面的实现）？不使用AwsAppSyncClient会导致什么损失？
• 通过将自定义的Apollo客户端与AppSync结合使用，是否可以在同一查询中同时查询本地数据和远程数据（例如，使用@client标记）？
• 是否有一种方法可以像使用ApolloClient一样使用AwsAppSyncClient处理本地状态管理，例如reactive variables？

有关使用AppSync的其他问题：

（不知道是否应该为此创建一个单独的问题吗？）

• 使用AppSync进行查询实际上如何与客户端设计查询有关？据我对GraphQL的了解，重点是将本来应该是多个REST调用的内容组合在一起，同时也只询问实际上相关的字段。但是，使用AppSync和codegen，queries.js和mutations.js文件是针对每个模型自动生成的，仅包含“基本”查询，并包含所有字段。非常类似于REST调用。为什么要这样做，以及如何从客户端使用它？

在自定义客户端（Apollo Client 3.0）中使用AppSync

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import Amplify from "aws-amplify";
import {
  ApolloProvider,
  ApolloClient,
  ApolloLink,
  createHttpLink,
  InMemoryCache,
  makeVar
} from "@apollo/client";
import { createAuthLink } from "aws-appsync-auth-link";

import awsExports from "./aws-exports";


Amplify.configure(awsExports);

const sidebarCollapsedVar = makeVar(false);

const link = ApolloLink.from([
  createAuthLink({
    url: awsExports.aws_appsync_graphqlEndpoint,
    region: awsExports.aws_appsync_region,
    auth: {
      type: awsExports.aws_appsync_authenticationType,
      apiKey: awsExports.aws_appsync_apiKey,
    },
  }),
  createHttpLink({ uri: awsExports.aws_appsync_graphqlEndpoint }),
]);

const client = new ApolloClient({
  link,
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          sidebarCollapsed: {
            read() {
              return sidebarCollapsedVar();
            },
          },
        },
      },
    },
  }),
});

ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById("root")
);