web-dev-qa-db-fra.com

Comment utiliser Apollo Client avec AppSync?

AppSync utilise MQTT sur WebSockets pour son abonnement, mais Apollo utilise WebSockets. Ni le composant Subscription ni le composant subscribeForMore dans Query ne fonctionnent pour moi lorsque j'utilise apollo avec AppSync.

L'une des fonctionnalités d'AppSync qui a généré beaucoup de buzz est l'accent mis sur les données en temps réel. Sous le capot, la fonction en temps réel d'AppSync est alimentée par des abonnements GraphQL. Alors qu'Apollo base ses abonnements sur WebSockets via subscriptions-transport-ws, les abonnements dans GraphQL sont en fait assez flexibles pour que vous puissiez les baser sur une autre technologie de messagerie. Au lieu de WebSockets, les abonnements AppSync utilisent MQTT comme couche de transport.

Existe-t-il un moyen d'utiliser AppSync tout en utilisant Apollo?

websocketmqttapolloreact-apolloaws-appsync
6
C.Lee

Ok, voici comment cela a fonctionné pour moi. Vous devrez utiliser aws-appsync SDK ( https://github.com/awslabs/aws-mobile-appsync-sdk-js ) pour utiliser Apollo avec AppSync. N'a pas eu à apporter d'autres modifications pour que l'abonnement fonctionne avec AppSync.

Configurez ApolloProvider et le 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>
}

Voici à quoi ressemble l'abonnement dans un composant:

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

Juste pour ajouter une note sur l'authentification car il m'a fallu un certain temps pour résoudre ce problème:

Si le type d'authentification est "API_KEY", vous devez passer l'apiKey comme indiqué dans la réponse de @ C.Lee.

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

Si le type d'authentification est "Amazon_COGNITO_USER_POOLS", vous avez besoin du jwkToken, et si vous utilisez Amplify, vous pouvez le faire comme

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

Mais si votre type d'authentification est "AWS_IAM", vous avez besoin des éléments suivants:

  auth: {
    type: AUTH_TYPE.AWS_IAM,
    credentials: () => Auth.currentCredentials()
  }
2
DenisH