{"componentChunkName":"component---src-components-tutorial-layout-js","path":"/tutorial/getting-started/","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":"7c3d8713-7af5-515a-955d-76b707e9a0ab","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\": \"Getting Started\",\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(\"h2\", null, \"Installation\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {}), \"yarn add react-enty\\n\")), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Note: the \", mdx(\"inlineCode\", {\n    parentName: \"em\"\n  }, \"enty\"), \" package only contains the schemas. \", mdx(\"inlineCode\", {\n    parentName: \"em\"\n  }, \"react-enty\"), \" contains the api, which lets you\\nuse those schemas in a react project. React Enty depends on Enty, so you only need to add react\\nenty to your project.\")), mdx(\"h2\", null, \"Setup\"), mdx(\"p\", null, \"When using Enty in a project there are two parts: The schema and the API.\"), mdx(\"h3\", null, \"1. Schema\"), mdx(\"p\", null, \"The first step in implementing Enty is to create your schema. This defines the relationships between\\nyour entities.  In this example we'll say a user has a list of friends which are also users. \"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"// ApplicationSchema.js\\nimport {ObjectSchema} from 'react-enty';\\nimport {ArraySchema} from 'react-enty';\\nimport {EntitySchema} from 'react-enty';\\n\\nvar user = new EntitySchema('user');\\nvar userList = new ArraySchema(user);\\n\\nuser.shape = new ObjectSchema({\\n    friendList: userList\\n});\\n\\nexport default new ObjectSchema({\\n   user,\\n   userList\\n});\\n\\n\")), mdx(\"p\", null, \"Read more: \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/schemas/entity-schema\"\n  }), \"Schemas\")), mdx(\"h3\", null, \"2. API\"), mdx(\"p\", null, \"The second thing we need to do is to create an api from our schema. This will let us fetch some data.\\nThe EntityApi takes a bunch of promise returning functions and turns them into hocs that fetch, normalize and then provide data to our application. \"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"// Api.js\\nimport {EntityApi} from 'react-enty';\\nimport ApplicationSchema from './ApplicationSchema';\\n\\nexport default EntityApi({\\n    user: {\\n        get: variables => request('/graphql', {query: UserQuery, variables}),\\n        list: variables => request('/graphql', {query: UserListQuery, variables})\\n    }\\n}, ApplicationSchema);\\n\\n\")), mdx(\"p\", null, \"Read more: \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/api\"\n  }), \"Api\")), mdx(\"h3\", null, \"3. Connect to react\"), mdx(\"p\", null, \"Currently Enty uses redux to store it's data. The api we recently created exports a store that\\nwe can dump into a redux provider. \"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"// index.js\\nimport {React} from 'react';\\nimport ReactDOM from 'react-dom';\\nimport Api from './Api';\\n\\n\\nReactDOM.render(\\n    <Api.EntityProvider>\\n        <App />\\n    </Api.EntityProvider>,\\n    document.getElementById('app'),\\n);\\n\\n\")), mdx(\"h3\", null, \"4. Make a Request\"), mdx(\"p\", null, \"Now we can use one of the request hocs exported from our api to request data.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"// UserAvatar.js\\nimport React from 'react';\\nimport Api from './Api';\\nimport Spinner from './Spinner';\\nimport Error from './Error';\\n\\nexport default function UserAvatar(props) {\\n    const {id} = props;\\n    const userMessage = Api.user.get.useRequest();\\n\\n    useEffect(() => {\\n        userMessage.onRequest({id});\\n    }, [id]);\\n\\n    return <LoadingBoundary fallback={Spinner} error={Error}>\\n        {({user}) => <img src={user.avatar} />}\\n    </LoadingBoundary>;\\n}\\n\\n\\n\")), mdx(\"p\", null, \"Read more: \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/data/RequestHoc\"\n  }), \"RequestHoc\"), \", \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/data/Message\"\n  }), \"Message\"), \", \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/data/RequestState\"\n  }), \"RequestState\")));\n}\n;\nMDXContent.isMDXComponent = true;","fields":{"slug":"tutorial/getting-started/"},"headings":[{"depth":2,"value":"Installation"},{"depth":2,"value":"Setup"},{"depth":3,"value":"1. Schema"},{"depth":3,"value":"2. API"},{"depth":3,"value":"3. Connect to react"},{"depth":3,"value":"4. Make a Request"}],"frontmatter":{"title":"Getting Started"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"7c3d8713-7af5-515a-955d-76b707e9a0ab"}}}