Creating a Static Site with Gridsome and a REST API Data Source

In this article, we’ll look at how to create a static website using Gridsome, a static site generator that’s based on Vue.js and GraphQL and resembles Gatsby.js in many ways feature-wise. We’ll build a simple site with Gridsome that gets data from a REST API data source.

We’ll get the data from this News API.

Getting Started

To get started, we have to install the Gridsome CLI to create our project. To do this, we run:

$ npm install --global @gridsome/cli

or with Yarn:

$ yarn global add @gridsome/cli

Then we create our Gridsome site by running:

$ gridsome create news-site

Then we go to our news-site directory and run gridsome develop. Next, we open up our new Gridsome project in the browser by going to http://localhost:8080.

Getting Data from a REST API

To get data from a REST API, first we have to add the Axios HTTP client by running:

$ npm i axios

Next, we create a .env file and then add our API key to access the News API:

GRIDSOME_NEWS_API_KEY=your_api_key

Replace your_api_key with your own key that you got from the News API website.

Then we can add the code to retrieve the data from into gridsome.server.js file as follows:

const axios = require('axios')

module.exports = function (api) {
  api.loadSource(async actions => {
    const { data } = await axios.get(`
      http://newsapi.org/v2/top-headlines?country=us&apiKey=${process.env.GRIDSOME_NEWS_API_KEY}`)
    const collection = actions.addCollection({
      typeName: 'Posts'
    })

    for (const item of data.articles) {
      collection.addNode({
        content: item.content,
        title: item.title
      })
    }
  })
}

The code above gets the data from the API and then adds them to a collection so we can get them in any Vue component.

The environment variables from .env are loaded into process.env as a property.

After we change the code, we have to restart the app for the changes in gridsome.server.js to take effect. This is because the fetching is done when the project loads.

Then in index.vue, we change the existing code to:

<template>
  <div>
    <div v-for="edge in $page.allPosts.edges" :key="edge.node.title">
      <h1 v-html="edge.node.title" />
      <div v-html="edge.node.content"></div>
    </div>
  </div>
</template>

<page-query>
query {
  allPosts {
    edges {
      node {
        content
        title
      }
    }
  }
}
</page-query>

Here’s the shape of the returned results from the GraphQL query:

query {
  allPosts {
    edges {
      node {
        content
        title
      }
    }
  }
}

And that’s available in the template so we can just loop through the items as they’re returned from the Gridsome GraphQL API.

If you want to test the query in the GraphQL sandbox, we can go to http://localhost:8080/___explore and then make the same query in the page-query section and check the results.

Then when we go back to http://localhost:8080/, we get the title and content from the News API as we’ve added the items in gridsome.server.js.

We just use the normal v-for for rendering items from the array and v-html to display the raw HTML content from the API data.

Conclusion

As you saw, we can easily get data from a REST API with Gridsome and Axios. The data is fetched when the project loads. Once we fetched the data, we can retrieve them from Gridsome’s own GraphQL API so we can display the items in our template. ✨

Here are 3 more articles you might like if you’re interested in learning more about Gridsome:

• Building a blog with Gridsome: Creating the Blog
• Building a blog with Gridsome: Listing All Posts and Pagination
• How To Build A Plugin With Gridsome