{"expireTime":9007200821600203000,"key":"gatsby-plugin-mdx-entire-payload-364341cefdc932eaf7d136a608950621-","val":{"mdast":{"type":"root","children":[{"type":"heading","depth":2,"children":[{"type":"text","value":"Request on Load","position":{"start":{"line":2,"column":4,"offset":4},"end":{"line":2,"column":19,"offset":19},"indent":[]}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":19,"offset":19},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"The most common use case for Enty is to request data for a view whenever it loads. \nBelow we import a component called ","position":{"start":{"line":3,"column":1,"offset":20},"end":{"line":4,"column":36,"offset":139},"indent":[1]}},{"type":"inlineCode","value":"UserItemStructure","position":{"start":{"line":4,"column":36,"offset":139},"end":{"line":4,"column":55,"offset":158},"indent":[]}},{"type":"text","value":" that needs user data.\nWe can use a compose function to apply the ","position":{"start":{"line":4,"column":55,"offset":158},"end":{"line":5,"column":44,"offset":224},"indent":[1]}},{"type":"inlineCode","value":"UserItemRequest","position":{"start":{"line":5,"column":44,"offset":224},"end":{"line":5,"column":61,"offset":241},"indent":[]}},{"type":"text","value":" hoc.\nAuto is set to respond to updates from ","position":{"start":{"line":5,"column":61,"offset":241},"end":{"line":6,"column":40,"offset":286},"indent":[1]}},{"type":"inlineCode","value":"props.id","position":{"start":{"line":6,"column":40,"offset":286},"end":{"line":6,"column":50,"offset":296},"indent":[]}},{"type":"text","value":".\nPayload creator will take ","position":{"start":{"line":6,"column":50,"offset":296},"end":{"line":7,"column":27,"offset":324},"indent":[1]}},{"type":"inlineCode","value":"props.id","position":{"start":{"line":7,"column":27,"offset":324},"end":{"line":7,"column":37,"offset":334},"indent":[]}},{"type":"text","value":" and pass it to the API.","position":{"start":{"line":7,"column":37,"offset":334},"end":{"line":7,"column":61,"offset":358},"indent":[]}}],"position":{"start":{"line":3,"column":1,"offset":20},"end":{"line":7,"column":61,"offset":358},"indent":[1,1,1,1]}},{"type":"code","lang":null,"meta":null,"value":"// 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);","position":{"start":{"line":9,"column":1,"offset":360},"end":{"line":21,"column":4,"offset":653},"indent":[1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":2,"children":[{"type":"text","value":"Callbacks","position":{"start":{"line":23,"column":4,"offset":658},"end":{"line":23,"column":13,"offset":667},"indent":[]}}],"position":{"start":{"line":23,"column":1,"offset":655},"end":{"line":23,"column":13,"offset":667},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"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 ","position":{"start":{"line":24,"column":1,"offset":668},"end":{"line":25,"column":40,"offset":805},"indent":[1]}},{"type":"inlineCode","value":"onRequest","position":{"start":{"line":25,"column":40,"offset":805},"end":{"line":25,"column":51,"offset":816},"indent":[]}},{"type":"text","value":" function to a handler.","position":{"start":{"line":25,"column":51,"offset":816},"end":{"line":25,"column":74,"offset":839},"indent":[]}}],"position":{"start":{"line":24,"column":1,"offset":668},"end":{"line":25,"column":74,"offset":839},"indent":[1]}},{"type":"code","lang":null,"meta":null,"value":"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","position":{"start":{"line":27,"column":1,"offset":841},"end":{"line":44,"column":4,"offset":1192},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":2,"children":[{"type":"text","value":"Loading Hoc","position":{"start":{"line":45,"column":4,"offset":1196},"end":{"line":45,"column":15,"offset":1207},"indent":[]}}],"position":{"start":{"line":45,"column":1,"offset":1193},"end":{"line":45,"column":15,"offset":1207},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"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.","position":{"start":{"line":46,"column":1,"offset":1208},"end":{"line":48,"column":53,"offset":1458},"indent":[1,1]}}],"position":{"start":{"line":46,"column":1,"offset":1208},"end":{"line":48,"column":53,"offset":1458},"indent":[1,1]}},{"type":"code","lang":"jsx","meta":null,"value":"// 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}","position":{"start":{"line":50,"column":1,"offset":1460},"end":{"line":61,"column":4,"offset":1834},"indent":[1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"You can even get more complicated and accept a list of messages to check against","position":{"start":{"line":63,"column":1,"offset":1836},"end":{"line":63,"column":81,"offset":1916},"indent":[]}}],"position":{"start":{"line":63,"column":1,"offset":1836},"end":{"line":63,"column":81,"offset":1916},"indent":[]}},{"type":"code","lang":null,"meta":null,"value":"// 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}","position":{"start":{"line":65,"column":1,"offset":1918},"end":{"line":83,"column":4,"offset":2678},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":2,"children":[{"type":"text","value":"Parallel Requests","position":{"start":{"line":85,"column":4,"offset":2683},"end":{"line":85,"column":21,"offset":2700},"indent":[]}}],"position":{"start":{"line":85,"column":1,"offset":2680},"end":{"line":85,"column":21,"offset":2700},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"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","position":{"start":{"line":86,"column":1,"offset":2701},"end":{"line":87,"column":71,"offset":2868},"indent":[1]}}],"position":{"start":{"line":86,"column":1,"offset":2701},"end":{"line":87,"column":71,"offset":2868},"indent":[1]}},{"type":"code","lang":"js","meta":null,"value":"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);","position":{"start":{"line":89,"column":1,"offset":2870},"end":{"line":104,"column":4,"offset":3171},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":2,"children":[{"type":"text","value":"Sequential Requests","position":{"start":{"line":106,"column":4,"offset":3176},"end":{"line":106,"column":23,"offset":3195},"indent":[]}}],"position":{"start":{"line":106,"column":1,"offset":3173},"end":{"line":106,"column":23,"offset":3195},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"text","value":"Caching","position":{"start":{"line":109,"column":4,"offset":3201},"end":{"line":109,"column":11,"offset":3208},"indent":[]}}],"position":{"start":{"line":109,"column":1,"offset":3198},"end":{"line":109,"column":11,"offset":3208},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"text","value":"Streaming Requests","position":{"start":{"line":111,"column":4,"offset":3213},"end":{"line":111,"column":22,"offset":3231},"indent":[]}}],"position":{"start":{"line":111,"column":1,"offset":3210},"end":{"line":111,"column":22,"offset":3231},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"text","value":"Take Last Request","position":{"start":{"line":113,"column":4,"offset":3236},"end":{"line":113,"column":21,"offset":3253},"indent":[]}}],"position":{"start":{"line":113,"column":1,"offset":3233},"end":{"line":113,"column":21,"offset":3253},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"text","value":"Hoc Chaining","position":{"start":{"line":115,"column":4,"offset":3258},"end":{"line":115,"column":16,"offset":3270},"indent":[]}}],"position":{"start":{"line":115,"column":1,"offset":3255},"end":{"line":115,"column":16,"offset":3270},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"text","value":"Composite Entities","position":{"start":{"line":117,"column":4,"offset":3275},"end":{"line":117,"column":22,"offset":3293},"indent":[]}}],"position":{"start":{"line":117,"column":1,"offset":3272},"end":{"line":117,"column":22,"offset":3293},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"text","value":"Normalizing To Filter","position":{"start":{"line":119,"column":4,"offset":3298},"end":{"line":119,"column":25,"offset":3319},"indent":[]}}],"position":{"start":{"line":119,"column":1,"offset":3295},"end":{"line":119,"column":25,"offset":3319},"indent":[]}},{"type":"export","value":"export const _frontmatter = {\"id\":\"examples\",\"title\":\"Examples\",\"group\":\"Tutorials\"}","position":{"start":{"line":123,"column":1,"offset":3323},"end":{"line":123,"column":85,"offset":3407},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":123,"column":85,"offset":3407}}},"scopeImports":["import React from 'react'"],"scopeIdentifiers":["React"],"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;","rawMDXOutput":"/* @jsx mdx */\nimport { mdx } from '@mdx-js/react';\n/* @jsx mdx */\n\nexport const _frontmatter = {\n  \"id\": \"examples\",\n  \"title\": \"Examples\",\n  \"group\": \"Tutorials\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\")\n  return <div {...props}/>\n};\n\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\"\nexport default function MDXContent({\n  components,\n  ...props\n}) {\n  return <MDXLayout {...layoutProps} {...props} components={components} mdxType=\"MDXLayout\">\n    <h2>{`Request on Load`}</h2>\n    <p>{`The most common use case for Enty is to request data for a view whenever it loads.\nBelow we import a component called `}<inlineCode parentName=\"p\">{`UserItemStructure`}</inlineCode>{` that needs user data.\nWe can use a compose function to apply the `}<inlineCode parentName=\"p\">{`UserItemRequest`}</inlineCode>{` hoc.\nAuto is set to respond to updates from `}<inlineCode parentName=\"p\">{`props.id`}</inlineCode>{`.\nPayload creator will take `}<inlineCode parentName=\"p\">{`props.id`}</inlineCode>{` and pass it to the API.`}</p>\n    <pre><code parentName=\"pre\" {...{}}>{`// 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`}</code></pre>\n    <h2>{`Callbacks`}</h2>\n    <p>{`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 `}<inlineCode parentName=\"p\">{`onRequest`}</inlineCode>{` function to a handler.`}</p>\n    <pre><code parentName=\"pre\" {...{}}>{`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`}</code></pre>\n    <h2>{`Loading Hoc`}</h2>\n    <p>{`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.`}</p>\n    <pre><code parentName=\"pre\" {...{\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`}</code></pre>\n    <p>{`You can even get more complicated and accept a list of messages to check against`}</p>\n    <pre><code parentName=\"pre\" {...{}}>{`// 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`}</code></pre>\n    <h2>{`Parallel Requests`}</h2>\n    <p>{`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`}</p>\n    <pre><code parentName=\"pre\" {...{\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`}</code></pre>\n    <h2>{`Sequential Requests`}</h2>\n    <h2>{`Caching`}</h2>\n    <h2>{`Streaming Requests`}</h2>\n    <h2>{`Take Last Request`}</h2>\n    <h2>{`Hoc Chaining`}</h2>\n    <h2>{`Composite Entities`}</h2>\n    <h2>{`Normalizing To Filter`}</h2>\n\n    </MDXLayout>;\n}\n\n;\nMDXContent.isMDXComponent = true;"}}