如何将 Apollo Client 与 AppSync 结合使用? [英] How to use Apollo Client with AppSync?

问题描述

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

AppSync uses MQTT over WebSockets for its subscription, yet Apollo uses WebSockets. Neither Subscription component or subscribeForMore in Query component works for me when using apollo with AppSync.

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

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?

Is there any way to make use of AppSync while still using Apollo?

推荐答案

好的，这对我有用.您需要使用 aws-appsync SDK (https://github.com/awslabs/aws-mobile-appsync-sdk-js) 将 Apollo 与 AppSync 结合使用.无需进行任何其他更改即可使订阅与 AppSync 配合使用.

Ok, here is how it worked for me. You'll need to use aws-appsync SDK (https://github.com/awslabs/aws-mobile-appsync-sdk-js) to use Apollo with AppSync. Didn't have to make any other change to make subscription work with AppSync.

配置 ApolloProvider 和客户端:

Configure ApolloProvider and client:

    // 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>
    }

组件中的订阅如下所示:

Here is how the subscription in a component looks like:

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

这篇关于如何将 Apollo Client 与 AppSync 结合使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！