diff --git a/README.md b/README.md index 48bde4c..1034854 100644 --- a/README.md +++ b/README.md @@ -39,9 +39,11 @@ Integrates [apollo](http://www.apollostack.com/) in your [Vue](http://vuejs.org) - [Skipping the subscription](#skipping-the-subscription) - [Manually adding a smart Subscription](#manually-adding-a-smart-subscription) - [Pagination with `fetchMore`](#pagination-with-fetchmore) +- [Special options](#special-options) - [Skip all](#skip-all) - [Multiple clients](#multiple-clients) - [Server-Side Rendering](#server-side-rendering) +- [API Reference](#api-reference) ## Installation @@ -1040,6 +1042,48 @@ export default { **Don't forget to include the `__typename` to the new result.** +## Special options + +The special options being with `$` in the `apollo` object. + +- `$skip` to disable all queries and subscriptions (see below) +- `$skipAllQueries` to disable all queries (see below) +- `$skipAllSubscriptions` to disable all subscriptions (see below) +- `$client` to use a client by default (see below) +- `$loadingKey` for a default loading key (see `loadingKey` advanced options for smart queries) +- `$error` to catch errors in a default handler (see `error` advanced options for smart queries) + +Example: + +```html + +``` + +You can define in the apollo provider a default set of options to apply to the `apollo` definitions. For example: + +```javascript +const apolloProvider = new VueApollo({ + defaultClient: apolloClient, + defaultOptions: { + // apollo options applied to all components that are using apollo + $loadingKey: 'loading', + }, +}) +``` + ## Skip all You can disable all the queries for the component with `skipAllQueries`, all the subscriptions with `skipAllSubscriptions` and both with `skipAll`: @@ -1409,4 +1453,125 @@ router.onReady(() => { --- +# API Reference + +WIP (PR welcome!) + +## ApolloProvider + +### Constructor + +```javascript +const apolloProvider = new VueApollo({ + // Multiple clients support + // Use the 'client' option inside queries + // or '$client' on the apollo definition + clients: { + a: apolloClientA, + b: apolloClientB, + }, + // Default client + defaultClient: apolloClient, + // Default 'apollo' definition + defaultOptions: { + // See 'apollo' defintion + }, + // Watch loading state for all queries + // See the 'watchLoading' advanced option + watchLoading (state, mod) { + loading += mod + console.log('Global loading', loading, mod) + }, + // Global error handler for all smart queries and subscriptions + errorHandler (error) { + console.log('Global error handler') + console.error(error) + }, +}) +``` + +Use the apollo provider into your Vue app: + +```javascript +new Vue({ + el: '#app', + apolloProvider, + render: h => h(App), +}) +``` + +### Methods + +#### prefetchAll + +(SSR) Prefetch all queued component definitions and returns a promise resolved when all corresponding apollo data is ready. + +```javascript +await apolloProvider.prefetchAll (context, componentDefs, options) +``` + +`context` is passed as the argument to the `prefetch` options inside the smart queries. It may contain the route and the store. + +`options` defaults to: + +```javascript +{ + // Include components outside of the routes + // that are registered with `willPrefetch` + includeGlobal: true, +} +``` + +#### getStates + +(SSR) Returns the apollo stores states as JavaScript objects. + +```JavaScript +const states = apolloProvider.getStates(options) +``` + +`options` defaults to: + +```javascript +{ + // Prefix for the keys of each apollo client state + exportNamespace: '', +} +``` + +#### exportStates + +(SSR) Returns the apollo stores states as JavaScript code inside a String. This code can be directly injected to the page HTML inside a `