微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决结合使用自定义Apollo客户端和AWS AppSync

背景

一个新项目中,我们正在研究将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.jsmutations.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")
);

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。