{"expireTime":9007200821600205000,"key":"gatsby-plugin-mdx-entire-payload-73f3e07bcd9608fc4db0fddf7ba7970e-","val":{"mdast":{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"The useRequest hook is the way api functions are bound to your components.","position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":75,"offset":75},"indent":[]}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":75,"offset":75},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"It returns a ","position":{"start":{"line":4,"column":1,"offset":77},"end":{"line":4,"column":14,"offset":90},"indent":[]}},{"type":"linkReference","identifier":"message","label":"Message","referenceType":"shortcut","children":[{"type":"text","value":"Message","position":{"start":{"line":4,"column":15,"offset":91},"end":{"line":4,"column":22,"offset":98},"indent":[]}}],"position":{"start":{"line":4,"column":14,"offset":90},"end":{"line":4,"column":23,"offset":99},"indent":[]}},{"type":"text","value":" 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.","position":{"start":{"line":4,"column":23,"offset":99},"end":{"line":4,"column":270,"offset":346},"indent":[]}}],"position":{"start":{"line":4,"column":1,"offset":77},"end":{"line":4,"column":270,"offset":346},"indent":[]}},{"type":"code","lang":"flow","meta":null,"value":"useRequest(): Message","position":{"start":{"line":6,"column":1,"offset":348},"end":{"line":8,"column":4,"offset":381},"indent":[1,1]}},{"type":"heading","depth":2,"children":[{"type":"text","value":"Examples","position":{"start":{"line":10,"column":4,"offset":386},"end":{"line":10,"column":12,"offset":394},"indent":[]}}],"position":{"start":{"line":10,"column":1,"offset":383},"end":{"line":10,"column":12,"offset":394},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"text","value":"Fetch On Load","position":{"start":{"line":11,"column":5,"offset":399},"end":{"line":11,"column":18,"offset":412},"indent":[]}}],"position":{"start":{"line":11,"column":1,"offset":395},"end":{"line":11,"column":18,"offset":412},"indent":[]}},{"type":"code","lang":"jsx","meta":null,"value":"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}","position":{"start":{"line":13,"column":1,"offset":414},"end":{"line":29,"column":4,"offset":902},"indent":[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 On Prop Change","position":{"start":{"line":31,"column":5,"offset":908},"end":{"line":31,"column":25,"offset":928},"indent":[]}}],"position":{"start":{"line":31,"column":1,"offset":904},"end":{"line":31,"column":25,"offset":928},"indent":[]}},{"type":"code","lang":"jsx","meta":null,"value":"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}","position":{"start":{"line":32,"column":1,"offset":929},"end":{"line":48,"column":4,"offset":1425},"indent":[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 On Callback","position":{"start":{"line":50,"column":5,"offset":1431},"end":{"line":50,"column":22,"offset":1448},"indent":[]}}],"position":{"start":{"line":50,"column":1,"offset":1427},"end":{"line":50,"column":22,"offset":1448},"indent":[]}},{"type":"code","lang":"jsx","meta":null,"value":"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}","position":{"start":{"line":51,"column":1,"offset":1449},"end":{"line":70,"column":4,"offset":2099},"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 Series","position":{"start":{"line":72,"column":5,"offset":2105},"end":{"line":72,"column":17,"offset":2117},"indent":[]}}],"position":{"start":{"line":72,"column":1,"offset":2101},"end":{"line":72,"column":17,"offset":2117},"indent":[]}},{"type":"code","lang":"jsx","meta":null,"value":"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","position":{"start":{"line":74,"column":1,"offset":2119},"end":{"line":100,"column":4,"offset":2926},"indent":[1,1,1,1,1,1,1,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":102,"column":5,"offset":2932},"end":{"line":102,"column":19,"offset":2946},"indent":[]}}],"position":{"start":{"line":102,"column":1,"offset":2928},"end":{"line":102,"column":19,"offset":2946},"indent":[]}},{"type":"code","lang":"jsx","meta":null,"value":"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}","position":{"start":{"line":104,"column":1,"offset":2948},"end":{"line":126,"column":4,"offset":3673},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"export","value":"export const _frontmatter = {\"title\":\"useRequest\",\"group\":\"React Enty\"}","position":{"start":{"line":129,"column":1,"offset":3676},"end":{"line":129,"column":72,"offset":3747},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":129,"column":72,"offset":3747}}},"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\": \"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;","rawMDXOutput":"/* @jsx mdx */\nimport { mdx } from '@mdx-js/react';\n/* @jsx mdx */\n\nexport const _frontmatter = {\n  \"title\": \"useRequest\",\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 <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    <p>{`The useRequest hook is the way api functions are bound to your components.`}</p>\n    <p>{`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.`}</p>\n    <pre><code parentName=\"pre\" {...{\n        \"className\": \"language-flow\"\n      }}>{`useRequest(): Message\n`}</code></pre>\n    <h2>{`Examples`}</h2>\n    <h3>{`Fetch On Load`}</h3>\n    <pre><code parentName=\"pre\" {...{\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`}</code></pre>\n    <h3>{`Fetch On Prop Change`}</h3>\n    <pre><code parentName=\"pre\" {...{\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`}</code></pre>\n    <h3>{`Fetch On Callback`}</h3>\n    <pre><code parentName=\"pre\" {...{\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`}</code></pre>\n    <h3>{`Fetch Series`}</h3>\n    <pre><code parentName=\"pre\" {...{\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`}</code></pre>\n    <h3>{`Fetch Parallel`}</h3>\n    <pre><code parentName=\"pre\" {...{\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`}</code></pre>\n\n    </MDXLayout>;\n}\n\n;\nMDXContent.isMDXComponent = true;"}}