如何将 Apollo 客户端与 AppSync 一起使用？

Posted 2023-03-08

【中文标题】如何将 Apollo 客户端与 AppSync 一起使用？

【英文标题】：How to use Apollo Client with AppSync?

【发布时间】：2019-03-28 09:07:04

【问题描述】：

AppSync 使用 MQTT over WebSockets 进行订阅，而 Apollo 使用 WebSockets。将 apollo 与 AppSync 一起使用时，Subscription 组件或 Query 组件中的 subscribeForMore 都不适合我。

AppSync 的一项功能引起了广泛关注，它强调 实时数据。在后台，AppSync 的实时功能得到了支持 通过 GraphQL 订阅。虽然 Apollo 的订阅基于 WebSockets 通过 subscriptions-transport-ws，GraphQL 中的订阅 实际上足够灵活，您可以将它们基于另一个消息传递 技术。 AppSync 的订阅使用 MQTT 代替 WebSockets 传输层。

有什么方法可以在使用 Apollo 的同时使用 AppSync？

【参考方案1】：

好的，这就是它对我的工作方式。您需要使用 aws-appsync SDK (https://github.com/awslabs/aws-mobile-appsync-sdk-js) 才能将 Apollo 与 AppSync 一起使用。无需进行任何其他更改即可使订阅与 AppSync 一起使用。

配置 ApolloProvider 和客户端：

    // App.js
    import React from 'react';
    import  Platform, StatusBar, StyleSheet, View  from 'react-native';
    import  AppLoading, Asset, Font, Icon  from 'expo';
    import AWSAppSyncClient from 'aws-appsync' // <--------- use this instead of Apollo Client
    import ApolloProvider from 'react-apollo' 
    import  Rehydrated  from 'aws-appsync-react' // <--------- Rehydrated is required to work with Apollo

    import config from './aws-exports'
    import  SERVER_ENDPOINT, CHAIN_ID  from 'react-native-dotenv'
    import AppNavigator from './navigation/AppNavigator';

    const client = new AWSAppSyncClient(
      url: config.aws_appsync_graphqlEndpoint,
      region: config.aws_appsync_region,
      auth: 
        type: config.aws_appsync_authenticationType,
        apiKey: config.aws_appsync_apiKey,
        // jwtToken: async () => token, // Required when you use Cognito UserPools OR OpenID Connect. token object is obtained previously
      
    )


    export default class App extends React.Component 
      render() 
        return <ApolloProvider client=client>
          <Rehydrated>
            <View style=styles.container>
              <AppNavigator />
            </View>
          </Rehydrated>  
        </ApolloProvider>
    

组件中的订阅如下所示：

    <Subscription subscription=gql(onCreateBlog)>
      (data, loading)=>
        return <Text>New Item: JSON.stringify(data)</Text>
      
    </Subscription>

【讨论】：

我只想提一下 aws-exports 文件来自 javascript 选项卡中的 AppSync 主页。在页面下方，有一个按钮显示“下载配置”。这就是您要包含的文件。

此外，如果您使用的是 TypeScript，请查看此链接：github.com/awslabs/aws-mobile-appsync-sdk-js/issues/362 AppSync 客户端似乎存在打字问题（过时的打字）

@C.Lee 网络更改后，您是否遇到过网络套接字损坏的问题？它应该在例如之后自动重新连接吗？ *** 连接？

【参考方案2】：

只是添加一个关于身份验证的注释，因为我花了一段时间才解决这个问题：

如果 authenticationType 是“API_KEY”，那么您必须传递 apiKey，如@C.Lee 的答案所示。

  auth: 
    type: config.aws_appsync_authenticationType,
    apiKey: config.aws_appsync_apiKey,
  

如果 authenticationType 是“AMAZON_COGNITO_USER_POOLS”，那么您需要 jwkToken，并且 如果您使用的是 Amplify，您可以这样做

  auth: 
    type: config.aws_appsync_authenticationType,
    jwtToken: async () => 
      const session = await Auth.currentSession();
      return session.getIdToken().getJwtToken();
    
  

但如果您的 authenticationType 是“AWS_IAM”，那么您需要以下内容：

  auth: 
    type: AUTH_TYPE.AWS_IAM,
    credentials: () => Auth.currentCredentials()
  

【讨论】：

嗨，丹尼斯，您有针对未使用 Amplify 的 AMAZON_COGNITO_USER_POOLS 的解决方案吗？我在任何地方都找不到它，但不能在这个项目上使用 Amplify

对不起@JoshuaJames，我没有。我们在 React Native 应用程序中使用了 Amplify，在 Web 版本中我们使用了 AWS 提供的 Cognito UI。它有点基本，但可以完成工作。