Source plugins

Now that we learned how to create pages and access dynamic data with GraphQL, we can start fetching some data from external sources.

Source plugins are the tools that can handle this job.

Every plugin is specialized in getting data from a different source.

Note

There are a lot of plugins for almost every need. You can find a complete list of plugins on GatsbyJS official website.

Let us start with a basic one, gatsby-source-filesystem: a plugin that transforms files into GraphQL nodes.

npm install --save gatsby-source-filesystem

After that, we need to enable the plugin in our project. To do this, we need to add it into gatsby-config.js file.

module.exports = {
    siteMetadata: {
        title: 'Gatsby Default Starter',
    },
    plugins: [
        'gatsby-plugin-react-helmet',
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `src`,
                path: `${__dirname}/src`,
            },
        },
        'gatsby-transformer-sharp',

Now restart the development server.

If we open GraphiQL page, we will see new possible queries.

Exercise

Create a new page called "files-list.js" that displays a list of all files with some informations (path, size, extension) found with some query.

Solution

import React from "react"
import { graphql } from "gatsby"
import Header from '../components/header';

import Layout from '../components/layout'

export default ({ data }) => {
  return (
    <Layout>
      <h1>Here is a list of files</h1>
      <table>
        <thead>
          <tr>
            <th>relativePath</th>
            <th>prettySize</th>
            <th>extension</th>
            <th>birthTime</th>
          </tr>
        </thead>
        <tbody>
          {data.allFile.edges.map(({ node }, index) => (
            <tr key={index}>
              <td>{node.relativePath}</td>
              <td>{node.prettySize}</td>
              <td>{node.extension}</td>
              <td>{node.birthTime}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </Layout>
  )
}

export const query = graphql`
  query {
    allFile {
      edges {
        node {
          relativePath
          prettySize
          extension
          birthTime(fromNow: true)
        }
      }
    }
  }
`