1"use strict";(self.webpackChunkgridmix_website=self.webpackChunkgridmix_website||[]).push([[9418],{41751(j,v,n){n.r(v),n.d(v,{default:()=>w});var d=function(){var t=this,e=t._self._c;return e("VueRemarkRoot",[e("h1",{attrs:{id:"data-store-api"}},[e("a",{attrs:{href:"#data-store-api","aria-hidden":"true"}},[t._v("#")]),t._v("Data Store API")]),e("p",[t._v("The Data Store API lets you insert your own data into the GraphQL data layer. You will then be able to access it through GraphQL in your components. "),e("strong",[t._v("Use this API if you want to build a custom data source connection or a plugin.")])]),e("p",[t._v("Start by using the "),e("code",{pre:!0},[t._v("api.loadSource()")]),t._v(" hook in "),e("code",{pre:!0},[t._v("gridmix.server.js")]),t._v(":")]),e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",{pre:!0,attrs:{class:"language-js"}},[t._v("module"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token method-variable function-variable method function property-access"}},[t._v("exports")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("api")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(` 2 api`),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token method function property-access"}},[t._v("loadSource")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("actions")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token arrow operator"}},[t._v("=>")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(` 3 `),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Use Data Store API here")]),t._v(` 4 `),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(` 5`),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])])]),e("h2",{attrs:{id:"add-a-collection"}},[e("a",{attrs:{href:"#add-a-collection","aria-hidden":"true"}},[t._v("#")]),t._v("Add a collection")]),e("h3",{attrs:{id:"actionsaddcollectionoptions"}},[e("a",{attrs:{href:"#actionsaddcollectionoptions","aria-hidden":"true"}},[t._v("#")]),t._v("actions.addCollection(options)")]),e("ul",[e("li",[t._v("options "),e("code",{pre:!0},[t._v("object | string")]),t._v(" "),e("em",[t._v("Options or just a GraphQL schema type name.")]),e("ul",[e("li",[t._v("typeName "),e("code",{pre:!0},[t._v("string")]),t._v(" "),e("em",[t._v("Required GraphQL schema type and template name.")])])])])]),e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",{pre:!0,attrs:{class:"language-js"}},[t._v("api"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token method function property-access"}},[t._v("loadSource")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("actions")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token arrow operator"}},[t._v("=>")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(` 6 actions`),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token method function property-access"}},[t._v("addCollection")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'BlogPost'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(` 7`),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])])]),e("h3",{attrs:{id:"actionsgetcollectiontypename"}},[e("a",{attrs:{href:"#actionsgetcollectiontypename","aria-hidden":"true"}},[t._v("#")]),t._v("actions.getCollection(typeName)")]),e("ul",[e("li",[t._v("typeName "),e("code",{pre:!0},[t._v("string")]),t._v(" "),e("em",[t._v("The GraphQL schema type name.")])])]),e("p",[t._v("Get a collection previously created.")]),e("h2",{attrs:{id:"add-nodes-to-collections"}},[e("a",{attrs:{href:"#add-nodes-to-collections","aria-hidden":"true"}},[t._v("#")]),t._v("Add nodes to collections")]),e("h3",{attrs:{id:"c
7ollectionaddnodeoptions"}},[e("a",{attrs:{href:"#collectionaddnodeoptions","aria-hidden":"true"}},[t._v("#")]),t._v("collection.addNode(options)")]),e("ul",[e("li",[t._v("options "),e("code",{pre:!0},[t._v("Object")]),t._v(" "),e("em",[t._v("Required.")]),e("ul",[e("li",[t._v("id "),e("code",{pre:!0},[t._v("string")]),t._v(" "),e("em",[t._v("A unique id for this collection.")])]),e("li",[t._v("...fields "),e("code",{pre:!0},[t._v("object")]),t._v(" "),e("em",[t._v("Custom fields.")])])])])]),e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",{pre:!0,attrs:{class:"language-js"}},[t._v("api"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token method function property-access"}},[t._v("loadSource")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("actions")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token arrow operator"}},[t._v("=>")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(` 8 `),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" posts "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" actions"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token method function property-access"}},[t._v("addCollection")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(` 9 `),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("typeName")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'BlogPost'")]),t._v(` 10 `),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(` 11 12 posts`),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token method function property-access"}},[t._v("addNode")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(` 13 `),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("title")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'My first blog post'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(` 14 `),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("date")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'2018-11-02'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(` 15 `),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("customField")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'My value'")]),t._v(` 16 `),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(` 17`),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])])]),e("h2",{attrs:{id:"referencing-other-nodes"}},[e("a",{attrs:{href:"#referencing-other-nodes","aria-hidden":"true"}},[t._v("#")]),t._v("Referencing other nodes")]),e("h3",{attrs:{id:"actionsstorecreatereferencetypename-id"}},[e("a",{attrs:{href:"#actionsstorecreatereferencetypename-id","aria-hidden":"true"}},[t._v("#")]),t._v("actions.store.createReference(typeName, id)")]),e("ul",[e("li",[t._v("typeName "),e("code",{pre:!0},[t._v("string | object")]),t._v(" "),e("em",[t._v("The node typeName to reference or the node instance.")])]),e("li",[t._v("id "),e("code",{pre:!0},[t._v("string | array")]),t._v(" "),e("em",[t._v("The node id to reference (or ids if multiple nodes).")])])]),e("p",[t._v("A helper function for creating references to other nodes when the schema types are inferred.")]),e("p",[t._v("This example creates two collections: "),e("code",{pre:!0},[t._v("Author")]),t._v(" and "),e("code",{pre:!0},[t._v("Post")]),t._v(". The "),e("code",{pre:!0},[t._v("author1")]),t._v(" and "),e("code",{pre:!0},[t._v("author2")]),t._v(" fields on "),e("code",{pre:!0},[t._v("Post")]),t._v(" will both have a reference to the same author.")]),e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",{pre:!0,attrs:{class:"language-js"}},[t._v("api"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token method function property-access"}},[t._v("loadSource")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" addCollection"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" store "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}
17")])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token arrow operator"}},[t._v("=>")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(` 18 `),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" authors "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("addCollection")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Author'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(` 19 `),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" posts "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("addCollection")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Post'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(` 20 21 `),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" author "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" authors"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token method function property-access"}},[t._v("addNode")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(` 22 `),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'1'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(` 23 `),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("title")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'The author'")]),t._v(` 24 `),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(` 25 26 posts`),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token method function property-access"}},[t._v("addNode")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(` 27 `),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("title")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'The post'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(` 28 `),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("author1")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" store"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token method function property-access"}},[t._v("createReference")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Author'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'1'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(` 29 `),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("author2")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" store"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token method function property-access"}},[t._v("createReference")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("author"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(` 30 `),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}
30")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(` 31`),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])])]),e("p",[t._v("The field will contain the referenced node fields in the GraphQL schema:")]),e("pre",{pre:!0,attrs:{class:"language-graphql"}},[e("code",{pre:!0,attrs:{class:"language-graphql"}},[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("query")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$id")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token scalar"}},[t._v("ID")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(` 32 `),e("span",{pre:!0,attrs:{class:"token property-query"}},[t._v("blogPost")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$id")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(` 33 `),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("title")]),t._v(` 34 `),e("span",{pre:!0,attrs:{class:"token object"}},[t._v("author1")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(` 35 `),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("id")]),t._v(` 36 `),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("title")]),t._v(` 37 `),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(` 38 `),e("span",{pre:!0,attrs:{class:"token object"}},[t._v("author2")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(` 39 `),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("id")]),t._v(` 40 `),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("title")]),t._v(` 41 `),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(` 42 `),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(` 43`),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])])]),e("h3",{attrs:{id:"collectionaddreferencefieldname-typename"}},[e("a",{attrs:{href:"#collectionaddreferencefieldname-typename","aria-hidden":"true"}},[t._v("#")]),t._v("collection.addReference(fieldName, typeName)")]),e("ul",[e("li",[t._v("fieldName "),e("code",{pre:!0},[t._v("string")]),t._v(" "),e("em",[t._v("The field name.")])]),e("li",[t._v("typeName "),e("code",{pre:!0},[t._v("string")]),t._v(" "),e("em",[t._v("GraphQL schema type to reference.")])])]),e("p",[t._v("Make a root field for all nodes in collection referencing to another node.")]),e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",{pre:!0,attrs:{class:"language-js"}},[t._v("api"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token method function property-access"}},[t._v("loadSource")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("actions")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token arrow operator"}},[t._v("=>")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(` 44 `),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" posts "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" actions"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token method function property-access"}},[t._v("addCollection")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Post'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(` 45 46 posts`),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token method function property-access"}},[t._v("addReference")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'author'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Author'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(` 47 48 posts`),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token method function property-access"}},[t._v("addNode")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(` 49 `),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("title")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'The post'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(` 50 `),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("author")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'1'")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Will become a reference to an author with id '1'")]),t._v(` 51 `),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}
51")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(` 52`),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])])]),e("h2",{attrs:{id:"example-usage"}},[e("a",{attrs:{href:"#example-usage","aria-hidden":"true"}},[t._v("#")]),t._v("Example usage")]),e("h3",{attrs:{id:"basic"}},[e("a",{attrs:{href:"#basic","aria-hidden":"true"}},[t._v("#")]),t._v("Basic")]),e("p",[t._v("This example creates a "),e("code",{pre:!0},[t._v("MyData")]),t._v(" collection and just adds a single node to it.")]),e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",{pre:!0,attrs:{class:"language-js"}},[t._v("api"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token method function property-access"}},[t._v("loadSource")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("actions")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token arrow operator"}},[t._v("=>")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(` 53 `),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" collection "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" actions"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token method function property-access"}},[t._v("addCollection")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'MyData'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(` 54 55 collection`),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token method function property-access"}},[t._v("addNode")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(` 56 `),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("title")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Lorem ipsum dolor sit amet.'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(` 57 `),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("customField")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'...'")]),t._v(` 58 `),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(` 59`),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])])]),e("p",[t._v("You will then be able to query that data in the "),e("code",{pre:!0},[t._v("page-query")]),t._v(" and "),e("code",{pre:!0},[t._v("static-query")]),t._v(" tags in your Vue components with a query like this:")]),e("pre",{pre:!0,attrs:{class:"language-graphql"}},[e("code",{pre:!0,attrs:{class:"language-graphql"}},[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("query")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(` 60 `),e("span",{pre:!0,attrs:{class:"token object"}},[t._v("allMyData")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(` 61 `),e("span",{pre:!0,attrs:{class:"token object"}},[t._v("edges")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(` 62 `),e("span",{pre:!0,attrs:{class:"token object"}},[t._v("node")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(` 63 `),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("title")]),t._v(` 64 `),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("customField")]),t._v(` 65 `),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(` 66 `),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(` 67 `),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}
67")]),t._v(` 68`),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])])]),e("h3",{attrs:{id:"fetching-external-data"}},[e("a",{attrs:{href:"#fetching-external-data","aria-hidden":"true"}},[t._v("#")]),t._v("Fetching external data")]),e("p",[t._v("You can also fetch external data and add it to the store.")]),e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",{pre:!0,attrs:{class:"language-js"}},[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" axios "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'axios'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(` 69 70module`),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token method-variable function-variable method function property-access"}},[t._v("exports")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("api")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(` 71 api`),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token method function property-access"}},[t._v("loadSource")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("actions")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token arrow operator"}},[t._v("=>")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(` 72 `),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" data "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword control-flow"}},[t._v("await")]),t._v(" axios"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token method function property-access"}},[t._v("get")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'https://api.example.com/posts'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(` 73 74 `),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" collection "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" actions"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token method function property-access"}},[t._v("addCollection")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Post'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(` 75 76 `),e("span",{pre:!0,attrs:{class:"token keyword control-flow"}},[t._v("for")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" item "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("of")]),t._v(" data"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(` 77 collection`),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token method function property-access"}},[t._v("addNode")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(` 78 `),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" item"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token property-access"}},[t._v("id")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(` 79 `),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("title")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" item"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token property-access"}},[t._v("title")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(` 80 `),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("slug")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" item"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token property-access"}},[t._v("slug")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(` 81 `),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("date")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" item"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token property-access"}},[t._v("date")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(` 82 `),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("content")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" item"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token property-access"}},[t._v("content")]),t._v(` 83 `),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}
83")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(` 84 `),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(` 85 `),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(` 86`),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])])]),e("h3",{attrs:{id:"preprocessing-markdown-frontmatter"}},[e("a",{attrs:{href:"#preprocessing-markdown-frontmatter","aria-hidden":"true"}},[t._v("#")]),t._v("Preprocessing Markdown Frontmatter")]),e("p",[t._v("When using plugins such as "),e("code",{pre:!0},[t._v("@gridmix/vue-remark")]),t._v(", the frontmatter is processed "),e("em",[t._v("before")]),t._v(" being passed to "),e("code",{pre:!0},[t._v("vue-remark")]),t._v(". Because of this, it is important to modify any frontmatter data through the Gridmix Server API (as shown above) before it is passed to the transformer.")])])},h=[],m=n(6385),y=n(76744),o=n(48649);n.dn(_);function u(r){return u=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(t){return typeof t}:function(t){return t&&typeof Symbol=="function"&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},u(r)}var x=o.default.config.optionMergeStrategies,s={VueRemarkRoot:y.A};function _(r){var t=r.options.components=r.options.components||{},e=r.options.computed=r.options.computed||{};Object.keys(s).forEach(function(a){u(s[a])==="object"&&typeof s[a].render=="function"||typeof s[a]=="function"&&typeof s[a].options.render=="function"?t[a]=s[a]:e[a]=function(){return s[a]}})}const l=_;var f=o.default.config.optionMergeStrategies,p="__vueRemarkFrontMatter",i={excerpt:null,title:"Data Store API"};function g(r){r.options[p]&&(r.options[p]=i),o.default.util.defineReactive(r.options,p,i),r.options.computed=f.computed({$frontmatter:function(){return r.options[p]}},r.options.computed)}const k=g;var b={},c=(0,m.A)(b,d,h,!1,null,null,null);typeof l=="function"&&l(c),typeof k=="function"&&k(c);const w=c.exports}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.