Gridsome: Add Data From Local Files

Image for post
Image for post

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!

Written by

Full stack developer, specialized in JS development and architecture — https://bordi.fr

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store