web-dev-qa-db-ja.com

AppSyncでApolloクライアントを使用する方法？

AppSyncはサブスクリプションにMQTT over WebSocketsを使用しますが、ApolloはWebSocketを使用します。 AppSyncでapolloを使用する場合、SubscriptionコンポーネントもsubscribeForMoreコンポーネントのQueryも機能しません。

多くの話題を生み出したAppSync機能の1つは、リアルタイムデータに重点​​を置いていることです。内部的には、AppSyncのリアルタイム機能はGraphQLサブスクリプションを利用しています。 Apolloのサブスクリプションはsubscriptions-transport-wsを介してWebSocketsに基づいていますが、GraphQLのサブスクリプションは実際には、別のメッセージングテクノロジーに基づいて十分に柔軟です。 WebSocketの代わりに、AppSyncのサブスクリプションはトランスポート層としてMQTTを使用します。

Apolloを使用しながらAppSyncを利用する方法はありますか？

websocketmqttapolloreact-apolloaws-appsync
6
C.Lee

わかりました、これが私にとってどのように機能したかです。 AppSyncでApolloを使用するには、aws-appsync SDK（ https://github.com/awslabs/aws-mobile-appsync-sdk-js ）を使用する必要があります。 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>
11
C.Lee

これを解決するのに少し時間がかかったので、認証に関するメモを追加します。

AuthenticationTypeが "API_KEY"の場合、@ C.Leeの回答に示されているように、apiKeyを渡す必要があります。

  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()
  }
2
DenisH