Gao Yingjian
f62d4fbc8d
* docs: sync Chinese doc to 3.0.0-rc.1 * docs: sync Chinese doc to 3.0.0-rc.2
70 lines
3.3 KiB
Markdown
70 lines
3.3 KiB
Markdown
# ApolloQuery component
|
|
|
|
Example:
|
|
|
|
```vue
|
|
<ApolloQuery
|
|
:query="gql => gql`
|
|
query MyHelloQuery ($name: String!) {
|
|
hello (name: $name)
|
|
}
|
|
`"
|
|
:variables="{ name }"
|
|
>
|
|
<template v-slot="{ result: { error, data }, isLoading }">
|
|
<!-- Loading -->
|
|
<div v-if="isLoading" class="loading apollo">Loading...</div>
|
|
|
|
<!-- Error -->
|
|
<div v-else-if="error" class="error apollo">An error occurred</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>
|
|
```
|
|
|
|
::: warning
|
|
To enable support of `gql` string tag in Vue templates, see the necessary setup in [the guide](../guide/components/query.md#tag-setup).
|
|
:::
|
|
|
|
## Props
|
|
|
|
- `query`: GraphQL query (transformed by `graphql-tag`) or a function that receives the `gql` tag as argument and should return the transformed query
|
|
- `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)
|
|
- `update`: Function to transform the result `data`, useful for picking a specific part of the response. Example: `:update="data => data.user.messages"`
|
|
- `skip`: Boolean disabling query fetching
|
|
- `clientId`: id of the Apollo Client used by the query (defined in ApolloProvider `clients` option)
|
|
- `deep`: Boolean to use deep Vue watchers
|
|
- `tag`: String HTML tag name (default: `div`); if falsy (for example `null` or `undefined`), the component will be renderless (the content won't be wrapped in a tag), in this case, only the first child will be rendered
|
|
- `debounce`: Number of milliseconds for debouncing refetches (for example when the variables are changed)
|
|
- `throttle`: Number of milliseconds for throttling refetches (for example when the variables are changed)
|
|
- `prefetch`: If `false`, will skip prefetching during SSR
|
|
- `options`: Other Apollo Watch Query options
|
|
|
|
## Scoped slot
|
|
|
|
- `result`: Apollo Query result
|
|
- `result.data`: Data returned by the query (can be transformed by the `update` prop)
|
|
- `result.fullData`: Raw data returned by the query (not transformed by the `update` prop)
|
|
- `result.loading`: Boolean indicating that a request is in flight (you may need to set `notifyOnNetworkStatusChange` prop for it to change)
|
|
- `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. It's useful to do some operations like `query.refetch()` or `query.fetchMore()`.
|
|
- `isLoading`: Smart Query loading state
|
|
- `gqlError`: first GraphQL error if any
|
|
- `times`: number of times the result was updated
|
|
|
|
## Events
|
|
|
|
- `result(resultObject)`
|
|
- `error(errorObject)`
|
|
- `loading(boolean)`
|