Doc updates & fixes
This commit is contained in:
Guillaume Chau
@@ -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
|
||||
<ApolloQuery
|
||||
:query="require('../graphql/HelloWorld.gql')"
|
||||
:variables="{ name }"
|
||||
>
|
||||
<template slot-scope="{ result: { loading, error, data } }">
|
||||
<!-- Loading -->
|
||||
<div v-if="loading" class="loading apollo">Loading...</div>
|
||||
|
||||
<!-- Error -->
|
||||
<div v-else-if="error" class="error apollo">An error occured</div>
|
||||
|
||||
<!-- Result -->
|
||||
<div v-else-if="data" class="result apollo">{{ data.hello }}</div>
|
||||
|
||||
<!-- No result -->
|
||||
<div v-else class="no-result apollo">No result :(</div>
|
||||
</template>
|
||||
</ApolloQuery>
|
||||
```
|
||||
|
||||
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
|
||||
<template>
|
||||
<ApolloQuery :query="...">
|
||||
<ApolloSubscribeToMore
|
||||
:document="require('../gql/MessageAdded.gql')"
|
||||
:variables="{ channel }"
|
||||
:updateQuery="onMessageAdded"
|
||||
/>
|
||||
|
||||
<!-- ... -->
|
||||
</ApolloQuery>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
channel: 'general',
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onMessageAdded (previousResult, { subscriptionData }) {
|
||||
// The previous result is immutable
|
||||
const newResult = {
|
||||
messages: [...previousResult.messages],
|
||||
}
|
||||
// Add the question to the list
|
||||
newResult.messages.push(subscriptionData.data.messageAdded)
|
||||
return newResult
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
*You can put as many of those as you want inside a `<ApolloQuery>` 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
|
||||
<ApolloQuery
|
||||
:query="require('../graphql/HelloWorld.gql')"
|
||||
:variables="{ name }"
|
||||
>
|
||||
<template slot-scope="{ result: { loading, error, data } }">
|
||||
<!-- Loading -->
|
||||
<div v-if="loading" class="loading apollo">Loading...</div>
|
||||
|
||||
<!-- Error -->
|
||||
<div v-else-if="error" class="error apollo">An error occured</div>
|
||||
|
||||
<!-- Result -->
|
||||
<div v-else-if="data" class="result apollo">{{ data.hello }}</div>
|
||||
|
||||
<!-- No result -->
|
||||
<div v-else class="no-result apollo">No result :(</div>
|
||||
</template>
|
||||
</ApolloQuery>
|
||||
```
|
||||
|
||||
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
|
||||
<template>
|
||||
<ApolloQuery>
|
||||
<ApolloSubscribeToMore
|
||||
:document="require('../gql/MessageAdded.gql')"
|
||||
:variables="{ channel }"
|
||||
:updateQuery="onMessageAdded"
|
||||
/>
|
||||
</ApolloQuery>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
channel: 'general',
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onMessageAdded (previousResult, { subscriptionData }) {
|
||||
// The previous result is immutable
|
||||
const newResult = {
|
||||
messages: [...previousResult.messages],
|
||||
}
|
||||
// Add the question to the list
|
||||
newResult.messages.push(subscriptionData.data.messageAdded)
|
||||
return newResult
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
*You can put as many of those as you want inside a `<ApolloQuery>` component.*
|
||||
|
||||
---
|
||||
|
||||
# Migration
|
||||
|
||||
Reference in New Issue
Block a user