Let’s talk a bit about WunderGraph and what it is. 

WunderGraph claims that it provides “The best developer experience for working with APIs”. 

Now, I don’t want to call something I’ve been playing around with for a few days “THE BEST” in anything, but I’ve got to say that working with WunderGraph is pretty darn good, and overall a nice experience. 

Now, what does WunderGraph do?

Well, to put it into most simple of terms, WunderGraph will connect to all of your APIs and become a central spot for getting and updating data from your APIs. 

And I’m saying APIs here, but I should probably be using the term data sources. 

Because WunderGraph has the ability to merge multiple data sources into a single source with which you can communicate to display, update or add data using GraphQL. 

Now, those data sources can be Databases, GraphQL APIs or REST APIs. So WunderGraph will essentially become a middleware between your data and your application, which can be either a web applications or a mobile applications, and it will provide you with a single GraphQL API with which you will communicate.

And if you are building a React or Next.js application it will automatically generate hooks for you that will make displaying, adding and updating your data a breeze, as you will see in this video. 

WunderGraph will also take care of Caching, Security, Permissions, Authentication and Realtime data for you.

Now since this is a “Let’s Checkout...” video I’m not going to go very deep into WunderGraph, because the point of these videos is for me to present technologies that I find interesting. And hopefully spark interest in them in you also. And then if you find it interesting you can take a deep dive yourselves. 

Also please don’t ask me questions about WunderGraph and how to do something with it. I’m a noob at it just like you. If you wanna ask questions about WunderGraph you can join their Discord server or Subreddit, and ask it there.

In this video we are going to connect to our API from [“Directus and Nextjs” series](https://watch-learn.com/courses/directus9-nextjs), using WunderGraph. And then using hooks that are generated for us we are going to get the data on the client side only, and then I’m going to show you how to get initial data on the server side. Also we are going to add some data to our API with provided hooks, and I’m going to show you how to display newly added data live once you add it.

In this video we are going to checkout WunderGraph, the solution for combining all of your APIs into a single source and much more.

Let's Checkout... WunderGraph

This will be a very nice feature especially if you are building a site where users can add new content to the site. And as you will see in this episode Strapi makes this very easy for us to do, most of the code will actually be implemented on the Next.js side of things.

In this episode we are going to add some new movies to our site but using the frontend form instead of Strapi administration.

Add Data To Strapi From Next.js

We have been using this method of organising JavaScript files at work for a few months now, and are pretty happy with it. I'm not saying it's the best method but works very well for us. Hope you can find this method usefull and feel free to use it on your projects. Of course we will be using [webpack](http://watch-learn.com/video-tutorials/basic-frontend-tools-webpack) to set this up. But nothing complicated.

In this episode I'm going to talk about and show you one cool way of organising your projects JavaScript files.

Organising JavaScript

To do this we are going to use[gatsby-paginate](https://www.npmjs.com/package/gatsby-paginate) plugin, make some changes to `gatsby-node.js` and create a new Gatsby template for our posts that are coming from our WordPress instalation.

In this episode we are going to be creating simple pagination for our WordPress and Gatsby.js site.

Pagination

I say that I'm going to try to create a website using these technologies because I'm not familiar with any of them except for WordPress. Gatsby.js uses React and GraphQL as main driving engines behind it. Needless to say that I'm not familiar with either of these technologies, but this will be a great opportunity to learn with you guys.

In this particular episode we are going to setup our development environment and get posts and pages using Gatsby.js and WordPress REST API.

In this mini-series I'm going to try and create website using Gatsby.js and WordPress.

Getting Posts And Pages

Webpack is used to bundle your .js modules into a single file, and you can think of modules as files. 

JavaScript does not natively support file includes like some other languages. So that is where Webpack comes in, it will bundle your files so that almost all browsers can read them.

It also helps us organise our JavaScript app into multiple files. Which we can then import and use them when needed. 

Webpack is also much more than just module bundler, it could also be used as task runner, and some developers are using it exactly like that. Although in this video we are not going to go into detail about Webpacks capabilities,  I will show you an example of how you can compile scss files with Webpack, so that you can get a taste of what Webpack can do.

In this episode we are going to cover basics of Webpack module bundler.

Webpack

Command line is one of the most basic tools for any kind of development, and we are going to be using it through out this series, for all kinds of cool stuff.

In this episode I’m going to cover the basics of the command line, so you are going to learn how to change directory, how to move and copy files, how to change permissions on files and even how to use the mysterious `tar` command.

### Links in this tutorial

* [Setup Bash for Windows](https://goo.gl/NXkyLy)
* [CHMOD Numeric Permissions](https://goo.gl/4mBwK2)

In this episode I will cover the most basic of the tools that is going to be used for any kind of development not just frontend. And that tool is the mighty command line.

Command line

In this episode I'm going to show you how to create a classic layout with header, footer, one third of a sidebar and two thirds of main content using CSS Grid. After we create this layout, we are going to create a post list with one feateured post and several post around and below it.

As you will see creating something like this using CSS Grid is much easier than using something like Flex Box or regular floats.

In this mini series we are going to take a look at how we can make popular layouts that you find around the web and create them using CSS Grid.

CSS Grid Layouts - One Third + Two Thirds

Now we are going to make a page that is going to list all of our movies, but it's also going to have to select boxes that are going to be our frontend filter controls. 

This whole page is going to be rendered through a October CMS component and it's going to filter our movies by year and genre. As you will see it's not that complicated but it involves a lot of steps. That is why this episode is so long.

<small>Icon made by <a href="http://www.flaticon.com/authors/dinosoftlabs" title="DinosoftLabs">DinosoftLabs</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></small>

In this episode I'm going to make a lot of mistakes but by the end of it we will make a frontend filter for our movies using October CMS components system

Tutorials tagged with: frontend

Get in touch