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

Question

背景

在我正在进行的一个新项目中，我们正在研究将 AppSync 用于我们的 GraphQL 服务器（使用 Amplify）。但是，由于它依赖于旧版本的 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 会失去什么？
• 使用带有 AppSync 的自定义 Apollo 客户端，是否可以在同一个查询中同时查询本地和远程数据（例如，使用 @client 标签）？
• 有没有办法像 ApolloClient 一样使用 AwsAppSyncClient 处理本地状态管理，例如使用反应变量？

关于使用 AppSync 的其他问题：

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

• 使用 AppSync 进行查询实际上如何设计来自客户端的查询？就我对 GraphQL 的理解，重点是结合多个 REST 调用，同时也只询问实际相关的字段。但是，使用 AppSync 和 codegen，自动生成queries.js和mutations.js文件，每个模型仅使用“基本”查询，包括所有字段；很像 REST 调用。为什么要这样做，以及如何从客户端使用它？

将 AppSync 与自定义客户端 (Apollo Client 3.0) 结合使用

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")
);