6

背景

在我正在进行的一个新项目中，我们正在研究将 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 标签）？
  • 有没有办法使用 AwsAppSyncClient 处理本地状态管理，就像使用 ApolloClient 使用反应变量一样？

关于使用 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")
);
4

0 回答 0