{"componentChunkName":"component---src-components-api-layout-js","path":"/api/react-enty/request-state/","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":"05af5aa0-0807-5e5c-b38a-953684d3cdad","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\": \"Request State\",\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, \"There are five distinct states to any data fetching request:\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), \"State\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), \"Data\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), \"Empty\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), \"Nothing has been requested\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), \"Fetching\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), \"Request is in process for the first time\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), \"Refetching\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), \"Request has already returned data but is in process for a second time\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), \"Success\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), \"Request has completed and returned requested data\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), \"Error\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), \"Request has failed and returned an error\")))), mdx(\"p\", null, \"RequestState is a variant that allows the user to render the different states of a request in a declarative manner. It's api gives you a clear way of handling each possible state and makes sure your app is never rendering an unpredicted state.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"class RequestState {\\n\\n    // Map\\n    emptyMap(mapper: RequestStateMapper) => RequestState\\n    fetchingMap(mapper: RequestStateMapper) => RequestState\\n    refetchingMap(mapper: RequestStateMapper) => RequestState\\n    successMap(mapper: RequestStateMapper) => RequestState\\n    errorMap(mapper: RequestStateMapper) => RequestState\\n        \\n    // FlatMap\\n    emptyFlatMap(mapper: RequestStateFlatMapper) => RequestState\\n    fetchingFlatMap(mapper: RequestStateFlatMapper) => RequestState\\n    refetchingFlatMap(mapper: RequestStateFlatMapper) => RequestState\\n    successFlatMap(mapper: RequestStateFlatMapper) => RequestState\\n    errorFlatMap(mapper: RequestStateFlatMapper) => RequestState\\n\\n    // Casting\\n    toEmpty() => RequestState\\n    toFetching() => RequestState\\n    toRefetching() => RequestState\\n    toSuccess() => RequestState\\n    toError() => RequestState\\n\\n    // States\\n    isEmpty: boolean;\\n    isFetching: boolean;\\n    isRefetching: boolean;\\n    isSuccess: boolean;\\n    isError: boolean;\\n\\n    value(defaultValue: *) => *\\n}\\n\")), mdx(\"h2\", null, \"Properties\"), mdx(\"h3\", null, \".is{State}\"), mdx(\"p\", null, \"State properties hold the raw booleans to describe the request state. \"), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, \"They are easy to access but map functions or \", \"[LoadingBoundary]\", \" make your code more predictable.\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {}), \"isEmpty: boolean;\\nisFetching: boolean;\\nisRefetching: boolean;\\nisSuccess: boolean;\\nisError: boolean;\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"function User({message}) {\\n    if(message.requestState.isFetching) {\\n        return <Spinner />;\\n    }\\n    return <img src={message.resonse.user.avatar} />\\n}\\n\\n\")), mdx(\"h2\", null, \"Methods\"), mdx(\"p\", null, \"RequestState seems to have a lot of methods but in reality it is three methods duplicated for each\\nof the five possible states of a request:  Empty, Fetching, Refetching, Success & Error.\"), mdx(\"h3\", null, \".{state}Map()\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"type:\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"(mapper: A => B) => RequestState\"), \"  \"), mdx(\"p\", null, \"Map functions will call their mapper with the current value of the variant and update it with the\\nresult. The useful part is that they will only call the functions that match the current state of\\nthe variant. This means you can describe what should happen for all states of the request but\\nonly action on the current state.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"function User({message}) {\\n    return message.requestState\\n        .emptyMap(() => null)\\n        .fetchingMap(() => <Spinner />)\\n        .refetchingMap(() => <img src={mesage.get('avatar')} />)\\n        .successMap(() => <img src={mesage.get('avatar')} />)\\n        .errorMap(() => <Error error={message.requestError} />)\\n        .value();\\n}\\n\")), mdx(\"h3\", null, \".{state}FlatMap()\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"type:\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"(mapper: (A) => RequestState<B>) => RequestState<B>\"), \"  \"), mdx(\"p\", null, \"FlatMap is similar to Map except instead of your mapper returning a value that is stored inside the\\ncurrent request state, your mapper returns a new RequestState. \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"This is useful if you want to\\nreplace the state from a different source.\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"function validateData(data) {\\n    if(data.hasErrors) {\\n        return RequestState.error();\\n    }\\n    return RequestState.success();\\n}\\n\\nreturn requestState\\n    .successFlatMap(() => validateData(message.response))\\n    .errorMap(() => 'Error!')\\n    .successMap(() => 'Success.')\\n    .value();\\n\")), mdx(\"p\", null, \"With the above example we can wait until the response is a success until we validate a portion of\\nthe data. But we can still maintain single purpose functions for how to render the data and how to\\nrespond to an error.\"), mdx(\"h3\", null, \".to{state}()\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"type:\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"() => RequestState\")), mdx(\"p\", null, \"Casts a request state to a different type.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"RequestState.fetching('foo')\\n    .toError()\\n    .fetchingMap(() => 'bar')\\n    .value() // foo\\n\")), mdx(\"h3\", null, \".value()\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"type:\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"() => *\"), \"   \"), mdx(\"p\", null, \"Returns either the current state of the variant.\"), mdx(\"h3\", null, \"Unit Functions\"), mdx(\"p\", null, \"The request state class has static unit functions for creating requestStates in different forms.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"import {RequestState} from 'react-enty';\\n\\nRequestState.empty();\\nRequestState.fetching();\\nRequestState.refetching();\\nRequestState.success();\\nRequestState.error();\\n\")), mdx(\"h2\", null, \"Examples\"), mdx(\"p\", null, \"Becuase the request state is a concrete data type, rather than just a series of booleans, it\\nis very easy to abstract common loading situations away behind a function or a hoc.\"), mdx(\"h3\", null, \"ApplyLoader\"), mdx(\"p\", null, \"Writing all cases of a variant can become time consuming so we can abstract a common loading style\\ninto an applyLoader function.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"function applyLoader(message) {\\n    const {requestError} = message;\\n    const {response} = message;\\n    const {requestState} = message;\\n\\n    return message.requestState\\n        .fetchingMap(() => <Loader/>)\\n        .refetchingMap(() => <Loader/>)\\n        .errorMap(() => <Error error={requestError}/>)\\n}\\n\\nfunction User({userMessage}) {\\n    return applyLoader(userMessage)\\n        .successMap(() => <img src={userMessage.get('avatar')} />)\\n        .value();\\n}\\n\")), mdx(\"h3\", null, \"Merging RequestStates\"), mdx(\"p\", null, \"You can even use a reduce to combine multiple request states together.\\nAt each iteration if the previous requestState is a success it will replace it with the next.\\nThis means that all must be true for the final state to render.\\nBut if any are fetching or errored we will still get the right state.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"return this.props[config.messages]\\n    .reduce((previous, next) => previous.successFlatMap(() => next))\\n    .fetchingMap(() => <Loader/>)\\n    .refetchingMap(() => <Loader/>)\\n    .errorMap(() => <Error error={requestError}/>)\\n    .successMap(() => <Component {...this.props} />)\\n    .value();\\n\")), mdx(\"h3\", null, \"Any Success\"), mdx(\"p\", null, \"@TODO\"));\n}\n;\nMDXContent.isMDXComponent = true;","fields":{"slug":"api/react-enty/request-state/"},"headings":[{"depth":2,"value":"Properties"},{"depth":3,"value":".is{State}"},{"depth":2,"value":"Methods"},{"depth":3,"value":".{state}Map()"},{"depth":3,"value":".{state}FlatMap()"},{"depth":3,"value":".to{state}()"},{"depth":3,"value":".value()"},{"depth":3,"value":"Unit Functions"},{"depth":2,"value":"Examples"},{"depth":3,"value":"ApplyLoader"},{"depth":3,"value":"Merging RequestStates"},{"depth":3,"value":"Any Success"}],"frontmatter":{"title":"Request State"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"05af5aa0-0807-5e5c-b38a-953684d3cdad"}}}