{"componentChunkName":"component---src-templates-blog-post-template-js","path":"/2018/11/25/graphcms-to-gatsby/","result":{"data":{"mdx":{"id":"02084239-2953-5445-b005-6722c79738b4","frontmatter":{"title":"Get your GraphCMS data into Gatsby","date":"2018 November 25th","cover":{"id":"21af001d-f133-5ba5-8503-74d594235555","publicURL":"/static/cover-9193333a35f907e5554c7605193d1c2b.jpg"}},"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  \"date\": \"2018-11-25T00:00:00.000Z\",\n  \"title\": \"Get your GraphCMS data into Gatsby\",\n  \"tags\": [\"information\", \"learning\", \"guide\", \"gatsby\", \"getting started\", \"graphql\", \"graphcms\"],\n  \"published\": true,\n  \"cover\": \"./cover.jpg\",\n  \"coverCredit\": \"Photo by Edu Lauton on Unsplash\"\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 YouTube = makeShortcode(\"YouTube\");\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, \"Let\\u2019s set up Gatsby to pull data from GraphCMS.\"), mdx(YouTube, {\n    youTubeId: \"S9JeASI5tck\",\n    mdxType: \"YouTube\"\n  }), mdx(\"p\", null, \"This will be a walk-through of setting up some basic data on the\\nheadless CMS, GraphCMS and then querying that data in Gatsby.\"), mdx(\"h2\", {\n    \"id\": \"1-set-up-graphcms\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#1-set-up-graphcms\",\n    \"aria-label\": \"1 set up graphcms permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"1. Set up GraphCMS\"), mdx(\"p\", null, \"Set yourself up with a GraphCMS account at\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://app.graphcms.com/signup\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"https://app.graphcms.com/signup\"), \" and select the developer plan.\"), mdx(\"h2\", {\n    \"id\": \"2-define-data\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#2-define-data\",\n    \"aria-label\": \"2 define data permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"2. Define Data\"), mdx(\"p\", null, \"Create a new project and add in some data to query.\"), mdx(\"p\", null, \"Select the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Create new project\"), \" option, call it what you like, in\\nthis example it\\u2019s going to be a list of projects, so I\\u2019m calling it\\n\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Project List\"), \".\"), mdx(\"p\", null, \"In the side bar select the Schema and create a model, in this case\\n\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Project\"), \". In the project model we\\u2019re going to have a \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Title\"), \" and a\\n\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Description\"), \".\"), mdx(\"p\", null, \"Select the fields from the tray on the right by clicking the\\n\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"FIELDS\"), \" tab and dragging and dropping them into the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Project\"), \"\\nmodel we created.\"), mdx(\"h2\", {\n    \"id\": \"3-configure-the-graphcms-public-api\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#3-configure-the-graphcms-public-api\",\n    \"aria-label\": \"3 configure the graphcms public api permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"3. Configure the GraphCMS public API\"), mdx(\"p\", null, \"In the GraphCMS settings set the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Public API Permissions\"), \" to\\n\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"READ\"), \" scroll down to \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Endpoints\"), \" and copy the URL for use in\\nconfiguring Gatsby.\"), mdx(\"p\", null, \"That\\u2019s it for the CMS configuration, now to pull that data into our\\nGatsby frontend!\"), mdx(\"h2\", {\n    \"id\": \"4-configure-gatsby\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#4-configure-gatsby\",\n    \"aria-label\": \"4 configure gatsby permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"4. Configure Gatsby\"), mdx(\"p\", null, \"In you Gatsby project install \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-source-graphql\"), \" and configure it\\nin \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-config.js\"), \" the configuration should looks something like:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"{\\n  resolve: 'gatsby-source-graphql',\\n  options: {\\n    typeName: 'GRAPHCMS',\\n    fieldName: 'graphCmsData',\\n    url: 'https://api-euwest.graphcms.com/v1/projectid/master',\\n  }\\n},\\n\")), mdx(\"p\", null, \"In this example we\\u2019re using \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://codesandbox.io/dashboard/recent\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"codesandbox.io\"), \" for our text editor and\\nthe Gatsby Default Starter you get when selecting Gatsby from the\\nSERVER TEMPLATES available to you in \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://codesandbox.io/dashboard/recent\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"codesandbox.io\")), mdx(\"h2\", {\n    \"id\": \"5-query-the-data-in-gatsby-graphiql\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#5-query-the-data-in-gatsby-graphiql\",\n    \"aria-label\": \"5 query the data in gatsby graphiql permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"5. Query the data in Gatsby GraphiQL\"), mdx(\"p\", null, \"Now that the endpoint is set up we will be able to query the data with\\nGatsby\\u2019s GraphiQL UI, we can shape the query we want to use to display\\nthe data here.\"), mdx(\"p\", null, \"In the preview of our app in \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://codesandbox.io/dashboard/recent\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"codesandbox.io\"), \" if you add \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"___grapgql\"), \"\\nto the end of the url it will bring up the Gatsby GraphiQL UI, here we\\ncan shape the data we want to query.\"), mdx(\"p\", null, \"If we open up some curly brackets \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"{}\"), \" and Cmd+space we\\u2019ll see the\\navailable fields where we can pick out the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"graphCmsData\"), \" field we\\ndefined in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-source-graphql\"), \" plugin.\"), mdx(\"p\", null, \"Selecting the fields we created in GraphCMS then running the query\\nwill display our defined data.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"{\\n  graphCmsData {\\n    projects {\\n      id\\n      status\\n      title\\n      description\\n    }\\n  }\\n}\\n\")), mdx(\"h2\", {\n    \"id\": \"6-display-the-data\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#6-display-the-data\",\n    \"aria-label\": \"6 display the data permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"6. Display the Data\"), mdx(\"p\", null, \"Use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"graphql\"), \" gatsby export to query the data from the GraphCMS\\nendpoint.\"), mdx(\"p\", null, \"In \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"pages/index.js\"), \" add the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"graphql\"), \" export the the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby\"), \" imports.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"import { graphql, Link } from 'gatsby';\\n\")), mdx(\"p\", null, \"At the very bottom define the query:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"export const query = graphql`\\n  {\\n    graphCmsData {\\n      projects {\\n        id\\n        status\\n        title\\n        description\\n      }\\n    }\\n  }\\n`;\\n\")), mdx(\"p\", null, \"You will then be able to access the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"data\"), \" prop in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"IndexPage\"), \"\\ncomponent, we\\u2019ll need to de-structure the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"data\"), \" prop out in the\\narguments of the component:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"const IndexPage = ({ data }) => (\\n\")), mdx(\"p\", null, \"Now we can access the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"data\"), \" passed into the component, we just need a\\nway to visualise it! Luckily for use there\\u2019s a handy component from\\nWes Bos that we can use called \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/wesbos/dump\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Dump\"), \", so create a new \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"dump.js\"), \"\\ncomponent in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"components\"), \" then import it into the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"index.js\"), \" file, and\\nadd in the component to see what\\u2019s inside the props:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"const IndexPage = ({ data }) => (\\n  <Layout>\\n    <h1>Hi people</h1>\\n    <Dump data={data} />\\n    <p>Welcome to your new Gatsby site.</p>\\n    <p>Now go build something great.</p>\\n    <div style={{ maxWidth: '300px', marginBottom: '1.45rem' }}>\\n      <Image />\\n    </div>\\n    <Link to=\\\"/page-2/\\\">Go to page 2</Link>\\n  </Layout>\\n);\\n\")), mdx(\"p\", null, \"The output should be the same as the result of the Gatsby GraphiQL\\nquery we created:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-json\"\n  }), \"data \\uD83D\\uDCA9{\\n \\\"graphCmsData\\\": {\\n  \\\"projects\\\": [\\n   {\\n    \\\"id\\\": \\\"cjoxa812txqoh0932hz0bs345\\\",\\n    \\\"status\\\": \\\"PUBLISHED\\\",\\n    \\\"title\\\": \\\"Project 1\\\",\\n    \\\"description\\\": \\\"Description 1\\\"\\n   },\\n   {\\n    \\\"id\\\": \\\"cjoxa8cctxqqj0932710u39db\\\",\\n    \\\"status\\\": \\\"PUBLISHED\\\",\\n    \\\"title\\\": \\\"Project 2\\\",\\n    \\\"description\\\": \\\"Description 2\\\"\\n   },\\n   {\\n    \\\"id\\\": \\\"cjoxa8pbqxqt309324z9bcddv\\\",\\n    \\\"status\\\": \\\"PUBLISHED\\\",\\n    \\\"title\\\": \\\"Project 3\\\",\\n    \\\"description\\\": \\\"Description 3\\\"\\n   },\\n   {\\n    \\\"id\\\": \\\"cjoxa959vxqvz0932g1jn5ss3\\\",\\n    \\\"status\\\": \\\"PUBLISHED\\\",\\n    \\\"title\\\": \\\"Project 4\\\",\\n    \\\"description\\\": \\\"Description 4\\\"\\n   }\\n  ]\\n }\\n}\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;","excerpt":"Let's set up Gatsby to pull data from GraphCMS. This will be a walk-through of setting up some basic data on the\nheadless CMS, GraphCMS and…","tableOfContents":{"items":[{"url":"#1-set-up-graphcms","title":"1. Set up GraphCMS"},{"url":"#2-define-data","title":"2. Define Data"},{"url":"#3-configure-the-graphcms-public-api","title":"3. Configure the GraphCMS public API"},{"url":"#4-configure-gatsby","title":"4. Configure Gatsby"},{"url":"#5-query-the-data-in-gatsby-graphiql","title":"5. Query the data in Gatsby GraphiQL"},{"url":"#6-display-the-data","title":"6. Display the Data"}]},"timeToRead":2,"fields":{"slug":"/2018/11/25/graphcms-to-gatsby/","editLink":"https://github.com/spences10/thelocalhost.blog/edit/authoring/posts/2018/11/25/graphcms-to-gatsby/index.mdx"}}},"pageContext":{"slug":"/2018/11/25/graphcms-to-gatsby/","previous":{"id":"63186e4b-d541-5997-8218-7d51482e6451","excerpt":"Let's use the React Context API to change theme in an app! But first, some  context ! 🤣 Ok terrible puns aside let's have a look at what the React Context API\nis for and what it does. There's a great one liner from the  React\ndocs ... Context…","frontmatter":{"title":"Using the React Context API  -  getting started","date":"2018-09-08T00:00:00.000Z"},"fields":{"slug":"/2018/09/08/react-context-api/"}},"next":{"id":"a2915b9a-97a3-58a4-b11e-dc22b1cc860d","excerpt":"Let's go through getting styled-components working with the Gatsby\ndefault starter. In this example we're going to use the Gatsby default starter you get\nwith  CodeSandbox  and add in styled-components, so first up, open a\n new CodeSandbox  and…","frontmatter":{"title":"Convert the Gatsby default starter to styled-components","date":"2018-11-29T00:00:00.000Z"},"fields":{"slug":"/2018/11/29/gatsby-starter-to-styled-components/"}}}}}