Commit aa08fdf0 authored by Simon Knox's avatar Simon Knox Committed by Kushal Pandya

Add docs for manual apollo queries

For those times when you don't want to auto-fetcn on mount
parent 135011c4
...@@ -35,9 +35,9 @@ of the client doing compilation of queries. ...@@ -35,9 +35,9 @@ of the client doing compilation of queries.
To distinguish queries from mutations and fragments, the following naming convention is recommended: To distinguish queries from mutations and fragments, the following naming convention is recommended:
- `allUsers.query.graphql` for queries; - `all_users.query.graphql` for queries;
- `addUser.mutation.graphql` for mutations; - `add_user.mutation.graphql` for mutations;
- `basicUser.fragment.graphql` for fragments. - `basic_user.fragment.graphql` for fragments.
### Fragments ### Fragments
...@@ -56,8 +56,8 @@ fragment DesignListItem on Design { ...@@ -56,8 +56,8 @@ fragment DesignListItem on Design {
Fragments can be stored in separate files, imported and used in queries, mutations, or other fragments. Fragments can be stored in separate files, imported and used in queries, mutations, or other fragments.
```javascript ```javascript
#import "./designList.fragment.graphql" #import "./design_list.fragment.graphql"
#import "./diffRefs.fragment.graphql" #import "./diff_refs.fragment.graphql"
fragment DesignItem on Design { fragment DesignItem on Design {
...DesignListItem ...DesignListItem
...@@ -258,6 +258,42 @@ export default { ...@@ -258,6 +258,42 @@ export default {
}; };
``` ```
### Manually triggering queries
Queries on a component's `apollo` property are made automatically when the component is created.
Some components instead want the network request made on-demand, for example a dropdown with lazy-loaded items.
There are two ways to do this:
1. Use the `skip` property
```javascript
export default {
apollo: {
user: {
query: QUERY_IMPORT,
skip() {
// only make the query when dropdown is open
return !this.isOpen;
},
}
},
};
```
1. Using `addSmartQuery`
You can manually create the Smart Query in your method.
```javascript
handleClick() {
this.$apollo.addSmartQuery('user', {
// this takes the same values as you'd have in the `apollo` section
query: QUERY_IMPORT,
}),
};
```
### Working with pagination ### Working with pagination
GitLab's GraphQL API uses [Relay-style cursor pagination](https://www.apollographql.com/docs/react/data/pagination/#cursor-based) GitLab's GraphQL API uses [Relay-style cursor pagination](https://www.apollographql.com/docs/react/data/pagination/#cursor-based)
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment