Jamstack Explorers

Building a Lyric Blog with Nuxt.js and Strapi with Daniel Madalitso Phiri

Get Graphql working with Strapi

Hello explorers in this mission. And we'll be looking at getting Strapi's graph, QL, plugin installed and navigating throughout graphQL playground. In front of us, we can see the Strapi admin panel, which we must all be familiar with from our previous mission. In the previous mission, we navigated through the Strapi admin panel, built out a collection type and accessed information via Strapi's rest API.

In this mission, we'll be enabling, Strapi's graph QL plugin. And to do that, we have two options. The first one being navigating to the marketplace. And clicking download. And the second one being installing the graphic, your plugin via the terminal, using the Strapi CLI we'll go with the second option.

We'll navigate back to our terminal. We'll stop our server and change directories into our API folder, which is where our strappy application is. We'll run yarn, strapi install graphql. After our installation is done, we restart our server with yarn develop. Once our server is up and running, we can navigate back to our browser.

Now that we have the graph QL plugin installed. When we navigate to the plugin section. We can see it added to the list of plug-ins installed in our Strapi project. Strapi's graphql plugin comes with a graphql playground and integrated development environment, or IDE for short we'll open up the graphical playground in our browser.

This is accessible via localhost 1337 slash graph QL. We'll try it. A query for articles collection type. We'll start with the query keyword. And about articles and in our articles object, we can choose what fields we want. We'll get the ID with the title. We'll get the slug with the description and with the body click play button.

And we get back the data in our entry, just for sure. Let's add our date field and make the query. And now our date field appears in our response. Now that we have a graph QL plugin installed, and we're able to make queries through the playground we can integrate and get the graphql working in our Nuxt js application, which we'll be doing in the next mission.


your progress