Update typed apollo provider

types/apollo-provider.d.ts

@@ -0,0 +1,14 @@
+/* eslint no-unused-vars: 0 */
+
+import { ApolloClient, ApolloQueryResult } from 'apollo-client'
+import Vue, { PluginFunction, AsyncComponent } from 'vue'
+import { VueApolloComponentOption } from './options'
+
+export type VueApolloComponent<V extends Vue = Vue> = VueApolloComponentOption<V> | typeof Vue | AsyncComponent;
+
+export class ApolloProvider {
+  provide: (key?: string) => this
+  prefetchAll: (context: any, components: VueApolloComponent[], options?: { includeGlobal?: boolean }) => Promise<ApolloQueryResult<any>[]>
+  getStates(options?: { exportNamespace?: string }): { [key: string]: any }
+  exportStates(oprions?: { globalName?: string, attachTo?: string, exportNamespace?: string}): string
+}

types/index.d.ts

@@ -1,4 +1,6 @@
 import './vue'
-import { VueApollo } from './vue-apollo';
+import { VueApollo, willPrefetch } from './vue-apollo'
+import { ApolloProvider } from './apollo-provider'
 
-export default VueApollo;
+export default VueApollo
+export { willPrefetch, ApolloProvider }

types/options.d.ts

@@ -0,0 +1,65 @@
+import { WatchQueryOptions, MutationOptions, SubscriptionOptions, SubscribeToMoreOptions, ObservableQuery, NetworkStatus } from 'apollo-client'
+import { DocumentNode } from 'graphql';
+
+// include Omit type from https://github.com/Microsoft/TypeScript/issues/12215
+type Diff<T extends string, U extends string> = ({ [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] };
+
+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;
+}
+
+type _WatchQueryOptions = Omit<WatchQueryOptions, 'query'>; // exclude query prop because it causes type incorrectly error
+export interface VueApolloQueryOptions<V, R> extends _WatchQueryOptions { 
+  query: ((this: ApolloVueThisType<V>) => DocumentNode) | DocumentNode;
+  variables?: VariableFn<V>;
+  update?: (this: ApolloVueThisType<V>, data: R) => any;
+  result?: (this: ApolloVueThisType<V>, data: R, loader: any, netWorkStatus: NetworkStatus) => void;
+  error?: (this: ApolloVueThisType<V>, error: any) => void;
+  loadingKey?: string;
+  watchLoading?: (isLoading: boolean, countModifier: number) => void;
+  skip?: (this: ApolloVueThisType<V>) => boolean | boolean;
+  manual?: boolean;
+  subscribeToMore?: ApolloVueSubscribeToMoreOptions<V> | ApolloVueSubscribeToMoreOptions<V>[];
+  prefetch?: (context: any) => boolean | boolean;
+}
+
+export interface VueApolloMutationOptions<V, R> extends MutationOptions<R> {
+  mutation: DocumentNode;
+  variables?: VariableFn<V>;
+  optimisticResponse?: ((this: ApolloVueThisType<V>) => any) | Object;
+}
+
+export interface VueApolloSubscriptionOptions<V, R> extends SubscriptionOptions {
+  query: DocumentNode;
+  variables?: VariableFn<V>;
+  result?: (this: V, data: R) => void;
+}
+
+type QueryComponentProperty<V> = ((this: ApolloVueThisType<V>) => VueApolloQueryOptions<V, any>) | VueApolloQueryOptions<V, any>
+type SubscribeComponentProperty<V> = VueApolloSubscriptionOptions<V, any> | { [key: string]: VueApolloSubscriptionOptions<V, any> }
+
+export type VueApolloOptions = {
+  $skip?: boolean,
+  $skipAllQueries?: boolean,
+  $skipAllSubscriptions?: boolean,
+  $client?: string,
+  $loadingKey?: string,
+  $error?: Function
+}
+
+export interface VueApolloComponentOption<V> extends VueApolloOptions {
+  [key: string]: QueryComponentProperty<V> | SubscribeComponentProperty<V> | string | boolean | Function | undefined;
+  $subscribe?: SubscribeComponentProperty<V>;
+}

types/test/App.ts

@@ -178,7 +178,7 @@ export default Vue.extend({
       this.$apollo.queries.tags.refetch()
     },
   },
-mounted() {
+  mounted() {
     const observer = this.$apollo.subscribe({
       query: SUB_QUERY,
       variables: {

types/test/index.ts

@@ -3,10 +3,8 @@ import Vue from 'vue'
 import 'isomorphic-fetch'
 import { ApolloClient } from 'apollo-client'
 import { HttpLink } from 'apollo-link-http'
-import { ApolloLink, split } from 'apollo-link'
-import { getMainDefinition } from 'apollo-utilities'
 
-import VueApollo from '../index'
+import VueApollo, { ApolloProvider } from '../index'
 import App from './App'
 
 const httpLink = new HttpLink({ uri: 'https://dummy.test.com' })
@@ -16,4 +14,18 @@ const apolloProvider = new VueApollo({ defaultClient: apolloClient })
 
 Vue.use(VueApollo)
 
-new Vue({ el: '#app', apolloProvider, render: h => h(App), })
+/* eslint no-new: 0 */
+new Vue({ el: '#app', provide: apolloProvider.provide(), render: h => h(App) })
+
+const provider: ApolloProvider = apolloProvider
+const component = new Vue()
+
+/* eslint no-unused-expressions: 0, no-return-await: 0 */
+async () => await provider.prefetchAll({ context: 'context' }, [component])
+async () => await provider.prefetchAll({ context: 'context' }, [component], { includeGlobal: false })
+
+for (const key in provider.getStates()) { console.log(key) }
+for (const key in provider.getStates({ exportNamespace: 'nameSpace' })) { console.log(key) }
+
+provider.exportStates().match(/js/)
+provider.exportStates({ globalName: '__APOLLO_STATE__', attachTo: 'window', exportNamespace: '' }).match(/js/)

types/test/willPrefetch.ts

@@ -0,0 +1,17 @@
+import { willPrefetch } from '../index'
+import gql from 'graphql-tag'
+
+export default willPrefetch({
+  apollo: {
+    allPosts: {
+      query: gql`query AllPosts {
+        allPosts {
+          id
+          imageUrl
+          description
+        }
+      }`,
+      prefetch: true, // Don't forget this
+    }
+  }
+})

types/vue-apollo.d.ts

@@ -1,71 +1,19 @@
 import Vue, { PluginObject, PluginFunction } from 'vue';
 import { DocumentNode } from 'graphql';
 import { ApolloClient } from 'apollo-client';
-import { WatchQueryOptions, MutationOptions, SubscriptionOptions, SubscribeToMoreOptions, ObservableQuery, NetworkStatus } from 'apollo-client'
+import { SubscriptionOptions, ObservableQuery } from 'apollo-client'
 import { DataProxy } from 'apollo-cache';
 import { subscribe } from 'graphql/subscription/subscribe';
+import { ApolloProvider, VueApolloComponent } from './apollo-provider'
+import { VueApolloQueryOptions, VueApolloMutationOptions, VueApolloSubscriptionOptions, ApolloVueThisType, VueApolloOptions } from './options'
 
-// include Omit type from https://github.com/Microsoft/TypeScript/issues/12215
-type Diff<T extends string, U extends string> = ({ [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] };
-
-type VueApolloOptions = {
-  $skip?: boolean,
-  $skipAllQueries?: boolean,
-  $skipAllSubscriptions?: boolean,
-  $client?: string,
-  $loadingKey?: string,
-  $error?: Function
-}
-
-export class VueApollo implements PluginObject<{}> {
+export class VueApollo extends ApolloProvider implements PluginObject<{}>{
   [key: string]: any;
   install: PluginFunction<{}>;
   constructor (options: { defaultClient: ApolloClient<{}>, defaultOptions?: VueApolloOptions, clients?: { [key: string]: ApolloClient<{}> } });
   static install(pVue: typeof Vue, options?:{} | undefined): void;
 }
 
-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;
-}
-
-type _WatchQueryOptions = Omit<WatchQueryOptions, 'query'>; // exclude query prop because it causes type incorrectly error
-export interface VueApolloQueryOptions<V, R> extends _WatchQueryOptions { 
-  query: ((this: ApolloVueThisType<V>) => DocumentNode) | DocumentNode;
-  variables?: VariableFn<V>;
-  update?: (this: ApolloVueThisType<V>, data: R) => any;
-  result?: (this: ApolloVueThisType<V>, data: R, loader: any, netWorkStatus: NetworkStatus) => void;
-  error?: (this: ApolloVueThisType<V>, error: any) => void;
-  loadingKey?: string;
-  watchLoading?: (isLoading: boolean, countModifier: number) => void;
-  skip?: (this: ApolloVueThisType<V>) => boolean | boolean;
-  manual?: boolean;
-  subscribeToMore?: ApolloVueSubscribeToMoreOptions<V> | ApolloVueSubscribeToMoreOptions<V>[];
-}
-
-export interface VueApolloMutationOptions<V, R> extends MutationOptions<R> {
-  mutation: DocumentNode;
-  variables?: VariableFn<V>;
-  optimisticResponse?: ((this: ApolloVueThisType<V>) => any) | Object;
-}
-
-export interface VueApolloSubscriptionOptions<V, R> extends SubscriptionOptions {
-  query: DocumentNode;
-  variables?: VariableFn<V>;
-  result?: (this: V, data: R) => void;
-}
-
 type Query<V> = (key: string, options: VueApolloQueryOptions<V, any>) => void;
 type Mutate<V, R=any> = <R=any>(params: VueApolloMutationOptions<V, R>) => Promise<R>;
 type Subscribe<R=any> = <R=any>(params: SubscriptionOptions) => ObservableQuery<R>;
@@ -75,10 +23,5 @@ export interface ApolloProperty<V> {
   mutate: Mutate<V>;
   subscribe: Subscribe;
 }
-type QueryComponentProperty<V> = ((this: ApolloVueThisType<V>) => VueApolloQueryOptions<V, any>) | VueApolloQueryOptions<V, any>
-type SubscribeComponentProperty<V> = VueApolloSubscriptionOptions<V, any> | { [key: string]: VueApolloSubscriptionOptions<V, any> }
 
-export interface VueApolloComponentOption<V> extends VueApolloOptions {
-  [key: string]: QueryComponentProperty<V> | SubscribeComponentProperty<V> | string | boolean | Function | undefined;
-  $subscribe?: SubscribeComponentProperty<V>;
-}
+export function willPrefetch (component: VueApolloComponent, contextCallback?: boolean): VueApolloComponent

types/vue.d.ts

@@ -1,9 +1,9 @@
 import Vue from "vue";
-import { VueApollo, VueApolloComponentOption, ApolloProperty } from './vue-apollo';
+import { VueApollo, ApolloProperty } from './vue-apollo';
+import { VueApolloComponentOption } from './options'
 
 declare module "vue/types/options" {
   interface ComponentOptions<V extends Vue> {
-    apolloProvider?: VueApollo;
     apollo?: VueApolloComponentOption<V>;
   }
 }

yarn.lock

@@ -59,8 +59,8 @@
   resolved "https://registry.yarnpkg.com/@types/async/-/async-2.0.47.tgz#f49ba1dd1f189486beb6e1d070a850f6ab4bd521"
 
 "@types/graphql@^0.12.3":
-  version "0.12.3"
-  resolved "https://registry.yarnpkg.com/@types/graphql/-/graphql-0.12.3.tgz#c429585aaa4523135e0ab4e12dec72d2d913946f"
+  version "0.12.7"
+  resolved "https://registry.yarnpkg.com/@types/graphql/-/graphql-0.12.7.tgz#392e46d6c1bceb7d68c117233cea787dde72780c"
 
 "@types/zen-observable@0.5.3", "@types/zen-observable@^0.5.3":
   version "0.5.3"