dotansimha / dotansimha/graphql-code-generator-community

[typescript-vue-apollo-smart-ops] The TypeScript types for subscriptions are completely broken

Open
#205 3 comments 0 reactions 0 assignees View on GitHub
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.