Merge pull request #4619 from sielay/missing-mapping-doc

Missing example of using mapping by ids
gatsbyjs · Mar 21, 2018 · 3a196b5 · 3a196b5
2 parents ae3624b + 138b0b9
commit 3a196b5
Showing 1 changed file with 85 additions and 0 deletions.
diff --git a/docs/docs/gatsby-config.md b/docs/docs/gatsby-config.md
@@ -139,6 +139,91 @@ query BlogPost($slug: String!) {
 }
 ```
 
+Mapping can also be used to map an array of ids to any other collection of data. For example, if you have two JSON files
+`experience.json` and `tech.json` as follows:
+
+```javascript
+// experience.json
+[
+    {
+        "id": "companyA",
+        "company": "Company A",
+        "position": "Unicorn Developer",
+        "from": "Dec 2016",
+        "to": "Present",
+        "items": [
+            {
+                "label": "Responsibility",
+                "description": "Being an unicorn"
+            },
+            {
+                "label": "Hands on",
+                "tech": [
+                    "REACT",
+                    "NODE"
+                ]
+            }
+        ]
+    },
+]
+```
+
+```javascript
+// tech.json
+[
+    {
+        "id": "REACT",
+        "icon": "facebook",
+        "color": "teal",
+        "label": "React"
+    },
+    {
+        "id": "NODE",
+        "icon": "server",
+        "color": "green",
+        "label": "NodeJS"
+    }
+]
+```
+
+And then add the following rule to your `gatsby-config.js`:
+
+```javascript
+module.exports = {
+  plugins: [...],
+  mapping: {
+    'ExperienceJson.items.tech': `TechJson`
+  },
+}
+```
+
+You can query the `tech` object via the referred ids in `experience`:
+
+```graphql
+query CV {
+  experience: allExperienceJson {
+      edges {
+          node {
+              company
+              position
+              from
+              to
+              items {
+                  label
+                  description
+                  link
+                  tech {
+                      label
+                      color
+                      icon
+                  }
+              }
+          }
+      }
+  }
+}
+```
+
 ## Proxy
 
 Setting the proxy config option will tell the development server to proxy any unknown requests to your specified server. For example: