Merge branch 'fc-add-docs-on-skipping-queries' into 'master'

Add doc on skipping queries with async operations

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/164256



Merged-by: Natalia Tepluhina <ntepluhina@gitlab.com>
Approved-by: Natalia Tepluhina <ntepluhina@gitlab.com>
Reviewed-by: Natalia Tepluhina <ntepluhina@gitlab.com>
Reviewed-by: Frédéric Caplette <fcaplette@gitlab.com>
Co-authored-by: Frédéric Caplette <fcaplette@gitlab.com>

doc/development/fe_guide/graphql.md

@@ -204,6 +204,45 @@ query allReleases(...) {
 }
 ```
 
+## Skip query with async variables
+
+Whenever a query has one or more variable that requires another query to have executed before it can run, it is **vital** to add a `skip()` property to the query with all relations. 
+
+Failing to do so will result in the query executing twice: once with the default value (whatever was defined on the `data` property or `undefined`) and once more once the initial query is resolved, triggering a new variable value to be injected in the smart query and then refetched by Apollo.
+
+```javascript
+data() {
+  return {
+    // Define data properties for all apollo queries
+    project: null,
+    issues: null
+  }
+},
+apollo: {
+  project: {
+    query: getProject,
+    variables() {
+      return {
+        projectId: this.projectId
+      }
+    }
+  },
+  releaseName: {
+    query: getReleaseName,
+    // Without this skip, the query would run initially with `projectName: null`
+    // Then when `getProject` resolves, it will run again.
+    skip() {
+      return !this.project?.name
+    },
+    variables() {
+      return {
+        projectName: this.project?.name
+      }
+    }
+  }
+}
+```
+
 ## Immutability and cache updates
 
 From Apollo version 3.0.0 all the cache updates need to be immutable. It needs to be replaced entirely