Getting 401 error on few requests

[muneshkumar578]

I'm using AWSAppSyncClient with my Vue app (@vue/cli-service: ~4.5.0) to access AppSync resources. I've configured OPENID_CONNECT as AUTH_TYPE. Below is my code:

Vue.use({
    install(Vue) {
        Vue.prototype.$appSyncClient = new AWSAppSyncClient({
            url: AWSAppSyncConfig.aws_appsync_graphqlEndpoint,
            region: AWSAppSyncConfig.aws_appsync_region,
            auth: {
            type: AUTH_TYPE.OPENID_CONNECT,
                jwtToken: Cookies.get('accessToken'),
            },
        },
        {
            defaultOptions: {
                watchQuery: {
                    fetchPolicy: 'network-only',
                    errorPolicy: 'ignore'
                },
                query: {
                    fetchPolicy: 'network-only',
                    errorPolicy: 'all'
                }
            }
        });
    }
});

And then using this client for queries

this.$appSyncClient.query({...})

Everything is working fine but after sometime it gives 401 error on few requests. I thought it could be an issue with either OPENID Server or access token. But when I refresh the page, it works again i.e. it doesn't give 401 error.

P.s: I'm not using 'vue-apollo' provider.

Any idea why the 401 error occurs for few requests and then works great?