Gatsby
Up and Running with Gatsby: Markdown & MDX

Looking at Files in GraphiQL

PRO

Let's use GraphiQL to visually see the result of loading files.

In the last video, we added our first Markdown file inside of /content/events. We also set up gatsby-source-filesystem to pull those files into our GraphQL data.

It can be hard to wrap your head around what's happening here, so let's use the GraphiQL Explorer. Open a new browser tab and navigate to http://localhost:8000/___graphql.

You'll see the three panes with the Explorer pane on the left. Notice that we now have allFile and file entries on the graph (which comes from gatsby-source-filesystem, as well as allMdx and mdx (which comes from gatsby-plugin-mdx).

Follow along with the video so you can start to see how the MDX files we've created correspond to data in GraphQL. You'll see the compiled body as well as the frontmatter and raw Markdown. This means we can query for this data and pass it into components in React.

In the next video, we'll start to learn how to create pages from the Markdown files in the /content/events folder.