vuejs / apollo

🚀 Apollo/GraphQL integration for VueJS
http://apollo.vuejs.org
MIT License
6.02k stars 521 forks source link

vue-apollo awsappsync - update credentials #481

Closed sitakanta007 closed 5 years ago

sitakanta007 commented 5 years ago

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 ?

Here is stackoverflow link for the same question - https://stackoverflow.com/questions/54070464/vue-apollo-awsappsync-refresh-credentials

sitakanta007 commented 5 years ago

I have answered my own question in stackoverflow in this link.