{"componentChunkName":"component---src-templates-post-jsx","path":"/building-a-blog-using-gatsby-2","result":{"data":{"mdx":{"frontmatter":{"slug":"building-a-blog-using-gatsby-2","title":"Building a Blog with Gatsby - 2","date":"10 December, 2019","image":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wgARCAALABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAMC/8QAFwEAAwEAAAAAAAAAAAAAAAAAAAEDBP/aAAwDAQACEAMQAAABjWDdbbBn/8QAGhAAAQUBAAAAAAAAAAAAAAAAEQABAxIgIf/aAAgBAQABBQIcESeuP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EAB4QAAEBCQAAAAAAAAAAAAAAAAEAAhEgISIxMoGR/9oACAEBAAY/AhULbesmuKRMH//EABwQAQACAQUAAAAAAAAAAAAAAAEAESAhQVFh8f/aAAgBAQABPyFFxyityeChDrDsw//aAAwDAQACAAMAAAAQeM//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAVEQEBAAAAAAAAAAAAAAAAAAAQEf/aAAgBAgEBPxCH/8QAHBABAAICAwEAAAAAAAAAAAAAAREhAKEgQVGB/9oACAEBAAE/EIkqpvgU+J5RkvTq3hEiVsd8P//Z","aspectRatio":1.7751479289940828,"src":"/static/4f3a6d4ee8f3997901b22d64e93a1056/897d1/gatsby-image.jpg","srcSet":"/static/4f3a6d4ee8f3997901b22d64e93a1056/5398f/gatsby-image.jpg 200w,\n/static/4f3a6d4ee8f3997901b22d64e93a1056/26a4d/gatsby-image.jpg 400w,\n/static/4f3a6d4ee8f3997901b22d64e93a1056/897d1/gatsby-image.jpg 600w","srcWebp":"/static/4f3a6d4ee8f3997901b22d64e93a1056/a213b/gatsby-image.webp","srcSetWebp":"/static/4f3a6d4ee8f3997901b22d64e93a1056/04c4c/gatsby-image.webp 200w,\n/static/4f3a6d4ee8f3997901b22d64e93a1056/ebea1/gatsby-image.webp 400w,\n/static/4f3a6d4ee8f3997901b22d64e93a1056/a213b/gatsby-image.webp 600w","sizes":"(max-width: 600px) 100vw, 600px"}}},"excerpt":"This is the second part of the Building A Blog with Gatsby series. Let's go🚀"},"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  \"slug\": \"building-a-blog-using-gatsby-2\",\n  \"date\": \"10 December, 2019\",\n  \"dateForSorting\": \"2019-12-10T20:06:20.249Z\",\n  \"title\": \"Building a Blog with Gatsby - 2\",\n  \"tags\": [\"gatsby\", \"react\", \"JavaScript\"],\n  \"excerpt\": \"This is the second part of the Building A Blog with Gatsby series. Let's go🚀\",\n  \"image\": \"/assets/gatsby-image.jpeg\"\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, \"Welcome to the second part of the Building A Blog With Gatsby Series.\"), mdx(\"p\", null, \"In the first section, we built a simple Gatsby site that supported navigation between two pages.\"), mdx(\"p\", null, \"In this section, we are going to create blog posts in \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \".mdx\"), \" and grab data from each post using GraphQL.\"), mdx(\"p\", null, \"Let's Go! \\uD83D\\uDE80\\uD83D\\uDE80\\uD83D\\uDE80\"), mdx(\"h2\", null, \"MDX\"), mdx(\"p\", null, \"Let's talk about \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"mdx.\"), \" MDX is a file format that allows you to place React components (JSX) in markdown files. That's simply what it is.\"), mdx(\"p\", null, \"Now we will create a folder called Blog Posts in the root directory of our project. Inside this folder, create 3 files with the extension \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \".mdx\"), \". For simplicity sake, I'll call my files first.mdx, second.mdx and third.mdx. Our project's structure should look like this\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"text\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-text\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"- cache\\n- src\\n- node_modules\\n- public\\n- Blog Posts\\n    - first.mdx\\n    - second.mdx\\n    - third.mdx\"))), mdx(\"h3\", null, \"Plugins\"), mdx(\"p\", null, \"Now out of the box, gatsby doesn't support mdx. We will have to install a plugin to use mdx. Plugins are an important part of Gatsby and they give gatsby extra strength to do more things.\"), mdx(\"p\", null, \"The plugin we will use is \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"gatsby-plugin-mdx\"), \".\"), mdx(\"p\", null, \"gatsby-plugin-mdx allows us to use mdx files in our Gatsby project.\"), mdx(\"p\", null, \"To install gatsby-plugin-mdx with npm, run this in your terminal:\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"text\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-text\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"npm install --save gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react\"))), mdx(\"p\", null, \"To install with yarn, \"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"text\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-text\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"yarn add gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react\"))), mdx(\"p\", null, \"Now that you have installed the plugin, we have to add the plugin to our gatsby project. To do that, open the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"gatsby-config.js\"), \" file. The gatsby-config file is where we add all our gatsby plugins and metadata. If you initialised your project using the method I showed in the last article, there should be a plugins property whose value is an array of plugins. To add our plugin, append the following object to the array.\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"javascript\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n    resolve\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token template-string\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token template-punctuation string\"\n  }), \"`\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token string\"\n  }), \"gatsby-plugin-mdx\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token template-punctuation string\"\n  }), \"`\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n      options\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n        defaultLayouts\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n          \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"default\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" require\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function\"\n  }), \"resolve\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"(\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token template-string\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token template-punctuation string\"\n  }), \"`\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token string\"\n  }), \"./src/components/layout.js\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token template-punctuation string\"\n  }), \"`\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \")\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n        \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\")))), mdx(\"p\", null, \"As you can see the value of the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"resolve\"), \" property is the name of the plugin. We also have an options property which allows us to set the layout of our \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \".mdx\"), \" files.\"), mdx(\"p\", null, \"The layout we will be using is the same layout component we used for our index page, so the body of our markdown files will be in between the header and footer.\"), mdx(\"h3\", null, \"Adding our blog posts to Gatsby's data layer\"), mdx(\"p\", null, \"Now we have to make the data in our .mdx files accessible to Gatsby. Gatsby uses GraphQL to query data but GraphQL can't access our mdx files to query mdx-specific data by default. We have to expose the mdx files to Gatsby's data layer. To do that, we have to use the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"gatsby-source-filesystem\"), \" plugin. \"), mdx(\"p\", null, \"If you initialised your project via the method we used in the last article, gatsby-source-filesystem should be already installed. Otherwise, you can install it via:\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"text\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-text\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"npm install --save gatsby-source-filesystem\"))), mdx(\"p\", null, \"Once you have installed it, open the gatsby-config file and append the following object to the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"plugins\"), \" array.\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"javascript\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n      resolve\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"gatsby-source-filesystem\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n      options\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n        name\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"Blog Posts\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n        path\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token template-string\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token template-punctuation string\"\n  }), \"`\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token interpolation\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token interpolation-punctuation punctuation\"\n  }), \"${\"), \"__dirname\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token interpolation-punctuation punctuation\"\n  }), \"}\")), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token string\"\n  }), \"/Blog Posts\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token template-punctuation string\"\n  }), \"`\")), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\")))), mdx(\"p\", null, \"In the options, we can specify a \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"name\"), \" for what data we want to expose and the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"path\"), \" to the data. You can name it whatever you like and the path to our blog posts is \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Blog Posts\"), \" in the root directory.\"), mdx(\"p\", null, \"Once you have done that, restart your server by killing the previous one and running \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"npm run develop\"), \" again.\"), mdx(\"h3\", null, \"Writing our markdown\"), mdx(\"p\", null, \"Before we start grabbing data from our markdown files, we need to put content in them.\"), mdx(\"p\", null, \"In markdown, we have something called \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Frontmatter\"), \" which allows you to add something similar to metadata for your markdown file. You can add the title of the file, date it was written, Author, Tags and so on.\"), mdx(\"p\", null, \"To add stuff to our frontmatter in \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"first.mdx\"), \":\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"markdown\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-markdown\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-markdown\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token hr punctuation\"\n  }), \"---\"), \"\\ntitle: First Blog Post\\nAuthor: Faruq\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token title important\"\n  }), \"Topic: Gatsby\\n\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"---\"))))), mdx(\"p\", null, \"We enclose whatever we want to place in our frontmatter between (---). This tells mdx that whatever is between that (---) is frontmatter.\"), mdx(\"p\", null, \"As you can see, our title is First Blog Post, author is Faruq and Topic is Gatsby.\"), mdx(\"p\", null, \"We also going to add some lorem ipsum text to fill the body\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"markdown\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-markdown\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-markdown\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token hr punctuation\"\n  }), \"---\"), \"\\ntitle: First Blog Post\\nAuthor: Faruq\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token title important\"\n  }), \"Topic: Gatsby\\n\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"---\")), \"\\n\\nThis is my first blog post.\\n\\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tristique ligula ac sollicitudin egestas.\\nCurabitur molestie tincidunt nunc. Cras in molestie neque, quis tincidunt libero.\\nCurabitur quis metus vel purus molestie finibus. Vivamus ut viverra dolor. \\nMorbi mattis magna sed lacus facilisis, sed aliquam leo gravida. \\nCras sagittis ultricies purus sit amet tempus. Integer imperdiet non tellus in gravida.\"))), mdx(\"p\", null, \"Now, fill the other two mdx files with the similar content.\"), mdx(\"p\", null, \"Once that's done, we'll start querying data.\"), mdx(\"h3\", null, \"Querying Data with GraphQL\"), mdx(\"p\", null, \"To query data in Gatsby, we are provided with GraphiQL, an in-browser IDE, that allows you to explore your site's data and schema.\"), mdx(\"p\", null, \"To access your GraphiQL, make sure your server is running and visit \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"http://localhost:8000/___graphql\"\n  }), \"this link\"), \"\\nYou should be taken to a page like this:\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"590px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/502c6fb9b9b8c99e0c4302803b6571f1/ad17f/graphiql.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"38.095238095238095%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wgARCAAIABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAEG/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAB3lCA/8QAFxAAAwEAAAAAAAAAAAAAAAAAAAERQf/aAAgBAQABBQLIiH//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAUEAEAAAAAAAAAAAAAAAAAAAAQ/9oACAEBAAY/An//xAAZEAACAwEAAAAAAAAAAAAAAAAAARExQWH/2gAIAQEAAT8hje2ckNJo/9oADAMBAAIAAwAAABDwD//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABkQAQACAwAAAAAAAAAAAAAAAAERIQAQcf/aAAgBAQABPxCCQTTrXHoDP//Z')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"GraphiQL\",\n    \"title\": \"GraphiQL\",\n    \"src\": \"/static/502c6fb9b9b8c99e0c4302803b6571f1/59653/graphiql.jpg\",\n    \"srcSet\": [\"/static/502c6fb9b9b8c99e0c4302803b6571f1/de1f9/graphiql.jpg 148w\", \"/static/502c6fb9b9b8c99e0c4302803b6571f1/9963e/graphiql.jpg 295w\", \"/static/502c6fb9b9b8c99e0c4302803b6571f1/59653/graphiql.jpg 590w\", \"/static/502c6fb9b9b8c99e0c4302803b6571f1/ad17f/graphiql.jpg 840w\"],\n    \"sizes\": \"(max-width: 590px) 100vw, 590px\",\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"This is where we can make different queries and see the results instantly before using them in our code.\"), mdx(\"p\", null, \"Making queries is easy though it might take some time to get used to.\"), mdx(\"p\", null, \"First, we will query for all our MDX files. We will also use the data in the frontmatter of each of them.\"), mdx(\"p\", null, \"Simply, type this in the GraphiQL\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"graphql\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-graphql\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-graphql\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n  allMdx \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n    nodes \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n      frontmatter \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n        Author\\n        Topic\\n        title\\n      \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\")))), mdx(\"p\", null, \"As you can see, we queried for all the MDX files exposed to the data layer using \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"allMdx\"), \". We then queried for the nodes which gives us an array of all mdx files but only the specific data we requested for which, in this case, is frontmatter. Under the frontmatter, we queried for the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Author\"), \", \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Topic\"), \" and \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Title.\")), mdx(\"p\", null, \"You should a result like this\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"graphql\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-graphql\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-graphql\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"data\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"allMdx\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"nodes\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"[\"), \"\\n        \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n          \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"frontmatter\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n            \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"Author\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"Faruq\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n            \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"Topic\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"Gatsby\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n            \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"title\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"First Blog Post\\\"\"), \"\\n          \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), \"\\n        \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n        \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n          \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"frontmatter\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n            \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"Author\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"Author 2\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n            \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"Topic\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"React\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n            \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"title\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"Second Blog Post\\\"\"), \"\\n          \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), \"\\n        \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n        \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n          \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"frontmatter\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n            \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"Author\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"Author 3\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n            \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"Topic\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"Web Development\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n            \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"title\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"Third Blog Post\\\"\"), \"\\n          \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), \"\\n        \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"]\"), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\")))), mdx(\"p\", null, \"As you can see, graphql pulled the Author, Topic and Title of all our MDX files.\"), mdx(\"p\", null, \"Now we are going to grab this data into our code and use it to generate post previews in the next section of this series.\"), mdx(\"p\", null, \"Stay Tuned.\"), mdx(\"p\", null, \"If you have any questions, you can reach out to me on Twitter.\"));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"building-a-blog-using-gatsby-2"}}}