vue-apollo awsappsync -刷新凭据

Question

我正在对AWSAppSyncClient使用vue-apollo。我遵循了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认知验证成功登录后，我获得了“凭证”部分。

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 {

    }
  },
});

上面的设置运行良好。用户可以登录。验证用户后，发送临时凭证(访问密钥、密钥、会话令牌)。使用临时凭证，我可以通过vue-apollo订阅aws appsync。但是，凭据的有效期仅为1小时。因此，我需要更新凭据并保留订阅部分以获取实时数据。但是我不知道该怎么做。我已经看过文档了，但找不到任何与我的案例相关的东西。

我需要从'vm‘的子组件或从vuex存储更新凭据。我已经更新了凭据。我只是不知道如何将它传递给'AWSAppSyncClient‘，以及如何使用更新的凭据重新订阅。另外，我不想重新加载页面。它应该在不重新加载页面的情况下更新凭据。希望有人以前做过这件事？

Answer 1

我对我的代码做了很少的修改，现在我能够实现我想要的了。以下是我所做的更改，以防有人做同样的事情。

首先将apollo客户端作为空白加载-意味着在main.js文件中没有awsappsyncclient客户端。

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.
    }
  },
}

在登录和获得新凭据之后，我更新了appsyncObj的vuex存储。但是，我没有在这里添加该代码。