diff --git a/types/apollo-provider.d.ts b/types/apollo-provider.d.ts new file mode 100644 index 00000000..ac7f86d9 --- /dev/null +++ b/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 = VueApolloComponentOption | typeof Vue | AsyncComponent; + +export class ApolloProvider { + provide: (key?: string) => this + prefetchAll: (context: any, components: VueApolloComponent[], options?: { includeGlobal?: boolean }) => Promise[]> + getStates(options?: { exportNamespace?: string }): { [key: string]: any } + exportStates(oprions?: { globalName?: string, attachTo?: string, exportNamespace?: string}): string +} diff --git a/types/index.d.ts b/types/index.d.ts index f99e2796..f8f58635 100644 --- a/types/index.d.ts +++ b/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; \ No newline at end of file +export default VueApollo +export { willPrefetch, ApolloProvider } diff --git a/types/options.d.ts b/types/options.d.ts new file mode 100644 index 00000000..6a967f09 --- /dev/null +++ b/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 = ({ [P in T]: P } & { [P in U]: never } & { [x: string]: never })[T]; +type Omit = { [P in Diff]?: T[P] }; + +type ApolloVueThisType = V & { [key: string]: any }; +type VariableFn = ((this: ApolloVueThisType) => Object) | Object; +type ApolloVueUpdateQueryFn = (this: ApolloVueThisType, previousQueryResult: { [key: string]: any }, options: { + error: any, + subscriptionData: { data: any; }; + variables?: { [key: string]: any; }; +}) => Object; + +interface ApolloVueSubscribeToMoreOptions { + document: DocumentNode; + variables?: VariableFn; + updateQuery?: ApolloVueUpdateQueryFn; + onError?: (error: Error) => void; +} + +type _WatchQueryOptions = Omit; // exclude query prop because it causes type incorrectly error +export interface VueApolloQueryOptions extends _WatchQueryOptions { + query: ((this: ApolloVueThisType) => DocumentNode) | DocumentNode; + variables?: VariableFn; + update?: (this: ApolloVueThisType, data: R) => any; + result?: (this: ApolloVueThisType, data: R, loader: any, netWorkStatus: NetworkStatus) => void; + error?: (this: ApolloVueThisType, error: any) => void; + loadingKey?: string; + watchLoading?: (isLoading: boolean, countModifier: number) => void; + skip?: (this: ApolloVueThisType) => boolean | boolean; + manual?: boolean; + subscribeToMore?: ApolloVueSubscribeToMoreOptions | ApolloVueSubscribeToMoreOptions[]; + prefetch?: (context: any) => boolean | boolean; +} + +export interface VueApolloMutationOptions extends MutationOptions { + mutation: DocumentNode; + variables?: VariableFn; + optimisticResponse?: ((this: ApolloVueThisType) => any) | Object; +} + +export interface VueApolloSubscriptionOptions extends SubscriptionOptions { + query: DocumentNode; + variables?: VariableFn; + result?: (this: V, data: R) => void; +} + +type QueryComponentProperty = ((this: ApolloVueThisType) => VueApolloQueryOptions) | VueApolloQueryOptions +type SubscribeComponentProperty = VueApolloSubscriptionOptions | { [key: string]: VueApolloSubscriptionOptions } + +export type VueApolloOptions = { + $skip?: boolean, + $skipAllQueries?: boolean, + $skipAllSubscriptions?: boolean, + $client?: string, + $loadingKey?: string, + $error?: Function +} + +export interface VueApolloComponentOption extends VueApolloOptions { + [key: string]: QueryComponentProperty | SubscribeComponentProperty | string | boolean | Function | undefined; + $subscribe?: SubscribeComponentProperty; +} diff --git a/types/test/App.ts b/types/test/App.ts index 803fde54..6cee4105 100644 --- a/types/test/App.ts +++ b/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: { diff --git a/types/test/index.ts b/types/test/index.ts index f179784c..9a597baf 100644 --- a/types/test/index.ts +++ b/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), }) \ No newline at end of file +/* 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/) diff --git a/types/test/willPrefetch.ts b/types/test/willPrefetch.ts new file mode 100644 index 00000000..ba3fb8f5 --- /dev/null +++ b/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 + } + } +}) \ No newline at end of file diff --git a/types/vue-apollo.d.ts b/types/vue-apollo.d.ts index cd978483..a5cbbba5 100644 --- a/types/vue-apollo.d.ts +++ b/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 = ({ [P in T]: P } & { [P in U]: never } & { [x: string]: never })[T]; -type Omit = { [P in Diff]?: 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 & { [key: string]: any }; -type VariableFn = ((this: ApolloVueThisType) => Object) | Object; -type ApolloVueUpdateQueryFn = (this: ApolloVueThisType, previousQueryResult: { [key: string]: any }, options: { - error: any, - subscriptionData: { data: any; }; - variables?: { [key: string]: any; }; -}) => Object; - -interface ApolloVueSubscribeToMoreOptions { - document: DocumentNode; - variables?: VariableFn; - updateQuery?: ApolloVueUpdateQueryFn; - onError?: (error: Error) => void; -} - -type _WatchQueryOptions = Omit; // exclude query prop because it causes type incorrectly error -export interface VueApolloQueryOptions extends _WatchQueryOptions { - query: ((this: ApolloVueThisType) => DocumentNode) | DocumentNode; - variables?: VariableFn; - update?: (this: ApolloVueThisType, data: R) => any; - result?: (this: ApolloVueThisType, data: R, loader: any, netWorkStatus: NetworkStatus) => void; - error?: (this: ApolloVueThisType, error: any) => void; - loadingKey?: string; - watchLoading?: (isLoading: boolean, countModifier: number) => void; - skip?: (this: ApolloVueThisType) => boolean | boolean; - manual?: boolean; - subscribeToMore?: ApolloVueSubscribeToMoreOptions | ApolloVueSubscribeToMoreOptions[]; -} - -export interface VueApolloMutationOptions extends MutationOptions { - mutation: DocumentNode; - variables?: VariableFn; - optimisticResponse?: ((this: ApolloVueThisType) => any) | Object; -} - -export interface VueApolloSubscriptionOptions extends SubscriptionOptions { - query: DocumentNode; - variables?: VariableFn; - result?: (this: V, data: R) => void; -} - type Query = (key: string, options: VueApolloQueryOptions) => void; type Mutate = (params: VueApolloMutationOptions) => Promise; type Subscribe = (params: SubscriptionOptions) => ObservableQuery; @@ -75,10 +23,5 @@ export interface ApolloProperty { mutate: Mutate; subscribe: Subscribe; } -type QueryComponentProperty = ((this: ApolloVueThisType) => VueApolloQueryOptions) | VueApolloQueryOptions -type SubscribeComponentProperty = VueApolloSubscriptionOptions | { [key: string]: VueApolloSubscriptionOptions } -export interface VueApolloComponentOption extends VueApolloOptions { - [key: string]: QueryComponentProperty | SubscribeComponentProperty | string | boolean | Function | undefined; - $subscribe?: SubscribeComponentProperty; -} +export function willPrefetch (component: VueApolloComponent, contextCallback?: boolean): VueApolloComponent \ No newline at end of file diff --git a/types/vue.d.ts b/types/vue.d.ts index 183a284a..d24fe2f8 100644 --- a/types/vue.d.ts +++ b/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 { - apolloProvider?: VueApollo; apollo?: VueApolloComponentOption; } } diff --git a/yarn.lock b/yarn.lock index 4c8c68b5..2a1f089c 100644 --- a/yarn.lock +++ b/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"