missing result options in SubscriptionOptions

[sprhawk]

Describe the bug Missing result options in SubscriptionOptions

To Reproduce

 18 import Vue from 'vue'
 19 import Component from 'vue-class-component'
 20
 21 import { UsbDisk, OnUsbdisksChanged } from "generated/graphql";
 22
 23 @Component({
 24   apollo: {
 25     $subscribe: {
 26       usbDisksChanged: {
 27         query: OnUsbdisksChanged,
 28         result({ data }: any) {
 29           let disks: UsbDisk[] = data.usbDisksChanged;
 33           Vue.set(this, 'usbdisks', disks); // <- this is VueComponent
 34         }
 36       },
 37     }
 38   }})
 39 export default class DisksPage extends Vue {
 55
 56   usbdisks: UsbDisk[] = [];
 57
 58   created() {
 59   }
 60 }

On line 28, the result will fail to pass 'type check' or 'compile' from typescript compiler, reporting:

TS2769: No overload matches this call.
  Overload 1 of 2, '(options: ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>> & ThisType<...>): <VC extends VueClass<...>>(target: VC) => VC', gave the following error.
    Type '{ query: DocumentNode; result({ data }: { data: any; }): void; }' is not assignable to type 'VueApolloSubscriptionDefinition<OperationVariables>'.
      Object literal may only specify known properties, and 'result' does not exist in type 'VueApolloSubscriptionDefinition<OperationVariables>'.
  Overload 2 of 2, '(target: VueClass<Vue>): VueClass<Vue>', gave the following error.
    Argument of type '{ apollo: { $subscribe: { usbDisksChanged: { query: DocumentNode; result({ data }: { data: any; }): void; }; }; }; }' is not assignable to parameter of type 'VueClass<Vue>'.
      Object literal may only specify known properties, and 'apollo' does not exist in type 'VueClass<Vue>'.

The code after compiled can run without problem. (I set only to use typescript compiler to do type check in webpack configuration) Expected behavior result should pass the type-check and compiling

Versions vue: 2.6.11 vue-apollo:3.0.3 apollo-client:2.6.9 vue-class-component: 7.2.3

*** Additional Context*** I guess the problem is here? Missing a definition to result? https://github.com/vuejs/vue-apollo/blob/b13d688a99f1233dad659253e9f1f85b7ef1c10e/packages/vue-apollo/types/options.d.ts#L84-L87

[rwebb-sgefdf]

For anyone looking for a work around - overwriting this type worked for me:

<project-root>/src/types/vue-apollo/index.d.ts

import 'vue-apollo'

declare module 'vue-apollo/types/options' {
	interface VueApolloSubscriptionDefinition<Variables = OperationVariables>
		extends Omit<SubscriptionOptions<Variables>, 'variables'> {
		variables?: QueryVariables<Variables>
		result?: (result: ApolloQueryResult<Result>, key: string) => void
		client?: string
	}
}

It's worth saying the alternative syntax is also affected by this issue (not surprising, but in case anyone tries it anyway like I did):

{
	...
	created() {
		this.$apollo.addSmartQuery("usbDisksChanged", {
			query: OnUsbdisksChanged,
			result({ data }: any) {
				let disks: UsbDisk[] = data.usbDisksChanged;
				Vue.set(this, 'usbdisks', disks); // <- this is VueComponent
		        }
		})
	}
}

Otherwise, using a standard query might be sufficient for the next person's needs, as per the docs

[code-is-art]

If it wasn't for this issue I would have been scratching my head for days. Just an FYI the code by @rwebb-sgefdf needed to be slightly modified for v4 <project-root>/src/types/vue-apollo/index.d.ts

import '@vue/apollo-option'

declare module '@vue/apollo-option/types/options' {
	interface VueApolloSubscriptionDefinition<Variables = OperationVariables>
		extends Omit<SubscriptionOptions<Variables>, 'variables'> {
		variables?: QueryVariables<Variables>
		result?: (result: ApolloQueryResult<Result>, key: string) => void
                skip?: (() => boolean) | boolean
		client?: string
	}
}

[viljark]

If it wasn't for this issue I would have been scratching my head for days. Just an FYI the code by @rwebb-sgefdf needed to be slightly modified for v4 <project-root>/src/types/vue-apollo/index.d.ts

import '@vue/apollo-option'

declare module '@vue/apollo-option/types/options' {
	interface VueApolloSubscriptionDefinition<Variables = OperationVariables>
		extends Omit<SubscriptionOptions<Variables>, 'variables'> {
		variables?: QueryVariables<Variables>
		result?: (result: ApolloQueryResult<Result>, key: string) => void
                skip?: (() => boolean) | boolean
		client?: string
	}
}

@code-is-art thank you so much! We had the same issue when we upgraded to Vue 3.4.20 and this fixed all of the 5000 type errors we had. 😄