Tutorial
Creating a Static Site with Gridsome and a REST API Data Source
While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.
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: