Gridsome: Add Data From Local Files

With Gridsome you can fetch data from external APIs or local files and store it in a local database. Then with GraphQL you can query, filter this data and use it in your components.

I’m gonna give you an example with a local JSON file:

It’s pretty similar to the way you load data from external APIs, except you don’t need to use Axios or to do any HTTP request. Instead, you just load your JSON file on Gridsome build and put the data in a contentType object.

Once your contentType is populated, you can easily query it through GraphQL in any vue component.

And what if you want to filter your posts in a specific way? Just add a filter argument to your query:

That’s all, it’s pretty simple but powerful!

Full stack JS developer —

Full stack JS developer —