如何将 Apollo Client 与 AppSync 一起使用？

Question

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

One AppSync feature that generated a lot of buzz is its emphasis on real-time data. Under the hood, AppSync’s real-time feature is powered by GraphQL subscriptions. While Apollo bases its subscriptions on WebSockets via subscriptions-transport-ws, subscriptions in GraphQL are actually flexible enough for you to base them on another messaging technology. Instead of WebSockets, AppSync’s subscriptions use MQTT as the transport layer.

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

Answer 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>

Answer 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()
  }

如何将 Apollo Client 与 AppSync 一起使用？

How to use Apollo Client with AppSync?

websocket

mqtt

apollo

react-apollo

aws-appsync