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 cognito验证成功登录后，我得到了“凭据”部分。

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验证用户之后，它将发送临时凭证（访问密钥，秘密密钥，会话令牌）。使用临时凭证，我可以通过vue-apollo订阅aws appsync。但是，凭据仅在1小时内有效。因此，我需要更新凭据并保留订阅部分以获取实时数据。但是我不知道该怎么做。我浏览了所有文档，但找不到与我的情况有关的任何内容。

我需要从“ vm”的子组件或从vuex存储更新凭据。我已经有更新的凭据。我只是不知道如何将其传递给“ AWSAppSyncClient”，以及如何使用更新的凭证重新订阅。我也不想重新加载页面。它应该更新凭据而不重新加载页面。希望有人以前做过此事？

Answer 1

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

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

var foo = { 'alpha' : 'puffin', 'beta' : 'beagle' };
var keys = [];
_.each( foo, function( val, key ) {
    keys.push(key);
});
console.log(keys);

然后从子组件中创建智能订阅。临时凭证过期后，我将生成新凭证并在vuex存储中进行更新。基于更改，我弯腰了旧的智能订阅并创建了一个新的智能订阅。

这是子组件代码。

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 {

    }
  },
});

我在登录后和获取新凭据后为appsyncObj更新了vuex存储。但是，我没有在此处添加该代码。

vue-apollo awsappsync-刷新凭证

1 个答案: