{"expireTime":9007200821600205000,"key":"gatsby-plugin-mdx-entire-payload-24ce490a4687b7f1cb9593b430aa2c44-","val":{"mdast":{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"The RequestHoc is a hoc version of useRequest. It has a slightly different api, but under the hood is just useRequest.","position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":119,"offset":119},"indent":[]}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":119,"offset":119},"indent":[]}},{"type":"code","lang":"flow","meta":null,"value":"RequestHock({\n name: string,\n auto?: boolean|Array,\n payloadCreator?: (props: *) => *,\n shouldComponentAutoRequest?: (props: *) => boolean\n})(Component);","position":{"start":{"line":4,"column":1,"offset":121},"end":{"line":11,"column":4,"offset":306},"indent":[1,1,1,1,1,1,1]}},{"type":"heading","depth":2,"children":[{"type":"text","value":"Config","position":{"start":{"line":14,"column":4,"offset":312},"end":{"line":14,"column":10,"offset":318},"indent":[]}}],"position":{"start":{"line":14,"column":1,"offset":309},"end":{"line":14,"column":10,"offset":318},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"text","value":".name","position":{"start":{"line":16,"column":5,"offset":324},"end":{"line":16,"column":10,"offset":329},"indent":[]}}],"position":{"start":{"line":16,"column":1,"offset":320},"end":{"line":16,"column":10,"offset":329},"indent":[]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"type:","position":{"start":{"line":17,"column":3,"offset":332},"end":{"line":17,"column":8,"offset":337},"indent":[]}}],"position":{"start":{"line":17,"column":1,"offset":330},"end":{"line":17,"column":10,"offset":339},"indent":[]}},{"type":"text","value":" ","position":{"start":{"line":17,"column":10,"offset":339},"end":{"line":17,"column":11,"offset":340},"indent":[]}},{"type":"inlineCode","value":"string","position":{"start":{"line":17,"column":11,"offset":340},"end":{"line":17,"column":19,"offset":348},"indent":[]}},{"type":"break","position":{"start":{"line":17,"column":19,"offset":348},"end":{"line":18,"column":1,"offset":351},"indent":[1]}},{"type":"strong","children":[{"type":"text","value":"required:","position":{"start":{"line":18,"column":3,"offset":353},"end":{"line":18,"column":12,"offset":362},"indent":[]}}],"position":{"start":{"line":18,"column":1,"offset":351},"end":{"line":18,"column":14,"offset":364},"indent":[]}},{"type":"text","value":" ","position":{"start":{"line":18,"column":14,"offset":364},"end":{"line":18,"column":15,"offset":365},"indent":[]}},{"type":"inlineCode","value":"true","position":{"start":{"line":18,"column":15,"offset":365},"end":{"line":18,"column":21,"offset":371},"indent":[]}},{"type":"text","value":" ","position":{"start":{"line":18,"column":21,"offset":371},"end":{"line":18,"column":23,"offset":373},"indent":[]}}],"position":{"start":{"line":17,"column":1,"offset":330},"end":{"line":18,"column":23,"offset":373},"indent":[1]}},{"type":"paragraph","children":[{"type":"text","value":"The name of the prop to pass the ","position":{"start":{"line":20,"column":1,"offset":375},"end":{"line":20,"column":34,"offset":408},"indent":[]}},{"type":"linkReference","identifier":"message","label":"Message","referenceType":"shortcut","children":[{"type":"text","value":"Message","position":{"start":{"line":20,"column":35,"offset":409},"end":{"line":20,"column":42,"offset":416},"indent":[]}}],"position":{"start":{"line":20,"column":34,"offset":408},"end":{"line":20,"column":43,"offset":417},"indent":[]}},{"type":"text","value":" down through.","position":{"start":{"line":20,"column":43,"offset":417},"end":{"line":20,"column":57,"offset":431},"indent":[]}}],"position":{"start":{"line":20,"column":1,"offset":375},"end":{"line":20,"column":57,"offset":431},"indent":[]}},{"type":"code","lang":"js","meta":null,"value":"const withUser = UserGetHoc({name: 'userMessage'});","position":{"start":{"line":22,"column":1,"offset":433},"end":{"line":24,"column":4,"offset":494},"indent":[1,1]}},{"type":"heading","depth":3,"children":[{"type":"text","value":".auto","position":{"start":{"line":26,"column":5,"offset":500},"end":{"line":26,"column":10,"offset":505},"indent":[]}}],"position":{"start":{"line":26,"column":1,"offset":496},"end":{"line":26,"column":10,"offset":505},"indent":[]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"type:","position":{"start":{"line":27,"column":3,"offset":508},"end":{"line":27,"column":8,"offset":513},"indent":[]}}],"position":{"start":{"line":27,"column":1,"offset":506},"end":{"line":27,"column":10,"offset":515},"indent":[]}},{"type":"text","value":" ","position":{"start":{"line":27,"column":10,"offset":515},"end":{"line":27,"column":11,"offset":516},"indent":[]}},{"type":"inlineCode","value":"boolean|Array","position":{"start":{"line":27,"column":11,"offset":516},"end":{"line":27,"column":34,"offset":539},"indent":[]}},{"type":"text","value":" ","position":{"start":{"line":27,"column":34,"offset":539},"end":{"line":27,"column":36,"offset":541},"indent":[]}}],"position":{"start":{"line":27,"column":1,"offset":506},"end":{"line":27,"column":36,"offset":541},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"Automatically request data on component mount or if a prop changes.","position":{"start":{"line":29,"column":1,"offset":543},"end":{"line":29,"column":68,"offset":610},"indent":[]}}],"position":{"start":{"line":29,"column":1,"offset":543},"end":{"line":29,"column":68,"offset":610},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"If ","position":{"start":{"line":31,"column":1,"offset":612},"end":{"line":31,"column":4,"offset":615},"indent":[]}},{"type":"inlineCode","value":"config.auto","position":{"start":{"line":31,"column":4,"offset":615},"end":{"line":31,"column":17,"offset":628},"indent":[]}},{"type":"text","value":" 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.","position":{"start":{"line":31,"column":17,"offset":628},"end":{"line":32,"column":53,"offset":771},"indent":[1]}}],"position":{"start":{"line":31,"column":1,"offset":612},"end":{"line":32,"column":53,"offset":771},"indent":[1]}},{"type":"paragraph","children":[{"type":"text","value":"If ","position":{"start":{"line":34,"column":1,"offset":773},"end":{"line":34,"column":4,"offset":776},"indent":[]}},{"type":"inlineCode","value":"config.auto","position":{"start":{"line":34,"column":4,"offset":776},"end":{"line":34,"column":17,"offset":789},"indent":[]}},{"type":"text","value":" 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.","position":{"start":{"line":34,"column":17,"offset":789},"end":{"line":36,"column":68,"offset":1019},"indent":[1,1]}}],"position":{"start":{"line":34,"column":1,"offset":773},"end":{"line":36,"column":68,"offset":1019},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"If ","position":{"start":{"line":38,"column":1,"offset":1021},"end":{"line":38,"column":4,"offset":1024},"indent":[]}},{"type":"inlineCode","value":"config.auto","position":{"start":{"line":38,"column":4,"offset":1024},"end":{"line":38,"column":17,"offset":1037},"indent":[]}},{"type":"text","value":" is not declared nothing will happen until the ","position":{"start":{"line":38,"column":17,"offset":1037},"end":{"line":38,"column":64,"offset":1084},"indent":[]}},{"type":"inlineCode","value":"onRequest","position":{"start":{"line":38,"column":64,"offset":1084},"end":{"line":38,"column":75,"offset":1095},"indent":[]}},{"type":"text","value":" callback is fired.\nThis is useful for mutations triggered by user interaction like save, update or delete.","position":{"start":{"line":38,"column":75,"offset":1095},"end":{"line":39,"column":88,"offset":1202},"indent":[1]}}],"position":{"start":{"line":38,"column":1,"offset":1021},"end":{"line":39,"column":88,"offset":1202},"indent":[1]}},{"type":"code","lang":"js","meta":null,"value":"// 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});","position":{"start":{"line":41,"column":1,"offset":1204},"end":{"line":53,"column":4,"offset":1446},"indent":[1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"text","value":".payloadCreator","position":{"start":{"line":56,"column":5,"offset":1453},"end":{"line":56,"column":20,"offset":1468},"indent":[]}}],"position":{"start":{"line":56,"column":1,"offset":1449},"end":{"line":56,"column":20,"offset":1468},"indent":[]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"type:","position":{"start":{"line":57,"column":3,"offset":1471},"end":{"line":57,"column":8,"offset":1476},"indent":[]}}],"position":{"start":{"line":57,"column":1,"offset":1469},"end":{"line":57,"column":10,"offset":1478},"indent":[]}},{"type":"text","value":" ","position":{"start":{"line":57,"column":10,"offset":1478},"end":{"line":57,"column":11,"offset":1479},"indent":[]}},{"type":"inlineCode","value":"(props|payload) => *","position":{"start":{"line":57,"column":11,"offset":1479},"end":{"line":57,"column":33,"offset":1501},"indent":[]}},{"type":"text","value":" ","position":{"start":{"line":57,"column":33,"offset":1501},"end":{"line":57,"column":35,"offset":1503},"indent":[]}}],"position":{"start":{"line":57,"column":1,"offset":1469},"end":{"line":57,"column":35,"offset":1503},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"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.","position":{"start":{"line":59,"column":1,"offset":1505},"end":{"line":61,"column":49,"offset":1751},"indent":[1,1]}}],"position":{"start":{"line":59,"column":1,"offset":1505},"end":{"line":61,"column":49,"offset":1751},"indent":[1,1]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"If ","position":{"start":{"line":63,"column":3,"offset":1755},"end":{"line":63,"column":6,"offset":1758},"indent":[]}},{"type":"inlineCode","value":"auto","position":{"start":{"line":63,"column":6,"offset":1758},"end":{"line":63,"column":12,"offset":1764},"indent":[]}},{"type":"text","value":" is truthy props are passed to ","position":{"start":{"line":63,"column":12,"offset":1764},"end":{"line":63,"column":43,"offset":1795},"indent":[]}},{"type":"inlineCode","value":"payloadCreator","position":{"start":{"line":63,"column":43,"offset":1795},"end":{"line":63,"column":59,"offset":1811},"indent":[]}},{"type":"text","value":".","position":{"start":{"line":63,"column":59,"offset":1811},"end":{"line":63,"column":60,"offset":1812},"indent":[]}}],"position":{"start":{"line":63,"column":3,"offset":1755},"end":{"line":63,"column":60,"offset":1812},"indent":[]}}],"position":{"start":{"line":63,"column":1,"offset":1753},"end":{"line":63,"column":60,"offset":1812},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"Calls to ","position":{"start":{"line":64,"column":3,"offset":1815},"end":{"line":64,"column":12,"offset":1824},"indent":[]}},{"type":"inlineCode","value":"message.onRequest","position":{"start":{"line":64,"column":12,"offset":1824},"end":{"line":64,"column":31,"offset":1843},"indent":[]}},{"type":"text","value":" are passed directly to ","position":{"start":{"line":64,"column":31,"offset":1843},"end":{"line":64,"column":55,"offset":1867},"indent":[]}},{"type":"inlineCode","value":"payloadCreator","position":{"start":{"line":64,"column":55,"offset":1867},"end":{"line":64,"column":71,"offset":1883},"indent":[]}},{"type":"text","value":".","position":{"start":{"line":64,"column":71,"offset":1883},"end":{"line":64,"column":72,"offset":1884},"indent":[]}}],"position":{"start":{"line":64,"column":3,"offset":1815},"end":{"line":64,"column":72,"offset":1884},"indent":[]}}],"position":{"start":{"line":64,"column":1,"offset":1813},"end":{"line":64,"column":72,"offset":1884},"indent":[]}}],"position":{"start":{"line":63,"column":1,"offset":1753},"end":{"line":64,"column":72,"offset":1884},"indent":[1]}},{"type":"code","lang":"js","meta":null,"value":"// 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});","position":{"start":{"line":67,"column":1,"offset":1887},"end":{"line":76,"column":4,"offset":2102},"indent":[1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"text","value":".shouldComponentAutoRequest","position":{"start":{"line":78,"column":5,"offset":2108},"end":{"line":78,"column":32,"offset":2135},"indent":[]}}],"position":{"start":{"line":78,"column":1,"offset":2104},"end":{"line":78,"column":32,"offset":2135},"indent":[]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"type:","position":{"start":{"line":79,"column":3,"offset":2138},"end":{"line":79,"column":8,"offset":2143},"indent":[]}}],"position":{"start":{"line":79,"column":1,"offset":2136},"end":{"line":79,"column":10,"offset":2145},"indent":[]}},{"type":"text","value":" ","position":{"start":{"line":79,"column":10,"offset":2145},"end":{"line":79,"column":11,"offset":2146},"indent":[]}},{"type":"inlineCode","value":"(props) => boolean","position":{"start":{"line":79,"column":11,"offset":2146},"end":{"line":79,"column":31,"offset":2166},"indent":[]}},{"type":"text","value":" ","position":{"start":{"line":79,"column":31,"offset":2166},"end":{"line":79,"column":33,"offset":2168},"indent":[]}}],"position":{"start":{"line":79,"column":1,"offset":2136},"end":{"line":79,"column":33,"offset":2168},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"If auto requesting is enabled, this hook lets you cancel the request based on props.","position":{"start":{"line":81,"column":1,"offset":2170},"end":{"line":81,"column":85,"offset":2254},"indent":[]}}],"position":{"start":{"line":81,"column":1,"offset":2170},"end":{"line":81,"column":85,"offset":2254},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"text","value":"Examples","position":{"start":{"line":85,"column":4,"offset":2261},"end":{"line":85,"column":12,"offset":2269},"indent":[]}}],"position":{"start":{"line":85,"column":1,"offset":2258},"end":{"line":85,"column":12,"offset":2269},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"text","value":"Fetch On Load","position":{"start":{"line":87,"column":5,"offset":2275},"end":{"line":87,"column":18,"offset":2288},"indent":[]}}],"position":{"start":{"line":87,"column":1,"offset":2271},"end":{"line":87,"column":18,"offset":2288},"indent":[]}},{"type":"code","lang":"js","meta":null,"value":"api.user.requestHoc({\n name: 'userMessage', \n auto: true,\n payloadCreator: (props) => ({id: props.id})\n});","position":{"start":{"line":88,"column":1,"offset":2289},"end":{"line":94,"column":4,"offset":2414},"indent":[1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"text","value":"Fetch On Prop Change","position":{"start":{"line":96,"column":5,"offset":2420},"end":{"line":96,"column":25,"offset":2440},"indent":[]}}],"position":{"start":{"line":96,"column":1,"offset":2416},"end":{"line":96,"column":25,"offset":2440},"indent":[]}},{"type":"code","lang":"js","meta":null,"value":"api.user.requestHoc({\n name: 'userMessage', \n auto: ['match.params.id'],\n payloadCreator: ({match}) => ({id: match.params.id})\n});","position":{"start":{"line":97,"column":1,"offset":2441},"end":{"line":103,"column":4,"offset":2590},"indent":[1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"text","value":"Fetch On Callback","position":{"start":{"line":105,"column":5,"offset":2596},"end":{"line":105,"column":22,"offset":2613},"indent":[]}}],"position":{"start":{"line":105,"column":1,"offset":2592},"end":{"line":105,"column":22,"offset":2613},"indent":[]}},{"type":"code","lang":"jsx","meta":null,"value":"composeWith(\n api.saveUser.requestHoc({\n name: 'saveMessage', \n payloadCreator: (payload) => payload\n }),\n (props) => {\n const {payload, saveMessage} = props;\n return \n }\n);","position":{"start":{"line":106,"column":1,"offset":2614},"end":{"line":117,"column":4,"offset":2907},"indent":[1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"text","value":"Fetch Series","position":{"start":{"line":119,"column":5,"offset":2913},"end":{"line":119,"column":17,"offset":2925},"indent":[]}}],"position":{"start":{"line":119,"column":1,"offset":2909},"end":{"line":119,"column":17,"offset":2925},"indent":[]}},{"type":"code","lang":"jsx","meta":null,"value":"// 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
\n \n \n
;\n }\n }\n);","position":{"start":{"line":120,"column":1,"offset":2926},"end":{"line":139,"column":4,"offset":3492},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"text","value":"Fetch Parallel","position":{"start":{"line":141,"column":5,"offset":3498},"end":{"line":141,"column":19,"offset":3512},"indent":[]}}],"position":{"start":{"line":141,"column":1,"offset":3494},"end":{"line":141,"column":19,"offset":3512},"indent":[]}},{"type":"code","lang":"jsx","meta":null,"value":"composeWith(\n api.foo.requestHoc({name: 'foo', auto: true}),\n api.bar.requestHoc({name: 'bar', auto: true}),\n MyComponent\n);","position":{"start":{"line":142,"column":1,"offset":3513},"end":{"line":148,"column":4,"offset":3657},"indent":[1,1,1,1,1,1]}},{"type":"definition","identifier":"message","label":"Message","title":null,"url":"/api/react-enty/Message","position":{"start":{"line":150,"column":1,"offset":3659},"end":{"line":150,"column":35,"offset":3693},"indent":[]}},{"type":"export","value":"export const _frontmatter = {\"title\":\"RequestHoc\",\"group\":\"React Enty\"}","position":{"start":{"line":154,"column":1,"offset":3697},"end":{"line":154,"column":72,"offset":3768},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":154,"column":72,"offset":3768}}},"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 \"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,\\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\"), \" \"), 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 \\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
\\n \\n \\n
;\\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;","rawMDXOutput":"/* @jsx mdx */\nimport { mdx } from '@mdx-js/react';\n/* @jsx mdx */\n\nexport const _frontmatter = {\n \"title\": \"RequestHoc\",\n \"group\": \"React Enty\"\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
\n};\n\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = \"wrapper\"\nexport default function MDXContent({\n components,\n ...props\n}) {\n return \n

{`The RequestHoc is a hoc version of useRequest. It has a slightly different api, but under the hood is just useRequest.`}

\n 
{`RequestHock({\n    name: string,\n    auto?: boolean|Array,\n    payloadCreator?: (props: *) => *,\n    shouldComponentAutoRequest?: (props: *) => boolean\n})(Component);\n`}
\n

{`Config`}

\n

{`.name`}

\n

{`type:`}{` `}{`string`}

{`\n`}{`required:`}{` `}{`true`}{` `}

\n

{`The name of the prop to pass the `}{`Message`}{` down through.`}

\n 
{`const withUser = UserGetHoc({name: 'userMessage'});\n`}
\n

{`.auto`}

\n

{`type:`}{` `}{`boolean|Array`}{` `}

\n

{`Automatically request data on component mount or if a prop changes.`}

\n

{`If `}{`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.`}

\n

{`If `}{`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.`}

\n

{`If `}{`config.auto`}{` is not declared nothing will happen until the `}{`onRequest`}{` callback is fired.\nThis is useful for mutations triggered by user interaction like save, update or delete.`}

\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`}
\n

{`.payloadCreator`}

\n

{`type:`}{` `}{`(props|payload) => *`}{` `}

\n

{`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.`}

\n
    \n
  • {`If `}{`auto`}{` is truthy props are passed to `}{`payloadCreator`}{`.`}
    • \n
  • {`Calls to `}{`message.onRequest`}{` are passed directly to `}{`payloadCreator`}{`.`}
    • \n
\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`}
\n

{`.shouldComponentAutoRequest`}

\n

{`type:`}{` `}{`(props) => boolean`}{` `}

\n

{`If auto requesting is enabled, this hook lets you cancel the request based on props.`}

\n

{`Examples`}

\n

{`Fetch On Load`}

\n 
{`api.user.requestHoc({\n    name: 'userMessage', \n    auto: true,\n    payloadCreator: (props) => ({id: props.id})\n});\n`}
\n

{`Fetch On Prop Change`}

\n 
{`api.user.requestHoc({\n    name: 'userMessage', \n    auto: ['match.params.id'],\n    payloadCreator: ({match}) => ({id: match.params.id})\n});\n`}
\n

{`Fetch On Callback`}

\n 
{`composeWith(\n    api.saveUser.requestHoc({\n        name: 'saveMessage', \n        payloadCreator: (payload) => payload\n    }),\n    (props) => {\n        const {payload, saveMessage} = props;\n        return \n    }\n);\n`}
\n

{`Fetch Series`}

\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 
\n                \n                \n            
;\n        }\n    }\n);\n`}
\n

{`Fetch Parallel`}

\n 
{`composeWith(\n    api.foo.requestHoc({name: 'foo', auto: true}),\n    api.bar.requestHoc({name: 'bar', auto: true}),\n    MyComponent\n);\n`}
\n\n ;\n}\n\n;\nMDXContent.isMDXComponent = true;"}}