diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-01-16 12:08:32 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-01-16 12:08:32 +0000 |
commit | c158fa8d69c704663d289341a014c44c062cda88 (patch) | |
tree | d0cac82a9ac9e9ad28bb0030266eb8d5dc91fbbc /doc/development/fe_guide | |
parent | b806264d29b8d52ccb78a41dcc3d67f2b040700c (diff) | |
download | gitlab-ce-c158fa8d69c704663d289341a014c44c062cda88.tar.gz |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'doc/development/fe_guide')
-rw-r--r-- | doc/development/fe_guide/graphql.md | 35 |
1 files changed, 35 insertions, 0 deletions
diff --git a/doc/development/fe_guide/graphql.md b/doc/development/fe_guide/graphql.md index 36cde1b0f75..1639029d193 100644 --- a/doc/development/fe_guide/graphql.md +++ b/doc/development/fe_guide/graphql.md @@ -208,6 +208,41 @@ Now every single time on attempt to fetch a version, our client will fetch `id` Read more about local state management with Apollo in the [Vue Apollo documentation](https://vue-apollo.netlify.com/guide/local-state.html#local-state). +### Feature flags in queries + +Sometimes it may be useful to have an entity in the GraphQL query behind a feature flag. +For example, when working on a feature where the backend has already been merged but the frontend +hasn't you might want to put the GraphQL entity behind a feature flag to allow for smaller +merge requests to be created and merged. + +To do this we can use the `@include` directive to exclude an entity if the `if` statement passes. + +```graphql +query getAuthorData($authorNameEnabled: Boolean = false) { + username + name @include(if: $authorNameEnabled) +} +``` + +Then in the Vue (or JavaScript) call to the query we can pass in our feature flag. This feature +flag will need to be already setup correctly. See the [feature flag documentation](../feature_flags/development.md) +for the correct way to do this. + +```javascript +export default { + apollo: { + user: { + query: QUERY_IMPORT, + variables() { + return { + authorNameEnabled: gon?.features?.authorNameEnabled, + }; + }, + } + }, +}; +``` + ### Testing #### Mocking response as component data |