{"componentChunkName":"component---src-components-tutorial-layout-js","path":"/tutorial/api/","webpackCompilationHash":"","result":{"data":{"allFile":{"group":[{"fieldValue":"Resources","nodes":[{"childMdx":{"fields":{"slug":"tutorial/entity-flow/"},"frontmatter":{"title":"Entity Flow"},"headings":[]}},{"childMdx":{"fields":{"slug":"tutorial/faq/"},"frontmatter":{"title":"FAQ"},"headings":[{"value":"How do I handle endpoints that return arrays?","depth":3}]}}]},{"fieldValue":"Tutorials","nodes":[{"childMdx":{"fields":{"slug":"tutorial/api/"},"frontmatter":{"title":"Entity Api"},"headings":[{"value":"Declaring an API","depth":2},{"value":"Sharing","depth":2},{"value":"Non prescriptive","depth":2},{"value":"Api shimming","depth":2}]}},{"childMdx":{"fields":{"slug":"tutorial/examples/"},"frontmatter":{"title":"Examples"},"headings":[{"value":"Request on Load","depth":2},{"value":"Callbacks","depth":2},{"value":"Loading Hoc","depth":2},{"value":"Parallel Requests","depth":2},{"value":"Sequential Requests","depth":2},{"value":"Caching","depth":2},{"value":"Streaming Requests","depth":2},{"value":"Take Last Request","depth":2},{"value":"Hoc Chaining","depth":2},{"value":"Composite Entities","depth":2},{"value":"Normalizing To Filter","depth":2}]}},{"childMdx":{"fields":{"slug":"tutorial/getting-started/"},"frontmatter":{"title":"Getting Started"},"headings":[{"value":"Installation","depth":2},{"value":"Setup","depth":2},{"value":"1. Schema","depth":3},{"value":"2. API","depth":3},{"value":"3. Connect to react","depth":3},{"value":"4. Make a Request","depth":3}]}},{"childMdx":{"fields":{"slug":"tutorial/introduction/"},"frontmatter":{"title":"Introduction"},"headings":[{"value":"Purpose","depth":2}]}},{"childMdx":{"fields":{"slug":"tutorial/schemas/"},"frontmatter":{"title":"Schemas"},"headings":[{"value":"Structure","depth":2},{"value":"Relationships","depth":3},{"value":"Constructing","depth":3},{"value":"Merging","depth":3},{"value":"Entities","depth":2},{"value":"Changing the idAttribute","depth":3},{"value":"Why does an entity require a structure?","depth":3}]}}]}]},"mdx":{"id":"6dca8bef-0aee-5a1a-920d-5d64ced4b4d6","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\": \"Entity Api\",\n  \"group\": \"Tutorials\"\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, mdx(\"em\", {\n    parentName: \"p\"\n  }, \"This is an introductory description of the EntityApi. For specific details of\\ntheir types and methods check the \", mdx(\"a\", _extends({\n    parentName: \"em\"\n  }, {\n    \"href\": \"/docs/data/EntityApi\"\n  }), \"Api\"), \".\")), mdx(\"p\", null, \"The EntityApi provides a standard way to separate your data fetching code from your views.\\nIt lets you declare groups of Promise or Observable returning functions that are converted to hooks.\"), mdx(\"p\", null, \"These hooks handle when data is requested and it is normalized into state. They then provide your\\nviews with a consistent data structure that holds both the most up to date version of your requested\\ndata and what stage the request cycle is currently in.\"), mdx(\"p\", null, \"This abstraction is helpful as it creates a clean barrier between your data fetching code and your views.\"), mdx(\"h2\", null, \"Declaring an API\"), mdx(\"p\", null, \"The EntityApi function takes your application schema and an object of promise returning functions\\nBelow is an example of an api that can fetch both users and jobs from a graphql server.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"import {EntityApi} from 'react-enty';\\nimport ApplicationSchema from './ApplicationSchema';\\n\\nconst api = EntityApi({\\n    user: {\\n        item: variables => fetch('/graphql', {query: serItemQuery, variables}),\\n        list: variables => fetch('/graphql', {query: UserListQuery, variables}),\\n    },\\n    job: {\\n        item: variables => fetch('/graphql', {query: JobItemQuery, variables}),\\n        list: variables => fetch('/graphql', {query: JobListQuery, variables})\\n    }\\n}, ApplicationSchema);\\n\\nexport UserItemRequestHook = api.user.item.useRequest\\nexport UserListRequestHook = api.user.list.useRequest\\nexport JobItemRequestHook = api.job.item.useRequest\\nexport JobListRequestHook = api.job.list.useRequest\\n\")), mdx(\"h2\", null, \"Sharing\"), mdx(\"p\", null, \"Because the api is declared up front it is very easy to split your core api into smaller parts.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"// UserApi.js\\nexport default {\\n    item: (variables) => fetch('/graphql', {query: UserItemQuery, variables}),\\n    list: (variables) => fetch('/graphql', {query: UserListQuery, variables}),\\n    create: (variables) => fetch('/graphql', {query: UserCreateMutation, variables})\\n}\\n\\n\\n// ApplicationApi.js\\nimport {EntityApi} from 'react-enty';\\nimport ApplicationSchema from './ApplicationSchema';\\nimport user from './UserApi';\\nimport coffee from './CoffeeApi';\\nimport cat from './CatApi';\\n\\nconst Api = EntityApi({\\n    user,\\n    coffee,\\n    cat\\n}, ApplicationSchema);\\n\\n\")), mdx(\"h2\", null, \"Non prescriptive\"), mdx(\"p\", null, \"TODO: Because promises and observables are standard you can use any promise returning logic. \"), mdx(\"h2\", null, \"Api shimming\"), mdx(\"p\", null, \"One of the benefits of declaring your api separate to your views is that it provides a space\\nto shim data before it enters your app. If an external api can only provide you with data in a certain\\nshape you can change it to a shape that makes sense to your entities before normalizing.\"), mdx(\"p\", null, \"Say you are integrating with a rest endpoint that returns an array of user but because your application\\nschema can support multiple types it really makes sense to return an object with the key of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"userList\"), \"\\nthat contains an array of users.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"EntityApi(ApplicationSchema, {\\n    userList: (payload) => fetch('/api/users', payload)\\n        .then(userList => ({userList}))\\n});\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;","fields":{"slug":"tutorial/api/"},"headings":[{"depth":2,"value":"Declaring an API"},{"depth":2,"value":"Sharing"},{"depth":2,"value":"Non prescriptive"},{"depth":2,"value":"Api shimming"}],"frontmatter":{"title":"Entity Api"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"6dca8bef-0aee-5a1a-920d-5d64ced4b4d6"}}}