Take a moment to look back at the advancement of modern JavaScript in the last few years.
There are certainly a few specific frontend techs that pop to your mind—React, Node, Redux, etc.
You can’t argue that Vue.js and GraphQL also made significant waves in the ever-growing JS pond.
Now, what if I told you that the tool leveraging both to build powerful websites and apps has arrived?
Yes, Vue.js finally found its Gatsby, and it’s called Gridsome.
It quickly caught the attention of our team and today I’m putting it to the test by building my own Vue & GraphQL-powered e-commerce app.
This tutorial will highlight some of Gridsome’s neat features while using Airtable as a handcrafted database.
Steps 🛠
- Creating a Gridsome project
- Handling a products sheet in Airtable
- Crafting a Gridsome data source plugin to fetch products from Airtable
- Querying data with GraphQL
- Building Vue.js views & listing
- Adding the buy button
First, a bit of context.
Intro to Gridsome: Leveraging Vue.js & GraphQL
Please don’t feel ignorant if this is the first time you’ve read about Gridsome as it’s only a few months old. Though, spoiler alert, you’ll probably hear about it more and more in the months to come.
It’s a Vue-based static site generator that connects to any CMS or data source from a GraphQL layer.
It was strongly inspired by what Gatsby does for React. A quick scan through both platform’s core features attests the influence:
- Static site generation
- Easy connection to data sources—headless CMSs, SaaS services, APIs, databases, etc.
- Data fetching through GraphQL
- Progressive Web App generation for offline capabilities
- JAMstack-oriented
- Blazing fast performance
React and Gatsby are awesome, no doubt. But I fully agree with Gridsome’s creator when he says that Vue.js is more accessible for most web developers getting started with the JAMstack—and that Gridsome’s fills a gap in its ecosystem.
The feature that really caught my attention here is the capacity to easily unite the capabilities of Vue.js and GraphQL. The latter has come a long way since we introduced it on the blog. We sure weren’t wrong when stating that it wouldn’t be a short-lived, trendy tool.
GraphQL is now a widely adopted query language for APIs, still challenging the traditional RESTful APIs. What’s so great about it is how easily it connects data sources to JavaScript-based frontend applications.
Until now, the main way to tie your data to a Vue.js app through GraphQL was with Apollo, the GraphQL client. It’s also a neat tool for which you can find tons of great Vue.js-GraphQL tutorials if you’re curious.
But it’s always nice to have alternatives, right? Having Gridsome as an added tool on our belt capable of doing this work for us Vue.js lovers is a blessing!
#vue #vue.js #graphql #programming
