{"componentChunkName":"component---src-components-api-layout-js","path":"/api/react-enty/request-hook/","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":"7dc54b90-fd45-5bf5-80f1-e0b420193173","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\": \"useRequest\",\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 useRequest hook is the way api functions are bound to your components.\"), mdx(\"p\", null, \"It returns a \", \"[Message]\", \" that contains all the necessary tools to request data and render something when it comes back. The hook handles the normalizing and denormalizing of the data so that you only need to worry about what data you want and when you want to ask for it.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-flow\"\n  }), \"useRequest(): Message\\n\")), mdx(\"h2\", null, \"Examples\"), mdx(\"h3\", null, \"Fetch On Load\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"import {useEffect} from 'react';\\nimport api from './api';\\nimport Spinner from ./components/Spinner';\\nimport Error from ./components/Error';\\n\\nexport default function Avatar(props) {\\n    const message = api.user.useRequest();\\n    useEffect(() => {\\n        message.onRequest({id: props.id});\\n    }, []);\\n\\n    return <LoadingBoundary message={message} fallback={<Spinner/>} error={<Error />}>\\n        {({user}) => <img src={user.avatar} alt={user.name} />}\\n    </LoadingBoundary>\\n}\\n\")), mdx(\"h3\", null, \"Fetch On Prop Change\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"import {useEffect} from 'react';\\nimport api from './api';\\nimport Spinner from ./components/Spinner';\\nimport Error from ./components/Error';\\n\\nexport default function Avatar(props) {\\n    const message = api.user.useRequest();\\n    useEffect(() => {\\n        message.onRequest({id: props.id});\\n    }, [props.id]);\\n\\n    return <LoadingBoundary message={message} fallback={<Spinner/>} error={<Error />}>\\n        {({user}) => <img src={user.avatar} alt={user.name} />}\\n    </LoadingBoundary>\\n}\\n\")), mdx(\"h3\", null, \"Fetch On Callback\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"import {useEffect} from 'react';\\nimport {useState} from 'react';\\nimport api from './api';\\nimport Spinner from ./components/Spinner';\\nimport Error from ./components/Error';\\n\\nexport default function Avatar(props) {\\n    const [id, setId] = useState();\\n    const message = api.user.useRequest();\\n\\n    return <Box>\\n        <input value={id} onChange={(e) => setId(e.value)} />\\n        <button onClick={() => message.onRequest({id})}>Fetch User</button>\\n        <LoadingBoundary message={message} fallback={<Spinner/>} error={<Error />}>\\n            {({user}) => <img src={user.avatar} alt={user.name} />}\\n        </LoadingBoundary>\\n    </Box>\\n}\\n\")), mdx(\"h3\", null, \"Fetch Series\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"import {useEffect} from 'react';\\nimport api from './api';\\nimport Spinner from ./components/Spinner';\\nimport Error from ./components/Error';\\n\\nexport default function Avatar(props) {\\n    const foo = api.user.useRequest();\\n    const bar = api.user.useRequest();\\n    const loadingProps = {fallback: <Spinner />, error: <Error />};\\n    const renderUser = {({user}) => <img src={user.avatar} alt={user.name} />}\\n    \\n    useEffect(() => {\\n        let fetch = async () => {\\n            await foo.onRequest('foo');\\n            await bar.onRequest('bar');\\n        }\\n        fetch();\\n    }, [])\\n\\n    return <Box>\\n        <LoadingBoundary message={foo} {...loadingProps} />{renderUser}</LoadingBoundary>\\n        <LoadingBoundary message={bar} {...loadingProps} />{renderUser}</LoadingBoundary>\\n    </Box>\\n}\\n\\n\")), mdx(\"h3\", null, \"Fetch Parallel\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"import {useEffect} from 'react';\\nimport api from './api';\\nimport Spinner from ./components/Spinner';\\nimport Error from ./components/Error';\\n\\nexport default function Avatar(props) {\\n    const foo = api.user.useRequest();\\n    const bar = api.user.useRequest();\\n    const loadingProps = {fallback: <Spinner />, error: <Error />};\\n    const renderUser = {({user}) => <img src={user.avatar} alt={user.name} />}\\n    \\n    useEffect(() => {\\n        foo.onRequest('foo');\\n        bar.onRequest('bar');\\n    }, [])\\n\\n    return <Box>\\n        <LoadingBoundary message={foo} {...loadingProps} />{renderUser}</LoadingBoundary>\\n        <LoadingBoundary message={bar} {...loadingProps} />{renderUser}</LoadingBoundary>\\n    </Box>\\n}\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;","fields":{"slug":"api/react-enty/request-hook/"},"headings":[{"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":"useRequest"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"7dc54b90-fd45-5bf5-80f1-e0b420193173"}}}