From e9f7b6a04775858a68810de19f0bf702f48f90c1 Mon Sep 17 00:00:00 2001 From: joe-re Date: Mon, 7 May 2018 19:46:18 +0900 Subject: [PATCH 1/4] upgrade @types/graphql --- yarn.lock | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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" From 8fa594dbffe03e16264c59615d2835fbe533f68e Mon Sep 17 00:00:00 2001 From: joe-re Date: Mon, 7 May 2018 20:35:08 +0900 Subject: [PATCH 2/4] refactor type definition --- types/index.d.ts | 4 +-- types/options.d.ts | 65 +++++++++++++++++++++++++++++++++++++++++ types/test/App.ts | 2 +- types/test/index.ts | 3 +- types/vue-apollo.d.ts | 67 +++---------------------------------------- types/vue.d.ts | 3 +- 6 files changed, 76 insertions(+), 68 deletions(-) create mode 100644 types/options.d.ts diff --git a/types/index.d.ts b/types/index.d.ts index f99e2796..beabd128 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -1,4 +1,4 @@ import './vue' -import { VueApollo } from './vue-apollo'; +import { VueApollo } from './vue-apollo' -export default VueApollo; \ No newline at end of file +export default VueApollo 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..091b3a3c 100644 --- a/types/test/index.ts +++ b/types/test/index.ts @@ -16,4 +16,5 @@ 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) }) diff --git a/types/vue-apollo.d.ts b/types/vue-apollo.d.ts index cd978483..d9e45bd8 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 } 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,3 @@ 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; -} diff --git a/types/vue.d.ts b/types/vue.d.ts index 183a284a..bd70bc14 100644 --- a/types/vue.d.ts +++ b/types/vue.d.ts @@ -1,5 +1,6 @@ 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 { From 4f9843c81fbaa28e2883d32bbb6c2a1ea82d0129 Mon Sep 17 00:00:00 2001 From: joe-re Date: Mon, 7 May 2018 20:35:25 +0900 Subject: [PATCH 3/4] remove unused property --- types/vue.d.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/types/vue.d.ts b/types/vue.d.ts index bd70bc14..d24fe2f8 100644 --- a/types/vue.d.ts +++ b/types/vue.d.ts @@ -4,7 +4,6 @@ import { VueApolloComponentOption } from './options' declare module "vue/types/options" { interface ComponentOptions { - apolloProvider?: VueApollo; apollo?: VueApolloComponentOption; } } From 62999b43630bb5c511576c0397e1dcec34facc63 Mon Sep 17 00:00:00 2001 From: joe-re Date: Mon, 7 May 2018 21:27:17 +0900 Subject: [PATCH 4/4] update apollo-provider type definition ref: #66504309599ce9d4a31feb8fd5f065d790349c86 --- types/apollo-provider.d.ts | 14 ++++++++++++++ types/index.d.ts | 4 +++- types/test/index.ts | 17 ++++++++++++++--- types/test/willPrefetch.ts | 17 +++++++++++++++++ types/vue-apollo.d.ts | 4 +++- 5 files changed, 51 insertions(+), 5 deletions(-) create mode 100644 types/apollo-provider.d.ts create mode 100644 types/test/willPrefetch.ts 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 beabd128..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 +export { willPrefetch, ApolloProvider } diff --git a/types/test/index.ts b/types/test/index.ts index 091b3a3c..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' }) @@ -18,3 +16,16 @@ Vue.use(VueApollo) /* 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 d9e45bd8..a5cbbba5 100644 --- a/types/vue-apollo.d.ts +++ b/types/vue-apollo.d.ts @@ -4,7 +4,7 @@ import { ApolloClient } from 'apollo-client'; import { SubscriptionOptions, ObservableQuery } from 'apollo-client' import { DataProxy } from 'apollo-cache'; import { subscribe } from 'graphql/subscription/subscribe'; -import { ApolloProvider } from './apollo-provider' +import { ApolloProvider, VueApolloComponent } from './apollo-provider' import { VueApolloQueryOptions, VueApolloMutationOptions, VueApolloSubscriptionOptions, ApolloVueThisType, VueApolloOptions } from './options' export class VueApollo extends ApolloProvider implements PluginObject<{}>{ @@ -23,3 +23,5 @@ export interface ApolloProperty { mutate: Mutate; subscribe: Subscribe; } + +export function willPrefetch (component: VueApolloComponent, contextCallback?: boolean): VueApolloComponent \ No newline at end of file