vue-apollo awsappsync - refresh credentials

Question

I am using vue-apollo with AWSAppSyncClient. I have followed this documentation for Vue - https://github.com/awslabs/aws-mobile-appsync-sdk-js . My requirement is user should be able to subscribe to appsync. Here is the main.js code.

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"
    }
  },
};

I get the 'credentials' part after user logged in successfully with 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 {

    }
  },
});

The above set up works fine. User can login. After cognito verifies user, it sends temporary credentials (accesskey, secret key, session token). With temporary credentials I am able to subscribe to aws appsync through vue-apollo. However, the credentials are valid for 1 hour only. So I need to update the credentials and keep the subscription part to get live data. But I dont know how to do it. I have gone through the docs, but not able to find anything specific to my case.

I need to update the credentials from either a child component of 'vm' or from vuex store. I already have updated credentials. I just dont know how to pass it to the 'AWSAppSyncClient' and how to re-subscribe with updated credentials. Also I don't want to reload the page. It should update credentials without reloading the page. Hope anyone would have done this before ?

score 0 · Accepted Answer · answered Jan 09 '19 at 06:04

I have done few changes to my code and now I am able to achieve what I wanted. Here are the changes I have done, in case anyone doing same thing.

First loading the apollo client as blank - means without awsappsyncclient in main.js file.

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 {

    }
  },
});

Then from child component I am creating smart subscription. Once temporary credentials are expired, I am generating new credentials and updating in vuex store. Based on the change, I am stooping the old smart subscription and creating a new smart subscription.

Here is the child component code.

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

I update the vuex store for appsyncObj after login and after getting new credentials. However, I have not added that code here.

vue-apollo awsappsync - refresh credentials

1 Answers1