vue-apollo awsappsync - обновить учетные данные

Question

Я использую vue-apollo с AWSAppSyncClient. Я следовал этой документации для Vue - https://github.com/awslabs/aws-mobile-appsync-sdk-js. Мое требование: пользователь должен иметь возможность подписаться на appsync. Вот код main.js.

import './bootstrap';
import router from './routes';
import store from './store';
import App from './components/templates/App';
import AWSAppSyncClient from 'aws-appsync';
import VueApollo from "vue-apollo";

const config = {
  url: process.env.MIX_APPSYNC_URL,
  region: process.env.MIX_APPSYNC_REGION,
  auth: {
    type: process.env.MIX_APPSYNC_TYPE,
    credentials: {
      accessKeyId: "temporary access key goes here",
      secretAccessKey: "temporary secret access key goes here",
      sessionToken: "session token goes here"
    }
  },
};

Я получаю часть «учетные данные» после того, как пользователь успешно вошел в систему с помощью aws cognito validation.

const options = {
  defaultOptions: {
    watchQuery: {
      fetchPolicy: 'cache-and-network',
    }
  }
}

// Create the apollo client
const apolloClient = new AWSAppSyncClient(config, options);

//The provider holds the Apollo client instances that can then be used by all the child components.
const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
});

var vm = new Vue({
  el:"#dashboardapp",
  router:router,
  apolloProvider:apolloProvider,
  store:store,
  components: { App },
  template: '<App/>',
  data() {
    return {

    }
  },
});

Приведенная выше настройка работает нормально. Пользователь может войти. После того, как cognito проверит пользователя, он отправит временные учетные данные (ключ доступа, секретный ключ, токен сеанса). С временными учетными данными я могу подписаться на aws appsync через vue-apollo. Однако учетные данные действительны только в течение 1 часа. Поэтому мне нужно обновить учетные данные и сохранить часть подписки для получения данных в реальном времени. Но я не знаю, как это сделать. Я просмотрел документы, но не смог найти ничего конкретного для моего случая.

Мне нужно обновить учетные данные из дочернего компонента 'vm' или из хранилища vuex. Я уже обновил учетные данные. Я просто не знаю, как передать его в AWSAppSyncClient и как повторно подписаться с обновленными учетными данными. Также я не хочу перезагрузить страницу. Следует обновить учетные данные без перезагрузки страницы. Надеюсь, кто-нибудь сделал бы это раньше?

Answer 1

Я сделал несколько изменений в своем коде, и теперь я могу достичь того, чего хотел. Вот изменения, которые я сделал, на случай, если кто-то сделает то же самое.

Первая загрузка клиента apollo как пустого - значит без awsappsyncclient в файле main.js.

import './bootstrap';
import router from './routes';
import store from './store';
import App from './components/templates/App';
import VueApollo from "vue-apollo";

// Create the apollo client
const apolloClient = '';

//The provider holds the Apollo client instances that can then be used by all the child components.
const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
});

var vm = new Vue({
  el:"#dashboardapp",
  router:router,
  apolloProvider:apolloProvider,
  store:store,
  components: { App },
  template: '<App/>',
  data() {
    return {

    }
  },
});

Затем из дочернего компонента я создаю смарт-подписку. После истечения срока действия временных учетных данных я создаю новые учетные данные и обновляю их в хранилище vuex. На основании этого изменения я прекращаю использовать старую смарт-подписку и создаю новую смарт-подписку.

Вот код дочернего компонента.

<template>
  <div class="status-frame">
   <!-- relevant code goes here -->
  </div>
</template>

<script>
import gql from 'graphql-tag';
import AWSAppSyncClient from 'aws-appsync';
import VueApollo from "vue-apollo";

export default {
  data () {
    return {

    }
  },
  methods: {
    timelineSubscribe() {
      if(this.$parent.$apolloProvider.clients[1]) {
        delete this.$parent.$apolloProvider.clients[1];
        this.$apollo.subscriptions.subscribeToNewNotification.stop();
      }
      const config = {
        url: process.env.MIX_APPSYNC_URL,
        region: process.env.MIX_APPSYNC_REGION,
        auth: {
          type: process.env.MIX_APPSYNC_TYPE,
          credentials: {
            accessKeyId: this.appsyncObj.accessKeyId,
            secretAccessKey: this.appsyncObj.secretAccessKey,
            sessionToken: this.appsyncObj.sessionToken
          }
        },
      };

      const options = {
        defaultOptions: {
          watchQuery: {
            fetchPolicy: 'cache-and-network',
          }
        }
      } 

      // Create the apollo client
      const apolloClient = new AWSAppSyncClient(config, options);

      // add apolloClient to a new index in apolloProvider. 
      this.$parent.$apolloProvider.clients[1] = apolloClient;

      console.log(this.$apollo.provider.clients);

      this.$apollo.addSmartSubscription('subscribeToAnything', {
        client: '1',
        query: gql`subscription subscribeToAnything ($accountId: String!) {
          subscribeToAnything(accountId: $accountId) {
           // required fields goes here
          }
        }`,

        // Reactive variables
        variables() {
        // This works just like regular queries
        // and will re-subscribe with the right variables
        // each time the values change
          return {
            accountId: 'account_id goes here',
          }
        },
       // Result hook
       result(data) {
         console.log(data);
       },
       skip () {
         return false;
       }
      });
    }
  },
  computed: {
    appsyncObj() {
      return this.$store.getters['profile/appsyncObj']; // get from vuex store
    }
  },
  watch: {
    'appsyncObj' () {
      this.timelineSubscribe(); // each time appsyncObj changes, it will call  this method and resubscribe with new credentials.
    }
  },
}

Я обновляю хранилище vuex для appsyncObj после входа в систему и получения новых учетных данных. Однако я не добавил этот код здесь.