Akryum / Akryum/vue-cli-plugin-apollo

Ws request needs to refresh the token to take effect

Open
#186 0 comments 0 reactions 0 assignees View on GitHub
question
Dominant language
JavaScript
Stars
477
Forks
109
PR merge metrics
No merged PRs in 30d

Description

```typescript
// server
context: ({ req, connection }) =>
connection ? { req: connection.context } : { req },
playground: true,
debug: true,
autoSchemaFile: 'schema.graphql',
installSubscriptionHandlers: true,
subscriptions: {
onConnect: (connectionParams: any) => {
return { headers: { authorization: connectionParams.authorization } };
},
},
```

```typescript
// client
import Vue from 'vue'
import VueApollo from 'vue-apollo'
import { createApolloClient } from 'vue-cli-plugin-apollo/graphql-client'
import router from '@/router'

Vue.use(VueApollo)

const httpEndpoint =
process.env.VUE_APP_GRAPHQL_HTTP || 'http://localhost:4000/graphql'

const defaultOptions = {
tokenName: 'token',
wsEndpoint: `ws://localhost:3333/graphql`,
httpEndpoint,
persisting: false,
ssr: false
}
export function createProvider(options = {}) {
const { apolloClient, wsClient } = createApolloClient({
...defaultOptions,
...options
})
apolloClient.wsClient = wsClient
const apolloProvider = new VueApollo({
defaultClient: apolloClient,
defaultOptions: {
$query: {
// fetchPolicy: 'cache-and-network'
}
},
errorHandler(error: any) {
// tslint:disable-next-line:no-console
console.log(
'%cError',
'background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;',
JSON.stringify(error)
)
if (Number(error.gqlError.message.statusCode) === 401) {
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
})
}
}
})
return apolloProvider
}

```

- When the first WS request `payload` is empty, I need to manually refresh to get the `authorization` parameter. What is the reason?

Token:
![image](https://user-images.githubusercontent.com/25023667/61573360-07b1cd80-aae0-11e9-965c-d283a449bb01.png)
First WS request:
![image](https://user-images.githubusercontent.com/25023667/61573363-16988000-aae0-11e9-89b3-374e28f81466.png)
Request after refresh:
![image](https://user-images.githubusercontent.com/25023667/61573372-38920280-aae0-11e9-8b49-f67471a01b82.png)

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the createApolloClient setup and the subscriptions.onConnect handler shown in the issue. Trace how the initial WebSocket connection obtains connectionParams and passes authorization into the first request. Done means the initial WebSocket request includes the current authorization token without requiring a manual refresh.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
api, authentication
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.