dotansimha / dotansimha/graphql-code-generator-community
[typescript-vue-apollo-smart-ops] The TypeScript types for subscriptions are completely broken
- Dominant language
- TypeScript
- Stars
- 137
- Forks
- 195
- Avg merge
- 6h 20m
- Merged PRs (30d)
- 16
Description
### Describe the bug
I'm wondering how no one's noticed this before, but the subscription functions generated using `createSmartSubscriptionOptionsFunction` return incomplete or even invalid types.
The main issues are:
1. There's no generic argument for specifying the value of `this` inside the options functions like `variables()`. The functions generated for standard queries & mutations do have this argument, however. Instead, by default the `this` value seems to just be the options object, which definitely is a bug.
```js
apollo: {
$subscribe: {
userCreated: useUserCreatedSubscription({
variables() {
return {
id: this.id, // TS will throw an error that `this` does not have an `id` field, even if it's available in the Vue component
}
}
})
}
}
```
The examples in the docs also only show variables having static/hardcoded values, even tho no one's ever going to have static/hardcoded variables for these operations. Almost always you're going to want to rely on the properties of the Vue component to resolve the variables.
2. The subscription options type doesn't specify that the `result` and `skip` functions are available, so if you use them, TS will throw an error. This issue I was at least able to solve myself through type augmentation.
Lastly, I wanted to comment on the fact that the need to specify the type of `this` inside these option objects isn't very good DX in the first place, because you end up duplicating these types first in the actual Vue component and then inside this generic argument. But here I will assume that there's a technical reason why these functions can't correctly resolve the `this` values automatically.
```js
data() {
return {id: null}
},
apollo: {
user: useMainUserDataQuery({
variables() {
return { id: this.id }
}
})
}
```
### Your Example Website or App
none
### Steps to Reproduce the Bug or Issue
No reproduction is really necessary, you can just look at the TS type definitions to see what I mean. I also tried to provide short code examples above.
### Expected behavior
1. Subscription option type should contain a definition for the `skip()` and `result()` functions
2. Subscription type should either infer the Vue component's this value correctly or at the very least allow specifying it through a generic argument
### Screenshots or Videos
_No response_
### Platform
- OS: Ubuntu 20
- NodeJS: 16.14.0
- `graphql` version: 15.8.0
- @graphql-codegen/typescript-vue-apollo-smart-ops version: 2.3.1
### Codegen Config File
```
overwrite: true
schema: 'http://localhost:3000/graphql'
documents:
- 'src/graphql/**/*.gql'
- 'src/**/*.{ts,tsx,js,jsx,vue}'
generates:
src/graphql/generated/graphql.ts:
plugins:
- 'typescript'
- 'typescript-operations'
- 'typescript-document-nodes'
- 'typescript-vue-apollo-smart-ops'
config:
vueApolloErrorHandlerFunction: handleApolloError
vueApolloErrorHandlerFunctionImportFrom: '@/config/vueApolloSmartOpsConfig'
scalars:
JSONObject: Record
```
### Additional context
_No response_
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.