diff --git a/README.md b/README.md index f162140..dd000bc 100644 --- a/README.md +++ b/README.md @@ -48,8 +48,8 @@ Integrates [apollo](https://www.apollographql.com/) in your [Vue](http://vuejs.o - [Special options](#special-options) - [Skip all](#skip-all) - [Multiple clients](#multiple-clients) -- [Server-Side Rendering](#server-side-rendering) - [Query Components](#query-components) +- [Server-Side Rendering](#server-side-rendering) - [Migration](#migration) - [API Reference](#api-reference) @@ -1199,6 +1199,91 @@ tags: { } ``` +## Query components + +(WIP) You can use the `ApolloQuery` (or `apollo-query`) component to make watched Apollo queries directly in your template: + +```html + + + +``` + +Props: + +- `query`: GraphQL query (transformed by `graphql-tag`) +- `variables`: Object of GraphQL variables +- `fetchPolicy`: See [apollo fetchPolicy](https://www.apollographql.com/docs/react/basics/queries.html#graphql-config-options-fetchPolicy) +- `pollInterval`: See [apollo pollInterval](https://www.apollographql.com/docs/react/basics/queries.html#graphql-config-options-pollInterval) +- `notifyOnNetworkStatusChange`: See [apollo notifyOnNetworkStatusChange](https://www.apollographql.com/docs/react/basics/queries.html#graphql-config-options-notifyOnNetworkStatusChange) +- `context`: See [apollo context](https://www.apollographql.com/docs/react/basics/queries.html#graphql-config-options-context) +- `skip`: Boolean disabling query fetching +- `clienId`: Used to resolve the Apollo Client used (defined in ApolloProvider) +- `tag`: String HTML tag name (default: `div`) + +Scoped slot props: +- `result`: Apollo Query result + - `result.data`: Data returned by the query + - `result.loading`: Boolean indicating that a request is in flight + - `result.error`: Eventual error for the current result + - `result.networkStatus`: See [apollo networkStatus](https://www.apollographql.com/docs/react/basics/queries.html#graphql-query-data-networkStatus) +- `query`: Smart Query associated with the component + +(WIP) You can subscribe to more data with the `ApolloSubscribeToMore` (or `apollo-subscribe-to-more`) component: + +```html + + + +``` + +*You can put as many of those as you want inside a `` component.* + ## Server-Side Rendering ### Prefetch components @@ -1480,7 +1565,7 @@ function createApp (context) { el: '#app', router, store, - apolloProvider, + provide: apolloProvider.provide(), ...App, }), router, @@ -1520,89 +1605,6 @@ router.onReady(() => { }) ``` -## Query components - -(WIP) You can use the `ApolloQuery` (or `apollo-query`) component to make watched Apollo queries directly in your template: - -```html - - - -``` - -Props: - -- `query`: GraphQL query (transformed by `graphql-tag`) -- `variables`: Object of GraphQL variables -- `fetchPolicy`: See [apollo fetchPolicy](https://www.apollographql.com/docs/react/basics/queries.html#graphql-config-options-fetchPolicy) -- `pollInterval`: See [apollo pollInterval](https://www.apollographql.com/docs/react/basics/queries.html#graphql-config-options-pollInterval) -- `notifyOnNetworkStatusChange`: See [apollo notifyOnNetworkStatusChange](https://www.apollographql.com/docs/react/basics/queries.html#graphql-config-options-notifyOnNetworkStatusChange) -- `context`: See [apollo context](https://www.apollographql.com/docs/react/basics/queries.html#graphql-config-options-context) -- `skip`: Boolean disabling query fetching -- `clienId`: Used to resolve the Apollo Client used (defined in ApolloProvider) -- `tag`: String HTML tag name (default: `div`) - -Scoped slot props: -- `result`: Apollo Query result - - `result.data`: Data returned by the query - - `result.loading`: Boolean indicating that a request is in flight - - `result.error`: Eventual error for the current result - - `result.networkStatus`: See [apollo networkStatus](https://www.apollographql.com/docs/react/basics/queries.html#graphql-query-data-networkStatus) -- `query`: Smart Query associated with the component - -(WIP) You can subscribe to mode data with the `ApolloSubscribeToMore` (or `apollo-subscribe-to-more`) component: - -```html - - - -``` - -*You can put as many of those as you want inside a `` component.* - --- # Migration