How to use Storyblok's GraphQL endpoint with Vue.js and Apollo
In this tutorial, you will learn how to use Storyblok's GraphQL API with Vue.js and Apollo.
If you haven't already please install the latest Vue CLI globally.
Let’s start by setting up the project using Vue CLI.
Next, we'll install the GraphQL client and Vue.js bindings.
Initialize the GraphQL client
Open the file src/main.js and initialize the Apollo client with Storyblok's GraphQL endpoint https://gapi.storyblok.com/v1/api.
Grab the “preview” token from your Storyblok space and set it as the header for every request.
Make your first GraphQL query
Storyblok's GraphQL schema is generated from your content types.
For every content type Storyblok generates two fields.
One for receiving a single item: [Humanized Name]Item
And one for receiving multiple items: [Humanized Name]Items
So if you have created a content type with the name page you will have the fields PageItem and PageItems in GraphQL.
To get the documented schema definition of your content type you can use theGraphQL playground. Exchange YOUR_TOKEN with your “preview” token and open the link http://gapi-browser.storyblok.com/?token=YOUR_TOKEN.
In the following example we query the home content item and output the page name in src/App.vue.
You need to configure your project to transpile the gql string template tag in vue.config.js.
How to render nested components
Storyblok has components as first class citizens on board. This means that you can easily create advanced layouts and nest components inside each other. In the next step we will create a few more Vue.js components to render the demo content that you get when you create a new Storyblok space.
First change App.vue to render dynamic components. After that we'll create the missing components.
Now you register all components in src/main.js.
At the end (with some CSS added) you should have the following result when opening your app in the browser:
How to add Storyblok’s Live Visual Editor
Adding Storyblok’s visual editing capability just requires a few more steps. In the end, your content editors will thank you for going on that extra mile.
Next, install the Storyblok binding for Vue.js to make elements clickable by the user.
All that needs to be done is to add v-editable="blok" to your components and pass the current component object to it.
Here's an example of how to do that in the file src/components/Teaser.vue.
After you changed all of the components you can use the event listener window.storyblok.on to reload the app after content has been changed in the editor. You can do this in the created hook of the App.vue component.
The last step is to configure the preview URL in Storyblok space and check if it is working. In the end, you should have a clickable teaser element that will update the content on the click of the “Save” button.
Manuel is Head of Front-End Development at karriere.at, lecturer at the University of Applied Sciences Upper Austria and writes about Front-End Development, Games und Digital Art on his personal blog manu.ninja.