fix(form): improve initial loading performance

addon/components/cf-content.js

@@ -5,7 +5,27 @@ import { computed } from "@ember/object";
 import { reads } from "@ember/object/computed";
 import { ComponentQueryManager } from "ember-apollo-client";
 import { task } from "ember-concurrency";
-import getNavigationQuery from "ember-caluma/gql/queries/get-navigation";
+
+import getNavigationDocumentsQuery from "ember-caluma/gql/queries/get-navigation-documents";
+import getNavigationFormsQuery from "ember-caluma/gql/queries/get-navigation-forms";
+
+const buildTree = (rootDocument, documents, forms) => {
+  if (rootDocument.__typename === "Document") {
+    rootDocument.form = forms.find(f => f.slug === rootDocument.form.slug);
+  }
+
+  rootDocument.answers.edges.forEach(answer => {
+    if (answer.node.__typename === "FormAnswer") {
+      answer.node.formValue = buildTree(
+        documents.find(d => d.form.slug === answer.node.question.slug),
+        documents,
+        forms
+      );
+    }
+  });
+
+  return rootDocument;
+};
 
 /**
  * Component to render a form with navigation.
@@ -78,17 +98,35 @@ export default Component.extend(ComponentQueryManager, {
   }),
 
   dataTask: task(function*() {
-    if (!this.documentId) return null;
+    const rootId = window.btoa("Document:" + this.documentId);
 
-    return yield this.apollo.watchQuery(
+    const documents = (yield this.apollo.query(
       {
-        query: getNavigationQuery,
-        variables: { id: window.btoa("Document:" + this.documentId) },
+        query: getNavigationDocumentsQuery,
+        variables: { rootDocument: rootId },
         fetchPolicy: "network-only",
         context: { headers: this.get("context.headers") }
       },
-      "node"
-    );
+      "allDocuments.edges"
+    )).map(({ node }) => node);
+
+    const forms = (yield this.apollo.query(
+      {
+        query: getNavigationFormsQuery,
+        variables: {
+          slugs: documents.map(d => d.form.slug).sort()
+        },
+        fetchPolicy: "cache-first",
+        context: { headers: this.get("context.headers") }
+      },
+      "allForms.edges"
+    )).map(({ node }) => node);
+
+    const rootDocument = documents.find(d => d.id === rootId);
+
+    const tree = buildTree(rootDocument, documents, forms);
+
+    return tree;
   }),
 
   rootDocument: computed("data.lastSuccessful.value", function() {

addon/gql/queries/get-navigation-documents.graphql

@@ -0,0 +1,21 @@
+#import 'ember-caluma/gql/fragments/field-answer'
+
+query($rootDocument: ID!) {
+  allDocuments(rootDocument: $rootDocument) {
+    edges {
+      node {
+        id
+        answers {
+          edges {
+            node {
+              ...FieldAnswer
+            }
+          }
+        }
+        form {
+          slug
+        }
+      }
+    }
+  }
+}

addon/gql/queries/get-navigation-forms.graphql

@@ -0,0 +1,19 @@
+#import 'ember-caluma/gql/fragments/field-question'
+
+query($slugs: [String]!) {
+  allForms(slugs: $slugs) {
+    edges {
+      node {
+        name
+        slug
+        questions {
+          edges {
+            node {
+              ...FieldQuestion
+            }
+          }
+        }
+      }
+    }
+  }
+}