{"componentChunkName":"component---src-components-tutorial-layout-js","path":"/tutorial/schemas/","webpackCompilationHash":"","result":{"data":{"allFile":{"group":[{"fieldValue":"Resources","nodes":[{"childMdx":{"fields":{"slug":"tutorial/entity-flow/"},"frontmatter":{"title":"Entity Flow"},"headings":[]}},{"childMdx":{"fields":{"slug":"tutorial/faq/"},"frontmatter":{"title":"FAQ"},"headings":[{"value":"How do I handle endpoints that return arrays?","depth":3}]}}]},{"fieldValue":"Tutorials","nodes":[{"childMdx":{"fields":{"slug":"tutorial/api/"},"frontmatter":{"title":"Entity Api"},"headings":[{"value":"Declaring an API","depth":2},{"value":"Sharing","depth":2},{"value":"Non prescriptive","depth":2},{"value":"Api shimming","depth":2}]}},{"childMdx":{"fields":{"slug":"tutorial/examples/"},"frontmatter":{"title":"Examples"},"headings":[{"value":"Request on Load","depth":2},{"value":"Callbacks","depth":2},{"value":"Loading Hoc","depth":2},{"value":"Parallel Requests","depth":2},{"value":"Sequential Requests","depth":2},{"value":"Caching","depth":2},{"value":"Streaming Requests","depth":2},{"value":"Take Last Request","depth":2},{"value":"Hoc Chaining","depth":2},{"value":"Composite Entities","depth":2},{"value":"Normalizing To Filter","depth":2}]}},{"childMdx":{"fields":{"slug":"tutorial/getting-started/"},"frontmatter":{"title":"Getting Started"},"headings":[{"value":"Installation","depth":2},{"value":"Setup","depth":2},{"value":"1. Schema","depth":3},{"value":"2. API","depth":3},{"value":"3. Connect to react","depth":3},{"value":"4. Make a Request","depth":3}]}},{"childMdx":{"fields":{"slug":"tutorial/introduction/"},"frontmatter":{"title":"Introduction"},"headings":[{"value":"Purpose","depth":2}]}},{"childMdx":{"fields":{"slug":"tutorial/schemas/"},"frontmatter":{"title":"Schemas"},"headings":[{"value":"Structure","depth":2},{"value":"Relationships","depth":3},{"value":"Constructing","depth":3},{"value":"Merging","depth":3},{"value":"Entities","depth":2},{"value":"Changing the idAttribute","depth":3},{"value":"Why does an entity require a structure?","depth":3}]}}]}]},"mdx":{"id":"0d85b26c-343c-5dfa-9da2-3aee4402f2cc","body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"id\": \"schemas\",\n  \"title\": \"Schemas\",\n  \"group\": \"Tutorials\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, \"This is an introductory description of what schemas are and how they work. For specific details of\\ntheir types and methods check the \", mdx(\"a\", _extends({\n    parentName: \"em\"\n  }, {\n    \"href\": \"/docs/schemas/entity-schema\"\n  }), \"Api\"), \".\")), mdx(\"p\", null, \"Schemas are a way to describe to Enty the shape of your api responses and the\\nrelationships between your data. With this information Enty is able to normalize any response so that\\neach entity is only ever stored in memory once. This means that when ever your refer to one of your\\nentities you can be confident that it is up to date. \"), mdx(\"p\", null, \"There are two main types of schema: structural schemas and entity schemas.\"), mdx(\"h2\", null, \"Structure\"), mdx(\"p\", null, \"Structural schemas describe the shape of your responses and let Enty traverse your data looking for entities.\\nThey also provide hooks to let you construct and merge data shapes.\"), mdx(\"p\", null, \"Examples: \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/api/enty/object-schema\"\n  }), \"ObjectSchema\"), \", \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/api/enty/array-schema\"\n  }), \"ArraySchema\"), \".\"), mdx(\"h3\", null, \"Relationships\"), mdx(\"p\", null, \"Take the following naive data structure. \"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"{\\n    peopleList: [\\n        {\\n            id: '3', \\n            name: 'steve',\\n            mother: {\\n                id: '1',\\n                name: 'sally'\\n            }\\n            father: {\\n                id: '2',\\n                name: 'john'\\n            }\\n        },\\n        {\\n            id: '4', \\n            name: 'susan',\\n            mother: {\\n                id: '1',\\n                name: 'sally'\\n            }\\n            father: {\\n                id: '2',\\n                name: 'john'\\n            }\\n        }\\n    ]\\n}\\n\\n\")), mdx(\"p\", null, \"From this we can assert that:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"userList is an array of people\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"people have a mother who is a person\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"people have a father who is a person\")), mdx(\"p\", null, \"So that enty can normalize the data correctly we need to define a person entity and show that they\\ncan exist both in an personList and as a mother or father\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"// define our person and personList\\nconst person = new EntitySchema('person');\\nconst personList = new ArraySchema(person);\\n\\n// lazily define the relationships between people and their parents\\nperson.shape = new ObjectSchema({\\n    mother: person,\\n    father: person\\n});\\n\\n// export a schema that matches the shape of our api\\nexport default new ObjectSchema({\\n    personList\\n});\\n\")), mdx(\"h3\", null, \"Constructing\"), mdx(\"p\", null, \"Often data is represented through models or records. Making sure to correctly construct and manage\\nthese models is a pain in the front-end. Because enty uses the visitor pattern it is easy for\\nyou to define a single consructor for each structural schema and let enty do the constructing for you. \"), mdx(\"p\", null, \"This lets you define your models but never worry about constructing them. As new data comes in it\\nis automatically constructed for you.\"), mdx(\"p\", null, \"We can extend the previous example by adding a shape to our people structural schema.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"person.shape = new ObjectSchema(\\n    {\\n        mother: person, \\n        father: person\\n    },\\n    {create: data => new Person(data)}\\n));\\n\\n\")), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, \"NOTE: shapes are defined on structure schemas not their entities. This is because the entity\\nschema is really just a reference to an id in state. Because an entity could be of any\\nshape entity schemas must have a structural shape assigned to it so that enty knows how to\\ncorrectly contruct or merge it.\")), mdx(\"h3\", null, \"Merging\"), mdx(\"p\", null, \"Because an entity could be of any shape, when Enty is finds an entity that already exists in state\\nit simply calls the merge function on its shape. This lets enty be smart about how to merge things.\\nAn object schema performs a shallow merge, while the array schema just replaces the old with the new.\"), mdx(\"h2\", null, \"Entities\"), mdx(\"p\", null, \"Entity schemas describe to enty where a unique entity can be found in your data shape.\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"entities must have a unique name.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"entities must have a unique id.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"entities must have some sort of shape.\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"const user = new EntitySchema('user');\\nconst friendList = new ArraySchema(user);\\nuser.shape = new ObjectSchema({\\n    friendList\\n});\\n\")), mdx(\"p\", null, \"In this example we have first defined a user as a type of entity, giving it the unique name of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"user\"), \".\\nNext we define a friendList that is made up of users.\\nNext we define the shape of our friend as an object.\\nFinally we declare the relationship that users can have friendList's that are arrays of users.\"), mdx(\"p\", null, \"TODO: FriendList normalizing example.\"), mdx(\"h3\", null, \"Changing the idAttribute\"), mdx(\"p\", null, \"By default the EntitySchema looks to the user.id property to uniquely identify each user.\\nThis can be configured to match your own data structure.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"const user = new EntitySchema('user', {\\n    idAttribute: user => user.email\\n});\\n\")), mdx(\"h3\", null, \"Why does an entity require a structure?\"), mdx(\"p\", null, \"Entities are really nothing more than a category and an id; they are closer to a variable than a real data structure. Because of this they need some other information to describe their shape. Enty chooses to use structural schemas to describe this information as it lets you construct entities of any shape. You can use the common Object schema define models. Or the ArraySchema to create list of notifications bound to the viewer of the app. You can even define your own schema that has unique logic for normalizing and denormalizing. \"));\n}\n;\nMDXContent.isMDXComponent = true;","fields":{"slug":"tutorial/schemas/"},"headings":[{"depth":2,"value":"Structure"},{"depth":3,"value":"Relationships"},{"depth":3,"value":"Constructing"},{"depth":3,"value":"Merging"},{"depth":2,"value":"Entities"},{"depth":3,"value":"Changing the idAttribute"},{"depth":3,"value":"Why does an entity require a structure?"}],"frontmatter":{"title":"Schemas"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"0d85b26c-343c-5dfa-9da2-3aee4402f2cc"}}}