refactor(types): rewritten most types

Author: Guillaume Chau

src/apollo-provider.js

@@ -9,8 +9,6 @@ export class ApolloProvider {
     this.watchLoading = options.watchLoading
     this.errorHandler = options.errorHandler
     this.prefetch = options.prefetch
-
-    this.prefetchQueries = []
   }
 
   provide (key = '$apolloProvider') {

src/dollar-apollo.js

@@ -19,10 +19,6 @@ export class DollarApollo {
     return this.vm.$apolloProvider
   }
 
-  query (options) {
-    return this.getClient(options).query(options)
-  }
-
   getClient (options = null) {
     if (!options || !options.client) {
       if (typeof this.client === 'object') {
@@ -48,6 +44,10 @@ export class DollarApollo {
     return client
   }
 
+  query (options) {
+    return this.getClient(options).query(options)
+  }
+
   watchQuery (options) {
     const observable = this.getClient(options).watchQuery(options)
     const _subscribe = observable.subscribe.bind(observable)

types/apollo-provider.d.ts

@@ -1,22 +1,25 @@
 /* eslint no-unused-vars: 0 */
 
 import Vue, { AsyncComponent } from 'vue'
-import { VueApolloComponentOption } from './options'
 import { ApolloClient } from 'apollo-client';
-import { WatchLoading, ErrorHandler, VueApolloOptions } from './options'
+import {
+  VueApolloComponentOptions,
+  WatchLoading,
+  ErrorHandler
+} from './options'
 
-export type VueApolloComponent<V extends Vue = Vue> = VueApolloComponentOption<V> | typeof Vue | AsyncComponent;
+export type VueApolloComponent<V extends Vue = Vue> = VueApolloComponentOptions<V> | typeof Vue | AsyncComponent;
 
 export class ApolloProvider<TCacheShape=any> {
   provide: (key?: string) => this
   constructor (options: {
     defaultClient: ApolloClient<TCacheShape>,
-    defaultOptions?: VueApolloOptions<any>,
+    defaultOptions?: VueApolloComponentOptions<Vue>,
     clients?: { [key: string]: ApolloClient<TCacheShape> },
-    watchLoading?: WatchLoading<any>,
-    errorHandler?: ErrorHandler<any>
+    watchLoading?: WatchLoading,
+    errorHandler?: ErrorHandler,
+    prefetch?: boolean
   })
   clients: { [key: string]: ApolloClient<TCacheShape> }
   defaultClient: ApolloClient<TCacheShape>
-  prefetchQueries: any
 }

types/options.d.ts

@@ -1,94 +1,86 @@
+import Vue from 'vue'
 import {
   WatchQueryOptions,
+  OperationVariables,
   MutationOptions,
   SubscriptionOptions,
   SubscribeToMoreOptions,
   ObservableQuery,
   NetworkStatus,
   ApolloQueryResult,
+  ApolloError
 } from 'apollo-client';
 import { FetchResult } from 'apollo-link';
 import { ServerError, ServerParseError } from 'apollo-link-http-common';
 import { DocumentNode, GraphQLError } from 'graphql';
 
-// include Omit type from https://github.com/Microsoft/TypeScript/issues/12215
-type Property = string | number | symbol;
-type Diff<T extends Property, U extends Property> = ({ [P in T]: P } & { [P in U]: never } & { [x: string]: never })[T];
-type Omit<T, K extends keyof T> = { [P in Diff<keyof T, K>]?: T[P] };
+/* Component options */
 
-type ApolloVueThisType<V> = V & { [key: string]: any };
-type VariableFn<V> = ((this: ApolloVueThisType<V>) => Object) | Object;
-type ApolloVueUpdateQueryFn<V> = (this: ApolloVueThisType<V>, previousQueryResult: { [key: string]: any }, options: {
-  error: any,
-  subscriptionData: { data: any; };
-  variables?: { [key: string]: any; };
-}) => Object;
-
-interface ApolloVueSubscribeToMoreOptions<V> {
-  document: DocumentNode;
-  variables?: VariableFn<V>;
-  updateQuery?: ApolloVueUpdateQueryFn<V>;
-  onError?: (error: Error) => void;
+export interface AllVueApolloComponentSpecialOptions<Instance> {
+  $skip: boolean
+  $skipAllQueries: boolean
+  $skipAllSubscriptions: boolean
+  $deep: boolean
+  $client: string
+  $loadingKey: string
+  $watchLoading: WatchLoading
+  $error: ErrorHandler
+  $query: Partial<VueApolloQueryDefinition<Instance>>
+  $subscribe: VueApolloSubscriptionProperty
 }
 
-export type WatchLoading<V> = (this: ApolloVueThisType<V>, isLoading: boolean, countModifier: number) => void
+export type VueApolloComponentSpecialOptions<Instance> =
+  Partial<AllVueApolloComponentSpecialOptions<Instance>>
 
-export interface ErrorResponse {
-  graphQLErrors?: ReadonlyArray<GraphQLError>;
-  networkError?: Error | ServerError | ServerParseError;
+export interface VueApolloComponentOptions<Instance>
+ extends VueApolloComponentSpecialOptions<Instance> {
+  [key: string] : VueApolloQueryProperty<Instance> |
+    VueApolloComponentSpecialOptions<Instance>[keyof VueApolloComponentSpecialOptions<Instance>]
 }
-export type ErrorHandler<V> = (this: ApolloVueThisType<V>, error: ErrorResponse) => void
 
-type _WatchQueryOptions = Omit<WatchQueryOptions, 'query'>; // exclude query prop because it causes type incorrectly error
+/* Special component options */
 
-interface ExtendableVueApolloQueryOptions<V, R> extends _WatchQueryOptions {
-  update?: (this: ApolloVueThisType<V>, data: R) => any;
-  result?: (this: ApolloVueThisType<V>, data: ApolloQueryResult<R>, loader: any, netWorkStatus: NetworkStatus) => void;
-  error?: ErrorHandler<V>;
-  loadingKey?: string;
-  watchLoading?: WatchLoading<V>;
-  skip?: ((this: ApolloVueThisType<V>) => boolean) | boolean;
-  manual?: boolean;
-  subscribeToMore?: ApolloVueSubscribeToMoreOptions<V> | ApolloVueSubscribeToMoreOptions<V>[];
-  prefetch?: ((context: any) => any) | boolean;
-  deep?: boolean;
-}
-export interface VueApolloQueryOptions<V, R> extends ExtendableVueApolloQueryOptions<V, R> {
-  query: ((this: ApolloVueThisType<V>) => DocumentNode) | DocumentNode;
-  variables?: VariableFn<V>;
-  client?: String
-}
+export type WatchLoading = (isLoading: boolean, countModifier: number) => void
+export type ErrorHandler = (error: ApolloError) => void
 
-export interface VueApolloMutationOptions<V, R> extends MutationOptions<R> {
-  mutation: DocumentNode;
-  variables?: VariableFn<V>;
-  optimisticResponse?: ((this: ApolloVueThisType<V>) => R) | R;
-  client?: String
-}
+/* Query */
 
-export interface VueApolloSubscriptionOptions<V, R> extends SubscriptionOptions {
-  query: DocumentNode;
-  variables?: VariableFn<V>;
-  skip?: (this: ApolloVueThisType<V>) => boolean | boolean;
-  result?: (this: V, data: FetchResult<R>) => void;
+type QueryVariables = (() => OperationVariables) | OperationVariables;
+
+export type VueApolloQueryProperty<Instance> =
+  DocumentNode |
+  VueApolloQueryDefinition<Instance> |
+  (() => VueApolloQueryDefinition<Instance> | null)
+
+// exclude query prop because it causes type incorrectly error
+type WatchQueryOptionsWithoutQuery = Omit<WatchQueryOptions, 'query'>;
+
+export interface VueApolloQueryDefinition<Instance = Vue, R = any> extends WatchQueryOptionsWithoutQuery {
+  query: DocumentNode | (() => DocumentNode | null)
+  variables?: QueryVariables
+  update?: (data: R) => any
+  result?: (result: ApolloQueryResult<R>, key: string) => void
+  error?: ErrorHandler
+  manual?: boolean
+  loadingKey?: string
+  watchLoading?: WatchLoading
+  skip?: (() => boolean) | boolean
+  prefetch?: ((context: any) => any) | boolean
+  client?: string
+  deep?: boolean
+  subscribeToMore?: VueApolloSubscribeToMoreOptions | (VueApolloSubscribeToMoreOptions & ThisType<Instance>)[]
 }
 
-type QueryComponentProperty<V> = ((this: ApolloVueThisType<V>) => VueApolloQueryOptions<V, any>) | VueApolloQueryOptions<V, any>
-type SubscribeComponentProperty<V> = VueApolloSubscriptionOptions<V, any> | { [key: string]: VueApolloSubscriptionOptions<V, any> }
+/* Subscriptions */
 
-export type VueApolloOptions<V> = {
-  $skip?: boolean,
-  $skipAllQueries?: boolean,
-  $skipAllSubscriptions?: boolean,
-  $deep?: boolean,
-  $client?: string,
-  $loadingKey?: string,
-  $watchLoading?: WatchLoading<V>,
-  $error?: ErrorHandler<V>,
-  $query?: ExtendableVueApolloQueryOptions<V, any>
+interface VueApolloSubscribeToMoreOptions extends SubscribeToMoreOptions {
+  variables?: QueryVariables;
 }
 
-export interface VueApolloComponentOption<V> extends VueApolloOptions<V> {
-  [key: string]: QueryComponentProperty<V> | SubscribeComponentProperty<V> | ExtendableVueApolloQueryOptions<V, any> | string | boolean | Function | undefined;
-  $subscribe?: SubscribeComponentProperty<V>;
+interface VueApolloSubscriptionDefinition extends SubscriptionOptions {
+  variables?: QueryVariables
 }
+
+export type VueApolloSubscriptionProperty =
+  VueApolloSubscriptionDefinition |
+  { [key: string]: VueApolloSubscriptionDefinition }