I updated our website to use React with Next.js and DatoCMS... here is what I learned!

React with Next.js

I have dabbled in React a couple of times, gone through a couple of courses and even though the "create-react-app" is extremely handy... I still find it a bit cumbersome with the setup to get it up and running. That was until I got the tip to check out Next.js which, on top of giving you a "Zero Setup"-setup, gives you server-side-rendered pages and a whole lot more.

##"Zero Setup"-Setup If you have some experience at all with React, getting started with Next.js is a breeze! You'll find their "Getting started" tutorial here.

Going through the Next.js tutorial you will quickly realise that not much is different form the plain old React we've come to love, apart from some imports to use Next's own components. It definitely easier to get going and you get some great things like server-side-rendering of your pages for free.

##What do we want? Deployment! When do we want it? NOW! Server-side rendering is great and all... but what I personally LOVE about using Next.js if how easy it is to deploy your entire React-site to their hosting service Zeit.

Deploying with Next.js is almost absurdly easy, is so easy I just did it by accident right now... For real! Just type the word "now", sit back and watch the magic unfold before your eyes!

Remembering commands can be tough... here you can copy my code:

now

That's literally it!

So why did we switch over to React with Next.js?

Our website has up until now been static HTML pages and we needed a faster and easier way to quickly make changes and updates. First of all, we needed something modular to quickly add new content to our site, this was covered by React, then we needed some way to easily and quickly update the content... we needed a CMS! So which one did we go for? We love Django and use it a lot, therefore it has come naturally to use DjangoCMS. But for this project we opted for something else... we went with DatoCMS

DATO CMS

So what is DatoCMS really? On their website they claim themselves to be "The API-based CMS your editors will love"... which actually seems pretty much like a great description of what it is.

With Dato you define models to use with their web based GUI, you populate your models with data and then you access the data though their API using GraphQL.

GraphQL... You want PK´s with that?

We've all used REST-API's but what's the deal with GraphQL?

I'we heard about GraphQL several times and I had understood that it gives more flexibility over queries. So it was time to put it to the test! What I hadn't realised with GraphQL was the fact that you now can use one single API-Endpoint for several completely different queries. This in combination with the fact that you "Custom Order" what results you want and how you want it.

So instead of getting the result of some specific API-endpoint which might return way more data than we actually need, you just declare what results you actually want and care about.

For example we want to display the logotypes of the technologies we use at Will & Skill. So with DatoCMS we define a model called Technology. It has a name, an image-field called logotype and an ID.

So what might a GraphQL request look like to get a list of all the technologies we have entered to DatoCMS?

First of all we get a list of all the technologies with their respective ID:

GraphQL Query

We simply write out what we want:

Javascript{
    allTechnologys{
        id
    }
}

API Response

And this is what we get back:

Javascript "allTechnologys": [
      {
        "id": "438377",
      },
      {
        "id": "438412",
      },
      {
        "id": "438376",
      },
      {
        "id": "438427",
      },
      {
        "id": "438365",
      }
    ],

But what if we also want the names of the technologies? Easy, just add the name field to the query and voilà!

GraphQL Query

Javascript{
    allTechnologys{
        id
        name
    }
}

API Response

Javascript "allTechnologys": [
      {
        "id": "438377",
        "name": "React"
      },
      {
        "id": "438412",
        "name": "React Native"
      },
      {
        "id": "438376",
        "name": "Angular"
      },
      {
        "id": "438427",
        "name": "Swift"
      },
      {
        "id": "438365",
        "name": "Django"
      }
    ],

Let's say we also want to display the corresponding logotypes for the technologies... just add the logotype field and the parameters you want (in this case we are just interested in the url of the logotype)

GraphQL Query

Javascript{
    allTechnologys{
        id
        name
        logotype{
            url
        }
    }
}

API Response

Javascript"allTechnologys": [
      {
        "id": "438377",
        "name": "React",
        "logotype": {
          "url": "https://www.datocms-assets.com/7863/1540395724-logoreactredux.png"
        }
      },
      {
        "id": "438412",
        "name": "React Native",
        "logotype": {
          "url": "https://www.datocms-assets.com/7863/1540394206-logoreactnative.png"
        }
      },
      {
        "id": "438376",
        "name": "Angular",
        "logotype": {
          "url": "https://www.datocms-assets.com/7863/1540394191-logoangular.png"
        }
      },
      {
        "id": "438427",
        "name": "Swift",
        "logotype": {
          "url": "https://www.datocms-assets.com/7863/1540394129-logoswift.png"
        }
      },
      {
        "id": "438365",
        "name": "Django",
        "logotype": {
          "url": "https://www.datocms-assets.com/7863/1540393940-logodjango.png"
        }
      }
    ],

As you can see, now you can go all Burger King™ up on your API calls and "Have it your way"... SUCCESS!

Stay tuned for part 2!