{"componentChunkName":"component---src-components-api-layout-js","path":"/api/react-enty/request-hoc/","webpackCompilationHash":"","result":{"data":{"allFile":{"group":[{"fieldValue":"Enty","nodes":[{"childMdx":{"fields":{"slug":"api/enty/array-schema/"},"frontmatter":{"title":"Array Schema"},"headings":[{"value":"Params","depth":2},{"value":"shape","depth":3},{"value":"options.create","depth":3},{"value":"options.merge","depth":3},{"value":"Methods","depth":2},{"value":".normalize()","depth":3},{"value":".denormalize()","depth":3}]}},{"childMdx":{"fields":{"slug":"api/enty/composite-entity-schema/"},"frontmatter":{"title":"Composite Entity Schema"},"headings":[{"value":"Params","depth":2},{"value":"name","depth":3},{"value":"options.shape","depth":3},{"value":"options.compositeKeys","depth":3},{"value":"options.idAttribute","depth":3},{"value":"Methods","depth":2},{"value":".normalize()","depth":3},{"value":".denormalize()","depth":3}]}},{"childMdx":{"fields":{"slug":"api/enty/dynamic-schema/"},"frontmatter":{"title":"Dynamic Schema"},"headings":[{"value":"Params","depth":2},{"value":"shape","depth":3},{"value":"Methods","depth":2},{"value":".normalize()","depth":3},{"value":".denormalize()","depth":3},{"value":"Examples","depth":2},{"value":"Non-homogeneous Array","depth":3},{"value":"Union Type","depth":3}]}},{"childMdx":{"fields":{"slug":"api/enty/entity-schema/"},"frontmatter":{"title":"Entity Schema"},"headings":[{"value":"Params","depth":2},{"value":"name","depth":3},{"value":"options.shape","depth":3},{"value":"options.idAttribute","depth":3},{"value":"Methods","depth":2},{"value":".normalize()","depth":3},{"value":".denormalize()","depth":3}]}},{"childMdx":{"fields":{"slug":"api/enty/id-schema/"},"frontmatter":{"title":"Id Schema"},"headings":[{"value":"Params","depth":2},{"value":"shape","depth":3},{"value":"options.create","depth":2},{"value":"Methods","depth":2},{"value":".normalize()","depth":3},{"value":".denormalize()","depth":3}]}},{"childMdx":{"fields":{"slug":"api/enty/object-schema/"},"frontmatter":{"title":"Object Schema"},"headings":[{"value":"Params","depth":2},{"value":"shape","depth":3},{"value":"options.create","depth":3},{"value":"options.merge","depth":3},{"value":"Methods","depth":2},{"value":".normalize()","depth":3},{"value":".denormalize()","depth":3}]}},{"childMdx":{"fields":{"slug":"api/enty/value-schema/"},"frontmatter":{"title":"Value Schema"},"headings":[{"value":"Params","depth":2},{"value":"shape","depth":3},{"value":"options.shape","depth":3},{"value":"Methods","depth":2},{"value":".normalize()","depth":3},{"value":".denormalize()","depth":3}]}}]},{"fieldValue":"Enty Immutable","nodes":[{"childMdx":{"fields":{"slug":"api/enty-immutable/list-schema/"},"frontmatter":{"title":"List Schema"},"headings":[{"value":"Params","depth":2},{"value":"shape","depth":3},{"value":"options.shape","depth":3},{"value":"options.merge","depth":3},{"value":"Methods","depth":2},{"value":".normalize()","depth":3},{"value":".denormalize()","depth":3}]}},{"childMdx":{"fields":{"slug":"api/enty-immutable/map-schema/"},"frontmatter":{"title":"Map Schema"},"headings":[{"value":"Params","depth":2},{"value":"shape","depth":3},{"value":"Methods","depth":2},{"value":".normalize()","depth":3},{"value":".denormalize()","depth":3}]}}]},{"fieldValue":"React Enty","nodes":[{"childMdx":{"fields":{"slug":"api/react-enty/entity-api/"},"frontmatter":{"title":"Entity Api"},"headings":[{"value":"Params","depth":2},{"value":"actionMap","depth":3},{"value":"schema","depth":3},{"value":"Returns","depth":2},{"value":"useRequest","depth":3},{"value":"RequestHoc","depth":3},{"value":"Root Returns","depth":2},{"value":"Provider","depth":3},{"value":"ProviderHoc","depth":3},{"value":"useRemove","depth":3},{"value":"RemoveHoc","depth":3},{"value":"Examples","depth":2},{"value":"Combining Multiple Apis","depth":3}]}},{"childMdx":{"fields":{"slug":"api/react-enty/message/"},"frontmatter":{"title":"Message"},"headings":[{"value":"Properties","depth":2},{"value":".response","depth":3},{"value":".requestState","depth":3},{"value":".requestError","depth":3},{"value":"Methods","depth":2},{"value":".onRequest()","depth":3},{"value":".get()","depth":3},{"value":".getIn()","depth":3},{"value":".updateRequestState()","depth":3},{"value":".toEmpty()","depth":3},{"value":".toFetching()","depth":3},{"value":".toRefetching()","depth":3},{"value":".toSuccess()","depth":3},{"value":".toError()","depth":3},{"value":"Static Unit Functions","depth":2},{"value":"Message.empty()","depth":3},{"value":"Message.fetching()","depth":3},{"value":"Message.refetching()","depth":3},{"value":"Message.success()","depth":3},{"value":"Message.error()","depth":3}]}},{"childMdx":{"fields":{"slug":"api/react-enty/remove-hook/"},"frontmatter":{"title":"useRemove"},"headings":[{"value":"Examples","depth":2}]}},{"childMdx":{"fields":{"slug":"api/react-enty/request-hoc/"},"frontmatter":{"title":"RequestHoc"},"headings":[{"value":"Config","depth":2},{"value":".name","depth":3},{"value":".auto","depth":3},{"value":".payloadCreator","depth":3},{"value":".shouldComponentAutoRequest","depth":3},{"value":"Examples","depth":2},{"value":"Fetch On Load","depth":3},{"value":"Fetch On Prop Change","depth":3},{"value":"Fetch On Callback","depth":3},{"value":"Fetch Series","depth":3},{"value":"Fetch Parallel","depth":3}]}},{"childMdx":{"fields":{"slug":"api/react-enty/request-hook/"},"frontmatter":{"title":"useRequest"},"headings":[{"value":"Examples","depth":2},{"value":"Fetch On Load","depth":3},{"value":"Fetch On Prop Change","depth":3},{"value":"Fetch On Callback","depth":3},{"value":"Fetch Series","depth":3},{"value":"Fetch Parallel","depth":3}]}},{"childMdx":{"fields":{"slug":"api/react-enty/request-state/"},"frontmatter":{"title":"Request State"},"headings":[{"value":"Properties","depth":2},{"value":".is{State}","depth":3},{"value":"Methods","depth":2},{"value":".{state}Map()","depth":3},{"value":".{state}FlatMap()","depth":3},{"value":".to{state}()","depth":3},{"value":".value()","depth":3},{"value":"Unit Functions","depth":3},{"value":"Examples","depth":2},{"value":"ApplyLoader","depth":3},{"value":"Merging RequestStates","depth":3},{"value":"Any Success","depth":3}]}}]}]},"mdx":{"id":"4ee692bf-e3ca-5337-bc58-cebcf23edde9","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  \"title\": \"RequestHoc\",\n  \"group\": \"React Enty\"\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, \"The RequestHoc is a hoc version of useRequest. It has a slightly different api, but under the hood is just useRequest.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-flow\"\n  }), \"RequestHock({\\n    name: string,\\n    auto?: boolean|Array<string>,\\n    payloadCreator?: (props: *) => *,\\n    shouldComponentAutoRequest?: (props: *) => boolean\\n})(Component);\\n\")), mdx(\"h2\", null, \"Config\"), mdx(\"h3\", null, \".name\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"type:\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"string\"), mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"required:\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"true\"), \"  \"), mdx(\"p\", null, \"The name of the prop to pass the \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/api/react-enty/Message\"\n  }), \"Message\"), \" down through.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"const withUser = UserGetHoc({name: 'userMessage'});\\n\")), mdx(\"h3\", null, \".auto\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"type:\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"boolean|Array<string>\"), \"  \"), mdx(\"p\", null, \"Automatically request data on component mount or if a prop changes.\"), mdx(\"p\", null, \"If \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"config.auto\"), \" is set to true the api function will be called immediately whenever the component mounts.\\nThis is useful for upfront fetching of a pages data.\"), mdx(\"p\", null, \"If \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"config.auto\"), \" is set to an array of strings that match to prop names the api function will be called\\nimmediately on component mount, and everytime one of those props changes.\\nThis is useful for fetching data in a component that changes often.\"), mdx(\"p\", null, \"If \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"config.auto\"), \" is not declared nothing will happen until the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onRequest\"), \" callback is fired.\\nThis is useful for mutations triggered by user interaction like save, update or delete.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"// Request the user on component mount\\nUserGetHoc({\\n    name: 'userMessage', \\n    auto: true\\n});\\n\\n// Request the user on component mount and when the userId prop changes\\nUserGetHoc({\\n    name: 'userMessage',\\n    auto: ['userId']\\n});\\n\")), mdx(\"h3\", null, \".payloadCreator\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"type:\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"(props|payload) => *\"), \"  \"), mdx(\"p\", null, \"The payload creator is used to generate a unique key to keep track of your requests. The result is\\nhashed and stored in Enty state. This means a single RequestHoc can query different types of the\\nsame data and Enty is able to cache the results.\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"If \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"auto\"), \" is truthy props are passed to \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"payloadCreator\"), \".\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Calls to \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"message.onRequest\"), \" are passed directly to \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"payloadCreator\"), \".\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"// Auto request different users from react router params\\nUserGetHoc({\\n    name: 'userMessage', \\n    auto: ['match.params.id'],\\n    payloadCreator: (props) => ({\\n        id: props.match.params.id\\n    })\\n});\\n\")), mdx(\"h3\", null, \".shouldComponentAutoRequest\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"type:\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"(props) => boolean\"), \"  \"), mdx(\"p\", null, \"If auto requesting is enabled, this hook lets you cancel the request based on props.\"), mdx(\"h2\", null, \"Examples\"), mdx(\"h3\", null, \"Fetch On Load\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"api.user.requestHoc({\\n    name: 'userMessage', \\n    auto: true,\\n    payloadCreator: (props) => ({id: props.id})\\n});\\n\")), mdx(\"h3\", null, \"Fetch On Prop Change\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"api.user.requestHoc({\\n    name: 'userMessage', \\n    auto: ['match.params.id'],\\n    payloadCreator: ({match}) => ({id: match.params.id})\\n});\\n\")), mdx(\"h3\", null, \"Fetch On Callback\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"composeWith(\\n    api.saveUser.requestHoc({\\n        name: 'saveMessage', \\n        payloadCreator: (payload) => payload\\n    }),\\n    (props) => {\\n        const {payload, saveMessage} = props;\\n        return <button onClick={() => message.onRequest(payload)}>save user</button>\\n    }\\n);\\n\")), mdx(\"h3\", null, \"Fetch Series\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"// Contrived example\\ncomposeWith(\\n    api.foo.requestHoc({name: 'foo'}),\\n    api.bar.requestHoc({name: 'bar'}),\\n    class Test extends React.Component<{aa: Message, bb: Message}> {\\n        componentDidMount() {\\n            const {foo, bar} = this.props;\\n            foo.onRequest('first').then(() => bar.onRequest('second'));\\n        }\\n        render() {\\n            const {aa, bb} = this.props;\\n            return <div>\\n                <ExpectsMessage message={aa} />\\n                <ExpectsMessage message={bb} />\\n            </div>;\\n        }\\n    }\\n);\\n\")), mdx(\"h3\", null, \"Fetch Parallel\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"composeWith(\\n    api.foo.requestHoc({name: 'foo', auto: true}),\\n    api.bar.requestHoc({name: 'bar', auto: true}),\\n    MyComponent\\n);\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;","fields":{"slug":"api/react-enty/request-hoc/"},"headings":[{"depth":2,"value":"Config"},{"depth":3,"value":".name"},{"depth":3,"value":".auto"},{"depth":3,"value":".payloadCreator"},{"depth":3,"value":".shouldComponentAutoRequest"},{"depth":2,"value":"Examples"},{"depth":3,"value":"Fetch On Load"},{"depth":3,"value":"Fetch On Prop Change"},{"depth":3,"value":"Fetch On Callback"},{"depth":3,"value":"Fetch Series"},{"depth":3,"value":"Fetch Parallel"}],"frontmatter":{"title":"RequestHoc"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"4ee692bf-e3ca-5337-bc58-cebcf23edde9"}}}