{"componentChunkName":"component---src-components-posts-page-layout-js","path":"/building-a-blog-with-gatsby-and-mdx","result":{"data":{"mdx":{"id":"c06c77f2-e2b9-5989-b886-15960a7d20e3","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\": \"Building a blog with Gatsby and MDX\",\n  \"slug\": \"building-a-blog-with-gatsby-and-mdx\",\n  \"date\": \"2020-08-26\",\n  \"author\": \"Adam Goth\",\n  \"preview\": \"I've long considered trying out blogging. Now, I'm finally giving it a go. Here's how I built my blog using Gatsby and MDX.\",\n  \"categories\": [\"building\", \"blogging\"],\n  \"keywords\": [\"javascript\", \"gatsby\", \"web development\", \"mdx\", \"react\", \"blog\"]\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, \"I've long considered trying out blogging. Now, I'm finally giving it a go.\"), mdx(\"p\", null, \"This first post is all about how I built this blog feature into my site using\\nGatsby and MDX. For background context, I built this site about two years ago\\nusing Gatsby. Given that it is essentially a single landing page with various\\nsocial links, using Gatsby wasn't entirely necessary, but I had been looking for\\nan excuse to try it out. Fast forward two years, I've decided to make further\\nuse of Gatsby and leverage it to add a blog to the site. Here's how I went about\\nit.\"), mdx(\"h3\", null, \"Overview\"), mdx(\"p\", null, \"The basic idea behind this project is to use Gatsby plugins and APIs to\\ndynamically generate blog pages from MDX files within our project. After our\\nproject is configured, adding a new blog post will be as easy as creating a new\\nMDX file. The plugins we'll use include the\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.gatsbyjs.com/plugins/gatsby-source-filesystem/\"\n  }), \"gatsby-source-filesystem\"), \"\\nplugin and\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/\"\n  }), \"gatsby-plugin-mdx\"), \" along\\nwith the \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.gatsbyjs.com/docs/node-apis/#createPages\"\n  }), \"createPages\"), \"\\nGatsby Node API. After setting those up, we'll then take a brief look at how to\\ntemplate our posts and style our MDX elements. So how does all this work? Let's\\njump in.\"), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Note: This blog post assumes basic Gatsby and React knowledge. If you are\\nunfamiliar with Gatsby, there is a\\n\", mdx(\"a\", _extends({\n    parentName: \"em\"\n  }, {\n    \"href\": \"https://www.gatsbyjs.com/tutorial/\"\n  }), \"great tutorial series\"), \" available on\\nGatsby's site to get you up to speed. Additionally, I will not be setting the\\nproject up step by step, but will provide enough information that you could\\neasily integrate a similar blog feature into any existing Gatsby project.\")), mdx(\"h3\", null, \"Setting up\"), mdx(\"p\", null, \"Our first requirement is the\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.gatsbyjs.com/plugins/gatsby-source-filesystem/\"\n  }), \"gatsby-source-filesystem\"), \"\\nplugin. What this plugin allows us to do is to use our project's filesystem as a\\nsource for data in our application. We will create a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"posts\"), \" directory that will\\nstore our MDX files. We will then use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-source-filesystem\"), \" to query for\\nthose files and convert the content into blog posts.\"), mdx(\"p\", null, \"Our second requirement is going to be the\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/\"\n  }), \"gatsby-plugin-mdx\"), \" plugin.\\nThis is the official integration for using MDX within Gatsby. If you are\\nunfamiliar with MDX, it is essentially a file format that allows you to combine\\nstandard \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://guides.github.com/features/mastering-markdown/\"\n  }), \"Markdown\"), \" with\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://reactjs.org/docs/introducing-jsx.html\"\n  }), \"JSX\"), \". I won't go into much\\ndetail but it is pretty neat, especially if you are a React developer and are\\nused to writing JSX. You can read more about \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://mdxjs.com/\"\n  }), \"MDX\"), \" here.\\nThis is the file format we'll use to write our posts.\"), mdx(\"p\", null, \"After\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/#installation\"\n  }), \"installing\"), \"\\nboth plugins, we can configure them in our \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-config.js\"), \" file as follows.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"module.exports = {\\n  ...,\\n  plugins: [\\n    {\\n      resolve: `gatsby-source-filesystem`,\\n      options: {\\n        name: `posts`,\\n        path: `${__dirname}/src/posts/`,\\n      },\\n    },\\n    `gatsby-plugin-mdx`,\\n  ],\\n}\\n\")), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"path\"), \" value here is \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src/posts/\"), \" which is where I will store my MDX files.\\nThis configuration tells Gatsby to query this particular directory for data.\"), mdx(\"p\", null, \"Now that we have our plugins configured, our project is ready to query for MDX\\nfiles and turn them into blog pages. But just how do we tell it to do that?\"), mdx(\"p\", null, \"The answer is Gatsby's\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.gatsbyjs.com/docs/node-apis/#createPages\"\n  }), \"createPages\"), \" API. If you\\nare familiar with Gatsby, you know that by default, Gatsby core creates pages\\nfor any React files that it finds in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src/pages/\"), \" directory. Similarly, this\\nAPI allows us to instruct Gatsby to create additional pages based on the\\ncriteria we specify. When all is said and done, our \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-node.js\"), \" file\\n(located in the project's root directory) will look as follows:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"const path = require(\\\"path\\\")\\n\\nexports.createPages = async ({ graphql, actions, reporter }) => {\\n  // destructure the createPage function from the actions object\\n  const { createPage } = actions\\n\\n  const result = await graphql(`\\n    query {\\n      allMdx {\\n        edges {\\n          node {\\n            id\\n            frontmatter {\\n              slug\\n            }\\n          }\\n        }\\n      }\\n    }\\n  `)\\n\\n  if (result.errors) {\\n    reporter.panicOnBuild('\\uD83D\\uDEA8  ERROR: Loading \\\"createPages\\\" query')\\n  }\\n\\n  // create blog post pages\\n  const posts = result.data.allMdx.edges\\n\\n  // call `createPage` for each result\\n  posts.forEach(({ node }, index) => {\\n    createPage({\\n      path: node.frontmatter.slug,\\n      component: path.resolve(`./src/components/posts-page-layout.js`),\\n      // you can use the values in this context in\\n      // our page layout component\\n      context: { id: node.id },\\n    })\\n  })\\n}\\n\")), mdx(\"p\", null, \"In the code above, we first query our filesystem for MDX files starting on\\nline 7. These will be located in the directory we specified in our earlier\\nconfiguration. Each node in our query results is an MDX file that was found.\"), mdx(\"p\", null, \"Then starting on line 30, for each MDX file (or \\\"post\\\"), we call \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"createPage\"), \",\\npassing it a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"path\"), \" value which will serve as our post's URL, a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"component\"), \"\\nvalue which will be used as our page template, and a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"context\"), \" object which can\\nhold additional data to be made available to us within our template component.\"), mdx(\"p\", null, \"You may have noticed that on line 13, within each file result, we expect\\nsomething called \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"frontmatter\"), \".\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.gatsbyjs.com/docs/adding-markdown-pages/#frontmatter-for-metadata-in-markdown-files\"\n  }), \"Frontmatter\"), \"\\nis a set of key-value pairs that can be used to provide additional data about\\nthe file. In our case, we're going to use frontmatter for storing information\\nabout the blog, including details such as our posts title, slug, date, author,\\nand more. Frontmatter is denoted in a Markdown file by three dashes at the start\\nand end of a block.\"), mdx(\"h3\", null, \"Creating posts from MDX files\"), mdx(\"p\", null, \"Now that the project is configured to dynamically create pages from MDX files,\\nwe need to create our MDX file within the directory we specified our\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-source-filesystem\"), \" configuration (\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src/posts/\"), \"). If you are using a\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"slug\"), \" frontmatter key-value pair for your \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"path\"), \" value as we are, the name of\\nthe file is not so important, as long as it is an MDX file. For consistency, I\\nwill give it the same name as the slug\\n(\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src/posts/building-a-blog-with-gatsby-and-mdx.mdx\"), \"). Make special note of the\\nfrontmatter at the top of the file, located between the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"---\"), \" lines. The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"slug\"), \"\\nvalue is what will make your post available at \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"http://<yourdomain>/<slug>\"), \". We\\nwill make use of the rest of the frontmatter data in our page template.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-markdown\"\n  }), \"---\\ntitle: Building a blog with Gatsby and MDX\\nslug: building-a-blog-with-gatsby-and-mdx\\nauthor: Adam Goth\\n---\\n\\nBlog content here...\\n\")), mdx(\"p\", null, \"The last missing piece that our \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"createPages\"), \" function expects is the template\\ncomponent that we specified as the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"component\"), \" value in our \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"createPage\"), \" call.\\nThe value we passed is \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"./src/components/posts-page-layout.js\"), \", so let's go\\nahead and create that file.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"import React from \\\"react\\\"\\nimport { graphql } from \\\"gatsby\\\"\\nimport { MDXProvider } from \\\"@mdx-js/react\\\"\\nimport { MDXRenderer } from \\\"gatsby-plugin-mdx\\\"\\nimport Layout from \\\"../components/layout\\\"\\nimport components from \\\"./mdxComponents\\\"\\n\\nexport default function PageTemplate({ data: { mdx } }) {\\n  return (\\n    <Layout>\\n      <div style={{ padding: \\\"0 1rem\\\", marginBottom: \\\"10rem\\\" }}>\\n        <h1>{mdx.frontmatter.title}</h1>\\n        <h4\\n          style={{\\n            color: \\\"gray\\\",\\n            fontWeight: \\\"normal\\\",\\n          }}\\n        >{`${mdx.frontmatter.date} by ${mdx.frontmatter.author}`}</h4>\\n        <MDXProvider components={components}>\\n          <MDXRenderer>{mdx.body}</MDXRenderer>\\n        </MDXProvider>\\n      </div>\\n    </Layout>\\n  )\\n}\\n\\nexport const pageQuery = graphql`\\n  query BlogPostQuery($id: String) {\\n    mdx(id: { eq: $id }) {\\n      id\\n      body\\n      frontmatter {\\n        title\\n        date\\n        author\\n      }\\n    }\\n  }\\n`\\n\")), mdx(\"p\", null, \"There are a few things to make note of here. If you are familiar with Gatsby and\\nReact, nothing should look too out of the ordinary here. Starting on line 27, we\\nare using a graphQL query called \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"BlogPostQuery\"), \" to query our filesystem for an\\nMDX file with the matching \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"id\"), \". The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"id\"), \" is generated in our \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"createPages\"), \"\\nfunction and is passed via the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"context\"), \" parameter to our page template\\ncomponent. From the results, we get our \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"body\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"frontmatter\"), \" data for the\\nblog post from our MDX file. We can then access the query data in our component\\nvia our component's props (see line 8 above).\"), mdx(\"h3\", null, \"Styling MDX content\"), mdx(\"p\", null, \"If we wanted to render the body and frontmatter data as plain HTML elements\\nwithin our JSX, we could go ahead and do that within our \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"PageTemplate\"), \"\\ncomponent above. In fact, that is how the title is being rendered on line 12.\\nBut \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@mdx-js/react\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-plugin-mdx\"), \" provide us with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<MDXProvider />\"), \"\\nand \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<MDXRenderer />\"), \" components. These components allow us to customize the\\nstyle of our MDX content. Let's take a look at how.\"), mdx(\"p\", null, \"In the above code block, we're importing \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"components\"), \" from \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"'./mdxComponents'\"), \"\\nand passing it to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<MDXProvider />\"), \". This \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"components\"), \" prop on \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<MDXProvider />\"), \"\\nallows us to pass customized components for each type of Markdown element we may\\nexpect to render.\"), mdx(\"p\", null, \"For example, in Markdown and MDX, a standard line of text gets rendered as a\\nparagraph (\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<p>\"), \") element. But for my posts, I want my paragraph elements to\\ncontain a certain line height different from the default. I also want to provide\\nmy own margin and width properties. The way this can be accomplished is by\\ncreating a custom \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"paragraph\"), \" MDX component and passing it into the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"components\"), \"\\nprop to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"MDXProvider />\"), \".\"), mdx(\"p\", null, \"In my \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src/components/mdxComponents\"), \" directory, I have a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"paragraph.js\"), \" file\\nthat looks as follows:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"import React from \\\"react\\\"\\n\\nexport default ({ children }) => (\\n  <p style={{ lineHeight: \\\"1.7\\\", maxWidth: \\\"750px\\\", margin: \\\"30px auto\\\" }}>\\n    {children}\\n  </p>\\n)\\n\")), mdx(\"p\", null, \"In the same \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src/components/mdxComponents\"), \" directory, I also have an \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"index.js\"), \"\\nfile which exports the component from \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"paragraph.js\"), \" as well as all the other\\nelements I have created customized MDX components for. I then import that as an\\nobject named \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"components\"), \" and pass it to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<MDXProvider />\"), \". The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"body\"), \" of our\\nMDX file data is then passed as the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"children\"), \" prop to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<MDXRenderer />\"), \" on line\\n20, which then makes use of these components when it renders the MDX content. In\\naddition to the paragraph element, a full list of other elements that can be\\ncustomized in MDX can be found\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.gatsbyjs.com/docs/mdx/customizing-components/\"\n  }), \"here\"), \".\"), mdx(\"h3\", null, \"Wrapping up\"), mdx(\"p\", null, \"That concludes the process for how I've built out a blog feature, as well as the\\nvery blog post you are reading. Using Gatsby plugins \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-source-filesystem\"), \"\\nand \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-plugin-mdx\"), \", along with Gatsby's \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"createPages\"), \" API, we are able to\\nuse MDX files to dynamically generate pages for blog posts. Going forward, for\\nmy next post, all I will need to do is write the new MDX file and add it to\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src/posts/\"), \". I eventually plan on adding additional features such as tags,\\ncategories, search, and who knows what else. So if you are interested in that as\\nwell, stay tuned!\"), mdx(\"p\", null, \"If you are interested in viewing the source code for the project, the\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/adamgoth/adamgoth-gatsby\"\n  }), \"repository\"), \" for my site is\\npublicly available on Github.\"), mdx(\"p\", null, \"If you enjoyed this post or found it useful, please consider\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.adamgoth.com%2Fbuilding-a-blog-with-gatsby-and-mdx\"\n  }), \"sharing it on Twitter\"), \".\"), mdx(\"p\", null, \"If you want to stay updated on new posts,\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://twitter.com/intent/follow?original_referer=https%3A%2F%2Fpublish.twitter.com%2F%3FbuttonType%3DFollowButton%26query%3Dhttps%253A%252F%252Ftwitter.com%252Finit_adam%26widget%3DButton&ref_src=twsrc%5Etfw&region=follow_link&screen_name=init_adam&tw_p=followbutton\"\n  }), \"follow me on Twitter\"), \".\"), mdx(\"p\", null, \"If you have any questions, comments, or just want to say hello,\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://twitter.com/messages/compose?recipient_id=33618361\"\n  }), \"send me a message\"), \".\"), mdx(\"p\", null, \"Thanks for reading!\"));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"Building a blog with Gatsby and MDX","date":"2020-08-26","author":"Adam Goth","preview":"I've long considered trying out blogging. Now, I'm finally giving it a go. Here's how I built my blog using Gatsby and MDX.","keywords":["javascript","gatsby","web development","mdx","react","blog"]},"timeToRead":5}},"pageContext":{"id":"c06c77f2-e2b9-5989-b886-15960a7d20e3"}},"staticQueryHashes":["63159454"]}