Gridsome is a static site generator that is built on top of GraphQL.

While it is easy to connect to any GraphQL resource, or use files as source for enriching your website with data, there was no out of the box solution to use REST APIs with Gridsome without requiring to write extra code.

I´ve decided to develop a small source extension that provides a configurable interface to connect to any REST API to pull data into the GraphQL layer of Gridsome and use the data to enhance your sites.

Gridsome REST Source

The Gridsome extension Gridsome REST Source provides two main types of configuration.

Static

Data will be pulled and stored in the static data node and can be queried using Gridsome´s tag.

This can be used to store global settings or any non-relational data.

https😕/gist.githubusercontent.com/mklueh/6a988fd01b1821acfd9277d32a70db16/raw/12d46be1d7cd51cd65862c1bf0959f078f76fc2f/demo-settings-api.json

Will deliver this data:

{
  settings: {
    metaField: "This text is loaded from the REST API into Metadata"
  }
}

Can be configured like this (notice the isStatic flag):

module.exports = {
    siteName: 'Gridsome Source Rest',
    siteUrl: 'https://mklueh.github.io',
    pathPrefix: '/gridsome-source-rest',
    transformers: {
        remark: {
            externalLinksTarget: '_blank',
            externalLinksRel: ['nofollow', 'noopener', 'noreferrer'],
            plugins: []
        }
    },
    plugins: [
        {
            use: 'gridsome-source-rest',
            options: {
                endpoint: 'https://gist.githubusercontent.com/mklueh/6a988fd01b1821acfd9277d32a70db16/raw/12d46be1d7cd51cd65862c1bf0959f078f76fc2f/demo-settings-api.json',
                typeName: 'settings',
                isStatic: true
            }
        },

    ],
    templates: {
        BlogPost: '/blog/:title'
    }
}

And used with the static code block anywhere:

<static-query>
    query{
      metadata{
        settings{
          metaField
        }
      }
    }
</static-query>

Collection

Data will be pulled and stored in a new collection that can be named as you want and can be queried using Gridsome´s tag.

It can be used for list-like data containing multiple elements of the same type.

Example:

I´ve used Github to create a fake API returning a JSON string with some elements

https😕/gist.githubusercontent.com/mklueh/ee707de96586f4b0776165facf9a5f00/raw/13291cecd49d8dcd072f9d252b25bf080e21f211/demo-posts-api.json

Will deliver this data:

[
  {
    id: 1,
    title: "How to use Gridsome with REST APIs?",
    link: "https://overflowed.dev",
    author: "Marian Klühspies",
  },
  {
    id: 2,
    title: "How to recommend users related posts?",
    link: "https://github.com/mklueh/gridsome-plugin-recommender",
    author: "Marian Klühspies",
  },
]

And can be configured to be used like this:

module.exports = {
    siteName: 'Gridsome Source Rest',
    siteUrl: 'https://mklueh.github.io',
    pathPrefix: '/gridsome-source-rest',
    transformers: {
        remark: {
            externalLinksTarget: '_blank',
            externalLinksRel: ['nofollow', 'noopener', 'noreferrer'],
            plugins: []
        }
    },
    plugins: [
        {
            use: 'gridsome-source-rest',
            options: {
                endpoint: 'https://gist.githubusercontent.com/mklueh/ee707de96586f4b0776165facf9a5f00/raw/13291cecd49d8dcd072f9d252b25bf080e21f211/demo-posts-api.json'
                typeName: 'BlogPost'
            }
        }
    ],
    templates: {
        BlogPost: '/blog/:title'
    }
}

And used in page queries like this:

<page-query>
    query {
      allBlogPost {
        edges {
          node {
            id
            title
            author
          }
        }
      }
    }
</page-query>

The full example can be seen here in the GitHub repository

https😕/github.com/mklueh/gridsome-source-rest/tree/master/example