Как использовать Apollo Client с AppSync?

AppSync использует MQTT поверх WebSockets для своей подписки, а Apollo использует WebSockets. При использовании apollo с AppSync у меня не работает ни Subscription компонент, ни subscribeForMore в Query компоненте.

Одна из функций AppSync, которая вызвала много шума, - это упор на данные в реальном времени. Под капотом функция AppSync в реальном времени основана на подписках GraphQL. Хотя Apollo основывает свои подписки на WebSockets через subscriptions-transport-ws, подписки в GraphQL на самом деле достаточно гибкие, чтобы вы могли основывать их на другой технологии обмена сообщениями. Вместо WebSockets подписки AppSync используют MQTT в качестве транспортного уровня.

Есть ли способ использовать AppSync при использовании Apollo?


websocket aws-appsync mqtt apollo react-apollo
person C.Lee    schedule 24.10.2018    source источник

Ответы (2)


arrow_upward
13
arrow_downward

Хорошо, вот как это сработало для меня. Вам нужно будет использовать 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>
person C.Lee    schedule 24.10.2018
comment
Я просто хотел упомянуть, что файл aws-exports поступает с главной страницы AppSync из вкладок JavaScript. Внизу на странице есть кнопка с надписью Загрузить конфигурацию. Это файл, который вы хотите включить. - person Jose A; 21.08.2019
comment
Кроме того, если вы используете TypeScript, проверьте эту ссылку: github.com/awslabs/aws-mobile-appsync-sdk-js/issues/362 Похоже, проблема с типизацией в клиенте AppSync (устаревшая типизация) - person Jose A; 21.08.2019

arrow_upward
3
arrow_downward

Просто чтобы добавить примечание об аутентификации, поскольку мне потребовалось время, чтобы решить это:

Если для параметра 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();
    }
  }

Но если ваш тип аутентификации "AWS_IAM", вам понадобится следующее:

  auth: {
    type: AUTH_TYPE.AWS_IAM,
    credentials: () => Auth.currentCredentials()
  }
person DenisH    schedule 07.03.2019
comment
Привет, Денис, у вас есть решение для AMAZON_COGNITO_USER_POOLS, где Amplify не используется? Я нигде не могу найти, но не могу использовать Amplify в этом проекте - person JoshuaJames; 02.06.2021
comment
Извини, @JoshuaJames, я не знаю. Мы использовали Amplify в нашем приложении React Native, а в веб-версии мы использовали пользовательский интерфейс Cognito, предоставляемый AWS. Это немного просто, но работает. - person DenisH; 02.06.2021