{"componentChunkName":"component---src-components-tutorial-layout-js","path":"/tutorial/examples/","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":"613dc8aa-3535-516a-82ba-c848e776b8e2","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\": \"examples\",\n  \"title\": \"Examples\",\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(\"h2\", null, \"Request on Load\"), mdx(\"p\", null, \"The most common use case for Enty is to request data for a view whenever it loads.\\nBelow we import a component called \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"UserItemStructure\"), \" that needs user data.\\nWe can use a compose function to apply the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"UserItemRequest\"), \" hoc.\\nAuto is set to respond to updates from \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"props.id\"), \".\\nPayload creator will take \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"props.id\"), \" and pass it to the API.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {}), \"// UserItemView.js\\nimport UserItemStructure from '../structure/UserItemStructure';\\nimport {UserItemRequest} from './EntityApi';\\n\\nexport default composeWith(\\n    UserItemRequest({\\n        auto: ['id'],\\n        payloadCreator: (props) => ({id: props.id})\\n    }),\\n    UserItemStructure\\n);\\n\")), mdx(\"h2\", null, \"Callbacks\"), mdx(\"p\", null, \"Some times a view will require a request to respond user interaction. In this case we can not set\\nthe auto config and pass our message's \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onRequest\"), \" function to a handler.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {}), \"function Form(props) {\\n    const {formMessage} = this.props;\\n    const {formState} = this.props;\\n    return <div>\\n        ...The rest of the form...\\n        <button onClick={() => saveMessage.onRequest(formState)}>Save</button>\\n    </div>;\\n}\\n\\nconst FormView = composeWith(\\n    FormSaveRequest({\\n        name: 'formMessage'\\n    }),\\n    Form\\n);\\n\\n\")), mdx(\"h2\", null, \"Loading Hoc\"), mdx(\"p\", null, \"Having a standard data structure for the request state makes it super easy to abstract away what\\nyour application should render while it is fetching data. A simple hoc can make sure your components\\nonly render once the request has returned with data.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"// LoadingHoc.jsx\\nexport default (config) => (Component) => (props) => {\\n    const message = this.props[config.message];\\n    return message\\n        .fetchingMap(() => <Spinner />)\\n        .refetchingMap(() => <Spinner />)\\n        .errorMap(() => <ErrorHandler error={message.requestError}/>)\\n        .successMap(() => <Component {...props} />)\\n        .value();\\n}\\n\")), mdx(\"p\", null, \"You can even get more complicated and accept a list of messages to check against\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {}), \"// LoadingHoc.jsx\\nexport default (config) => (Component) => (props) => {\\n    return [].concat(config.message) // cast strings to an array\\n        .reduce((previous, next) => {\\n            // Select our messages\\n            const previousMessage = this.props[previous];\\n            const nextMessage = this.props[next];\\n            return previousMessage.requestState\\n                // Apply the error\\n                .errorMap(() => <ErrorHandler error={previousMessage.requestError}/>)\\n                // Flatten the next message onto our chain\\n                .successFlatMap(() => nextMessage))\\n        .fetchingMap(() => <Spinner />)\\n        .refetchingMap(() => <Spinner />)\\n        .successMap(() => <Component {...props} />)\\n        .value();\\n}\\n\")), mdx(\"h2\", null, \"Parallel Requests\"), mdx(\"p\", null, \"Automatic request hocs are by their nature parallel. All we need to do is stack up a few request\\nhocs and then use some helper functions to calculate our request state\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"const UserAndPetView = composeWith(\\n    UserRequest({\\n        name: 'userMessage',\\n        auto: ['userId']\\n    }),\\n    PetRequest({\\n        name: 'petMessage',\\n        auto: ['petId']\\n    }),\\n    LoadingHoc({\\n        message: ['userMessage', 'petMessage'],\\n    })\\n    UserAndPetStructure\\n);\\n\")), mdx(\"h2\", null, \"Sequential Requests\"), mdx(\"h2\", null, \"Caching\"), mdx(\"h2\", null, \"Streaming Requests\"), mdx(\"h2\", null, \"Take Last Request\"), mdx(\"h2\", null, \"Hoc Chaining\"), mdx(\"h2\", null, \"Composite Entities\"), mdx(\"h2\", null, \"Normalizing To Filter\"));\n}\n;\nMDXContent.isMDXComponent = true;","fields":{"slug":"tutorial/examples/"},"headings":[{"depth":2,"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"}],"frontmatter":{"title":"Examples"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"613dc8aa-3535-516a-82ba-c848e776b8e2"}}}