Forem: Quicklyreact

How to Dockerize your React app?

Quicklyreact — Fri, 06 Sep 2019 00:00:00 +0000

In our previous posts, we have discussed about React.js frameworks and built an app with a related use case to it. We haven't discussed about how to deploy your apps. In this post, we wanted to take a look at docker which is a tool to make it easier to deploy your React app.

Note: Docker is used for deploying apps in general, for this post we are sticking to how you can deploy a React app using docker.

What is dockerizing?

Dockerizing an application is the process of converting an application to run within a Docker container.

For people who don't know about docker that may be a bit vague.

Containers are similar to virtual machines, they provide an isolated environment for your application.

A good example of how dockers are helpful is say you are using Windows for building your app, but the server where you would be deploying is Linux, in such cases docker is really helpful. You don't need to write any deployment-specific commands and then change them back while building, with docker you can use a fixed dependency both for building and deploying and save time worrying about your environment ✨.

Everyone: How does this magic happen?

This is how the magic happens,

This may seem a bit confusing, so let's break it

Docker: Docker provides a platform to run containers over any Host OS.
Container: Every application runs inside the container. Our container includes all the dependencies that we need for the app and we deploy the container with the included dependencies to run our app.
Base Image: Each container has a base image for eg; Ubuntu, CentOS are an example of base image. Docker has over 100, 000 images and we are going to use on to build a container. Base image includes all the dependencies we need for our app.
Image: The base image and the app together are called an Image. Hence the color difference 😁.

How does docker work?

We know what problem docker solves, and we have a rough idea on how docker works.

Let's jump into dockerizing a React app and see how docker really works. Since our main focus for this post is to dockerize, we are going to use the Next.js project from our previous post to save time 🤘.

Installing docker

Different operating systems have different docker installation processes.
You can check out the official docs for installing below, also they are pretty lengthy and specific to OS versions (not to mention we are too lazy 😅).

Once you are done installing, you can try out this command to see if docker is working

docker run hello-world

and you should see this


Hello from Docker!
This message shows that your installation appears to be working correctly.

To generate this message, Docker took the following steps:
 1. The Docker client contacted the Docker daemon.
 2. The Docker daemon pulled the "hello-world" image from the Docker Hub.
    (amd64)
 3. The Docker daemon created a new container from that image which runs the
    executable that produces the output you are currently reading.
 4. The Docker daemon streamed that output to the Docker client, which sent it
    to your terminal.

To try something more ambitious, you can run an Ubuntu container with:
 $ docker run -it ubuntu bash

Share images, automate workflows, and more with a free Docker ID:
 https://hub.docker.com/

For more examples and ideas, visit:
 https://docs.docker.com/get-started/

that means you have successfully installed docker. Good work! 👏👏.

Dockerizing our app

Now, we need a docker container in which we will be running our application.

Everyone: How do we make a docker container?

Docker uses a Dockerfile (in the same directory as your project) to build the container.

Let's create a Dockerfile .

We brushed briefly over how docker works, but while making this Dockerfile we get to see how a docker container really works and how to make one.

Like a good cooking show, we already have our Dockerfile ready 😆. Let's get into what it is.

# base image
FROM node:10.16.3-jessie

# set working directory
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# install and cache app dependencies
COPY package.json /app/package.json
RUN npm install --silent
RUN npm install --save next react react-dom               

# start app
CMD ["next", "dev"]

Base Image

Every container has a base image. A base image is something which includes all the dependencies needed to execute the code.

Everyone: Where does this image come from and how does it work?

Docker provides a really amazing service called Docker Hub, which has more than 100,000 container images.

For our project, we need a docker image to primarily run Node. So, we define our base image to be:

# base image
FROM node:10.16.3-jessie

You could use an Ubuntu base image,

# base image
FROM ubuntu:16.04-xenial

but it wouldn't have node dependencies, which we need (duh!).

Installing App dependencies

Now that we have chosen our base image, we want to create and use a particular directory for our app in our container. So, we have the command:

WORKDIR /app

Once we setup our working directory, we need to install our packages. We could install, through these commands:

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# install and cache app dependencies
COPY package.json /app/package.json
RUN npm install --silent
RUN npm install --save next react react-dom

Running the app

Finally, we need to run the app, so we have the command

# start app
CMD ["next", "dev"]

We installed the packages in the container, we don't want our local dependencies from node_modules being used.

Docker has another file to ignore in such cases called .dockerignore

node_modules

With this, our local dependencies will be skipped from sending to the container. If you have ever used Git this is similar to .gitignore .

Now that we are done setting up our container configuration, we need to build our container.

We will be running the following command (in our console)

docker build .

This will build our container from the local project files, except for node_modules (since it's in .dockerignore).

Once our container is built, in the last line we get a message which looks like

Successfully built edbdf759cd55

(hash may differ)

in the end.

Now, we need to run the app so we use the command

docker run -v ${PWD}:/app -v /app/node_modules -p 3001:3000 --rm edbdf759cd55

(since the app is in our container)

Now, if you now connect to localhost:3000 you won't be able to.

That is because, the app is running inside the container on port 3000, but with this option

-p 3001:3000

while running our container, our host connects via the port 3001. If you go to localhost:3001 you can connect to the app 😊.

If you want to stop the app, you need to run the command

docker ps

With this, docker will enlist all the containerized applications.

CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                    NAMES
39adcb9b4f0f        edbdf759cd55        "docker-entrypoint.s…"   5 minutes ago       Up 5 minutes        0.0.0.0:3001->3000/tcp   awesome_wilson

We know our docker image id to be edbdf759cd55 , we need to use the CONTAINER ID for stopping the container.

docker stop 39adcb9b4f0f

The container stops running and the app is inaccessible.

Everyone: What if you want to start the app again?

You just need to run the command

docker run -v ${PWD}:/app -v /app/node_modules -p 3001:3000 --rm edbdf759cd55

Docker Compose

Is there any other way to run containers?

Indeed there is a way to run the docker container in the background with the services mentioned, thanks to Docker Compose.

You can configure your application's services with docker-compose.yml .

version: '3.7'
services:
  nextjsprj:
    container_name: nextjsprj
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - '.:/app'
      - '/app/node_modules
    ports:
      - '3001:3000'

If you want the give the container a spin, you need to run

docker-compose up

and if you run

docker ps

you can check our container to be running

CONTAINER ID        IMAGE                  COMMAND                  CREATED             STATUS              PORTS                    NAMES
9ba9bd01ed07        nextjs-prj_nextjsprj   "docker-entrypoint.s…"   15 hours ago        Up 14 minutes       0.0.0.0:3001->3000/tcp   nextjsprj

To stop the container you just need to do the following

docker-compose stop

With docker-compose, you can run multiple containers without checking which container to run or to stop.

Deploying

We were able to build and run a docker image so far, but we discussed about using docker to deploy our app.

How do we deploy using docker image?

While building our image we discussed about Docker Hub. We can use docker hub to deploy our images as well 😍.

We tagged our image with our quicklyreact1/nextjsprj (username/project),

docker tag nextjs-prj_nextjsprj quicklyreact1/nextjsprj

This tag doesn't affect our local image, but if we push our image

docker push quicklyreact1/nextjsprj

If you haven't logged in, you may need to sign up to Docker Hub

docker login

Once you deploy, you can find the image for our project here.

If you want to pull this image on your server

docker pull quicklyreact1/nextjsprj

and run it with

docker run -v ${PWD}:/app -v /app/node_modules -p 3001:3000 --rm quicklyreact/nextjsprj

Woah! we got to run, build and deploy our app 🎉🎉🎉

References:

Conclusion

Dockerizing your app gives you the freedom to not worry about any Host OS dependencies.
Docker Hub provides an amazing resource with more 100,000 containers to check out from.
Docker Compose allows you to control the services of your application and with a single command allows you to run and stop your container.
Docker Hub can also be used for deploying your image, which you could then use on the server with a single command.

We took a very simple example to dockerize and deploy our React app, but it may not be so simple all the time. If you need help, we at Quicklyreact have 24/7 React.js developers to help you fix any issues or provide you with any assistance you may need. Contact our support 👉 to know more.

What is Next.js and how you can build an AMP page with it?

Quicklyreact — Thu, 05 Sep 2019 00:00:00 +0000

In this post, we wanted to take a look at one of the frameworks of React.js called Next.js and also Accelerated Mobile Pages(AMP) and how can build AMP using Next.js. Did you know that Marvels official website was built on Next.js, cool right?

What is a Next.js?

Next.js is a React.js framework.

Everyone: But, what is a framework and what is different about React.js framework?

A framework is a standard way to build and deploy applications. In other words, framework is a set of basic principles which are common across projects. When we say React.js framework, it's a set of principles & conventions for building React.js apps.

Everyone: Why use a framework if we were building React.js without one?

You don't need to define these set of principles each time you start a new project.
The design of frameworks is done so that you needn't spend a lot of time figuring out what the right way is and can get started immediately.
Consistency is key especially across large teams, where a framework reduces second guessing and not to mention reading, maintaining and developing code is much easier and quicker.

How to use Next.js?

Now that we know that Next.js is a framework of React, let's dive into how to get started on this:

Similar to create-react-app there is one for Next.js called create-next-app .

Let's start our project, with this command:

    npx create-next-app nextjs-prj

Then we need to install Next.js, in our project

    npm install --save next react react-dom

Then you can start the application with

    npx next dev

There is already an existing welcome template in pages/index.js , but we will be replacing that to get an idea about what's going on:

function Home() {
    return <div > Welcome to Next.js! < /div>
}

export default Home

Something quite interesting if you didn't notice was, you needn't worry about containers and declaring the routes like the usual React.js apps, because you can add in pages for eg; pages/home.js would add a new route automatically for /home 😃.

Let's add some css!

function Home() {
  return ( 
    <div> 
      <p>Welcome to Next.js!</p> 
      <style jsx>{
      `
        p{
          color: white;
          font-size: 50px;
          text-align: center;
        }
      `
      }</style>
      <style global jsx>{
        `
        body {
          background: black;
        }
        `
      }
      </style>
    </div>
  )
}

export default Home

Now,

A few things might seem a bit different from the usual. So let's break it one by one.

      <style jsx>{
      `
        p{
          color: white;
          font-size: 50px;
          text-align: center;
        }
      `
      }
      </style>

Everyone: what is this style element?

Next.js is bundled with styled-jsx. Styled JSX is a package for supporting CSS for JSX, it allows you to write CSS with <style jsx> for the elements.

Everyone: Is it similar to inline styling?

Not really, it's writing styles for classes and elements in the same page, although it does look like inline styling, but it isn't.

Everyone: What is the global prop and why is it separated?

Global styles are for styling all across the page. In our examples we don't use the body tag as the framework has already declared it, but if we want to make any changes for the body element we would need the global prop.

Can we add components?

Yes, we can. Next.js allows you to make components in the components/ directory.

Seems like there is already a Nav element in the components/ so we could reuse it.

import Nav from '../components/nav' //imported the Nav element from components

function Home() {
  return (
    <div>
      <Nav/>
      <p>Welcome to Next.js</p>
      <a href='/home'>home page</a>
      <style jsx>{
        `
          p {
            color: white;
            font-size: 50px;
            text-align: center;
          }
          a {
            color: purple;
            font-size: 60px;
            text-decoration: none;
          }
        `
      }</style>
      <style global jsx>{
        `
          body {
            background: black;
          }
          `
      }
      </style>
    </div>
  )
}

export default Home

So similar to most React.js applications we use the components, in this case we imported Nav element and used it.

That's how Next.js works.

Everyone: Ok, but why use Next.js when we already have React.js?

Why use Next.js?

In the above example we gave an example on how Next.js works, but why use Next.js?:

From the above example routing pages is definitely way easier. Just add it in the pages directory. For eg; pages/home.js would automatically add a page /home which would render from pages/home.js.
Something we didn't discuss was Next.js does server side rendering by default, if you use create-react-app it currently doesn't use server side rendering by default.

Everyone: What is server side rendering and why is it better?

Server side rendering of the website is when, you host all of resources on the server. The other way is client side rendering, where the resources are requested through javascript. Server side rendering is usually preferable for static websites, because you don't want to request for a website then wait for the JS to render the HTML, but rather you'd want the HTML when you request the server.

Next.js has lazy loading for modules i.e., it has automatic code splitting which allows the pages to load faster.

From the above points, it seems Next.js may only be used for static websites, but it can be used for web apps as well.

Now that we have a grasp on Next.js let's try to extend our project to be used as AMP pages

What are AMP pages?

AMP pages are Accelerated Mobile Pages. AMP pages are optimized for mobile use, slower websites have very high bounce rates with AMP you can serve visitors quicker. AMP is said to be a signal on Google mobile search index. If you google for any article or topic, you can see these AMP pages on the top of the search index.

Everyone: How are AMP pages different from normal webpages?

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMP pages</title>
    <link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

Can check the example here.

There are a few rules which make a page AMP page:

<html amp> identifies the page as AMP content.
<script async src="https://cdn.ampproject.org/v0.js"> needs to be there inside the <head> tag.
You need a <meta name="viewport" content="width=device-width,minimum-scale=1"> tag inside the <head> tag.
Page needs to start with <!doctype html>.
There needs to be a link to the actual page inside the <head> tag for eg; <link rel="canonical" href="*actual page url*">
The amp-boilerplate (AMP boilerplate code) needs to be in the <head> tag

From our above example:

    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

amp-boilerplate is used for declaring CSS for the AMP.

How to build AMP pages with Next.js?

Luckily, another cool feature which we forgot to mention was Next.js also supports AMP 😊.

Let's extend our example to be used as an AMP.

pages/index.js

import Nav from '../components/nav'
import { useAmp } from 'next/amp'

export const config = {
  amp: true
}

export default () => {  
  const isAmp = useAmp()
  return (
    <div>
      <Nav/>
      <p>Welcome to Next.js</p>
      <a href={isAmp ? '/home?amp=1' : '/home'}>home page</a>
      <style jsx>{
        `
          p {
            color: white;
            font-size: 50px;
            text-align: center;
          }
          a {
            color: purple;
            font-size: 60px;
            text-decoration: none;
          }
        `
      }</style>
      <style global jsx>{
        `
          body {
            background: black;
          }
          `
      }
      </style>
    </div>
  )
}

The useAmp function from next/amp function helps to decide whether to use AMP or not.

For our index page, we need to explicitly mention to use the page as an AMP, which is done through config. With config you can explicitly mention with amp: true.

  export const config = {
    amp: true
  }

pages/home.js

import { useAmp } from 'next/amp'

export const config = {
  amp: 'hybrid'
}

export default () => {
  const isAmp = useAmp()
  return (
    <div>
      <p>{isAmp ? 'Not AMP Home Page' : 'Home Page'}</p>
      <style jsx>{
        `
        p {
            color: white;
            font-size: 50px;
            text-align: center;
          }
          a {
            color: blue;
            font-size: 60px;
          }
        `
      }</style>
      <style global jsx>{
        `
        body {
          background: black;
        }
        `
      }
      </style>
    </div>
  )
}

In our index page, we explicity mentioned to use AMP with amp: true, but in the home page we are using amp: hybrid. We did it because, now AMP needs to be decided based on whether the homepage (index page) was an AMP or not.

If you check the index page as well, you can see here that

      <a href={isAmp ? '/home?amp=1' : '/home'}>home page</a>

if the page isAmp, in the params we pass amp=1.

Cool! we extended our example to be used as an AMP too.

Conclusion

Next.js is a very cool React.js framework, for quickly building websites. It has lot of interesting features, and getting started on Next.js is much easier instead of starting from scratch.
Next.js comes up bundled with styled-jsx. Styled-JSX allows you to write styles for the classes and elements inside the pages/components and also globally to body and encapsulating elements as well.🤘
AMP pages are optimized for mobile use, slower websites have very high bounce rates with AMP you can serve visitors quicker.
With the support that Next.js has provided for AMP, building AMP pages gets much easier.
If you want to check out the project, you check out the Next.js example that we worked on here, for the AMP Page example you can check it out here and the official Next.js examples here.

Check out our official blog page: https://blog.quicklyreact.com/

What is GraphQL and how to use with React.js(Part 2)?

Quicklyreact — Tue, 27 Aug 2019 00:00:00 +0000

Welcome back!

In our last post we discussed on what is GraphQL and how it works. In this part, we will be looking at how to use GraphQL with API wrappers.

How to use GraphQL with API wrappers?

GraphQL has two implementations for API wrappers as well:

Server side:

OC illustration to explain server side wrapper👏

Everyone: What does it mean to have a server side GraphQL API wrapper?

Say you have a pre-existing REST API and you want to use server side wrapper for GraphQL, we would need another server (as in the illustration) which sits in between the client and REST server communication.

The client would be accessing a GraphQL server, with no knowledge of the REST server
The REST server would be communicating solely with the GraphQL server.
The GraphQL server would be communicating the data from client to REST, and based on the query from the client would send the appropriate response.

Everyone: 🤔 It's a bit confusing, how would that work?

Let's try to setup and see how it would work.

In the last post, we discussed briefly about how GraphQL server (no wrapper) works

This was the example:

var express = require('express');
var graphqlHTTP = require('express-graphql');
var { buildSchema } = require('graphql');

// Construct a schema, using GraphQL schema language
var schema = buildSchema(`
  type Query {
    hello: String
  }
`);

// The root provides a resolver function for each API endpoint
var root = {
  hello: () => {
    return 'Hello world!';
  },
};

var app = express();
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true,
}));
app.listen(4000);

The current implementation for server side wrapper is also going to be very similar to this.

We would be extending this to be our GraphQL server wrapper.

For our REST API, we will be using https://jsonplaceholder.typicode.com/ which is an online fake REST API.
We need to setup our local GraphQL server, which would query the mock REST server.
So setup our express-server in server.js

var express = require('express');
var graphqlHTTP = require('express-graphql');
var schema = require('./schema');
const app = express();

app.use(graphqlHTTP({
    schema,
    graphiql: true,
}));
app.listen(4000);

This time, our GraphQL server doesn't need a seperate endpoint so if you go to localhost:4000 you would be able to interact with graphiql.

We need to define our schema.js

In our previous example our schema was pretty much hello: String , but in this case we have posts and post which are an array and object respectively.

For posts we could do:

import {
  GraphQLSchema,
  GraphQLObjectType
} from 'graphql'

const BASE_URL = 'https://jsonplaceholder.typicode.com/'

const QueryType = new GraphQLObjectType({
  name: 'Query'
  description: '...',
  fields: () => ({
    post: {
      type: PostType, //needs to be declared

    },
    posts: {
      type: new GraphQLNonNull(new GraphQLList(new GraphQLNonNull(PostType))), //array of posts
    }
  })
});

export default new GraphQLSchema({ //essentially our schema string from previous example
  query: QueryType,
});

So, now that our overall schema has been set, we need to define PostType and also make our API calls (more importantly! 😅).

So let's get to that

import {
  GraphQLList,
  GraphQLNonNull,
  GraphQLObjectType,
  GraphQLSchema,
  GraphQLString
} from 'graphql'

import fetch from 'node-fetch';

const BASE_URL = 'https://jsonplaceholder.typicode.com';

const QueryType = new GraphQLObjectType({
  name: 'Query'
  description: '...',
  fields: () => ({
    post: {
      type:   PostType //needs to be declared
      args: {
        id: {
          type: GraphQLString
        }
      },
      resolve: (root, args) =>
        fetch( `${BASE_URL}/posts/${id}` ) //API call for posts/1 say.
          .then(res => res.json())
    },    
    posts: {
      type: new GraphQLNonNull(new GraphQLList(new GraphQLNonNull(Post))), //array of posts
      resolve: (root, args) => 
        fetch( `${BASE_URL}/posts` ) //API call for all posts.
          .then(res => res.json())
    },
  })
});

export default new GraphQLSchema({ //essentially our schema string from previous example
  query: QueryType,
});

Now, that we have added our API calls. We need to finish it up by declaring our types.

const PostType = new GraphQLObjectType({
  name: 'Post',
  description: '...',
  fields: () => ({
    title: {type: GraphQLString},
    body: {type: GraphQLString},
    id: {type: GraphQLString},
    user: {
      type: UserType, //need to declare the usertype
      args: {
        id: {
          type: GraphQLString
        }
      }
      resolve: (post) => //pass the object that we received from the API call.
        fetch( `${BASE_URL}/users/${post.userId}` ) //API call for users/1 say.
          .then(res => res.json())
    }

  })
});

We need to declare our User type now, since we have that in our Post

const UserType = new GraphQLObjectType({
  name: 'User',
  description: '...',
  fields: () => ({
    id: { type: GraphQLString },
    name: {type: GraphQLString},
    email: {type: GraphQLString}
  })
});

To summarize it, our schema.js should look like this

import {
  GraphQLList,
  GraphQLNonNull,
  GraphQLObjectType,
  GraphQLSchema,
  GraphQLString
} from 'graphql'

import fetch from 'node-fetch';

const BASE_URL = 'https://jsonplaceholder.typicode.com';

function getPostById(id) {
  console.log(id);
  return fetch(`${BASE_URL}/posts/${id}`,{
    headers:{
      'Content-Type': 'application/json'
    }
  }) //API call for posts/1 say.
    .then(res => res.json())
    .then(data => { 
      console.log(data);
      return data;
    });
}

function getAllPosts() {
  return fetch(`${BASE_URL}/posts`) //API call for posts/1 say.
    .then(res => res.json())
}

function getUser(id) {
  return fetch(`${BASE_URL}/users/${id}`) //API call for posts/1 say.
    .then(res => res.json())
}

const UserType = new GraphQLObjectType({
  name: 'User',
  description: '...',
  fields: () => ({
    id: { type: GraphQLString },
    name: { type: GraphQLString },
    email: { type: GraphQLString }
  })
});

const PostType = new GraphQLObjectType({
  name: 'Post',
  description: '...',
  fields: () => ({
    title: { type: GraphQLString },
    body: { type: GraphQLString },
    id: { type: GraphQLString },
    user: {
      type: UserType, //need to declare the usertype
      resolve: (post) => getUser(post.userId)
    }
  })
});

const QueryType = new GraphQLObjectType({
  name: 'Query',
  description: '...',
  fields: () => ({
    post: {
      type: PostType, //needs to be declared
      args: {
        id: { type: GraphQLString }
      },
      resolve: (root, args) => getPostById(args.id),
    },
    posts: {
      type: new GraphQLNonNull(new GraphQLList(new GraphQLNonNull(PostType))), //array of posts
      resolve: () => getAllPosts()
    },
  })
});

module.exports = new GraphQLSchema({ //essentially our schema string from previous example
  query: QueryType,
});

If there are any doubts/mistakes do let us know.

Let's play with our graphql now.

-Listing all the post titles

-Listing the post details for id:1

That's a wrap on server side wrapper, you can check the repo here for server side wrapper. If you want to look at a more comprehensive example with loaders you can check out GraphQL official documentation for server side wrapper.

Hopefully, you got an idea on how server side wrapper for GraphQL works.

Client Side Wrapper

share this blog more such OC illustrations 😅

As promised, we will be discussing on how to integrate with React.js here:

We are using apollo-client and create-react-app for this.

Note: It can get confusing which part of the code goes where 😅. Fear not, we got you covered...we have added a repo here for client side wrapper that you can use for reference.

For this, we would be using create-react-app and graphql-client-wrapper.
We need to setup a few libraries in our project before we go forward.

Just run these commands locally, they should install the required libraries:

npm install --save apollo-client
npm install --save apollo-cache-inmemory
npm install --save apollo-link-rest apollo-link graphql graphql-anywhere qs
npm install --save graphql-tag

You could also do `npm i --save *package name` *

Now we need to setup our client for interacting with the REST API

//setup the REST API
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { RestLink } from 'apollo-link-rest';
import gql from 'graphql-tag';
const restLink = new RestLink({ uri: "https://jsonplaceholder.typicode.com/" });

const client = new ApolloClient({
  link: restLink,
  cache: new InMemoryCache(),
});

We need to setup two routes in our App.js

-Route for all our posts

-Rout for individual post with :id

  <Router>
    <Route path="/" exact component={Posts} />
    <Route path="/posts/:id" component={Post} />
  </Router>

We need to make a query for getting Posts through our client

By the way, we forgot to mention previously that query is a GraphQL operation used for reading and fetching values, which is why we have been using query command to get our data.

export function getAllPosts() {
  return new Promise(function (resolve, reject) {
    const postsQuery = gql`
      query postsQuery {
        posts @rest(type: "[Post]", path: "/posts") {
          id
          title
        }
      }
    `
    client.query({ query: postsQuery })
      .then(response => {
        resolve(response.data);
      })
      .catch(err => {
        reject([]);
      })
  });
}

Similarly, we need to make a query for getting the appropriate Post for the id

export function getPost(id) {
  return new Promise(function (resolve, reject) {
    const postsQuery = gql`
      query postsQuery {
        post @rest(type: "[Post]", path: "/posts/${id}") {
          id
          userId @export(as: "id")
          title
          body
          user @rest(type: "User", path: "/users/{exportVariables.id}") { 
            # getting the user data from userId field.
            name
          }
        }
      }
    `
    client.query({ query: postsQuery })
      .then(response => {
        resolve(response.data);
      })
      .catch(err => {
        reject([]);
      })
  });
}

Now, that our requests are set we need to define our containers for displaying all of our posts and individual post as we declared in our Routes previously.

import React from 'react';
import { getAllPosts } from '../../services';

class Posts extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: []
    }
  }

  componentDidMount() {
    getAllPosts().then(data => { this.setState({ posts: data.posts }));
  }

  render() {
    const { posts } = this.state;
    console.log(posts, posts.length > 0);
    return (
      <div>
        {posts.length > 0 && posts.map(post => <p><a href={`/posts/${post.id}`}>{post.title}</a></p>)}
      </div>
    );
  }
}
export default Posts;

We make our API call on componentDidMount and set the state of posts from the received data. The GraphQL layer we built is being used as a service, so the containers are unaware of what is beneath. If you use redux, you could integrate the services with actions.

Similarly for Post, we did something like

import React from 'react';
import { getPost } from '../../services';

class Post extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      post: {
        id: '',
        title: 'Loading...',
        body: '',
        user: {
          name: ''
        }
      }
    }
  }
  componentDidMount() {
    getPost(this.props.match.params.id).then(data => this.setState({ post: data.post }));
  }
  render() {
    return (
      <div style={{maxWidth: '500px', margin: 'auto'}}>
        <h1>{this.state.post.title}</h1>
        <h3>{this.state.post.user.name}</h3>
        <p>{this.state.post.body}</p>
      </div>

    );
  }
}
export default Post;

Similar to our approach for Posts we did it for Post.

This was very rudimentary setup to get going. We haven't added a lot of CSS, since our focus was on integrating GraphQL as a service with our containers.

One of the major drawbacks of using client side wrapper is that, the payload remains the same. While with server side wrapper, the client only receives as much as required (which is helpful for the performance of web apps).

Conclusion

GraphQL can be used as client/server side wrapper over the REST API
GraphQL lets you determine the structure of the response, without disturbing the entire backend.
If you plan on migrating your existing APIs you could use libraries like apollo-client and express-graphql 😊, based on your approach to wrap.
Here lies our server-side wrapper and here is our client-side wrapper.

Also, let us know what you thought about this blog 🖖.

What is GraphQL (Part 1)?

Quicklyreact — Sun, 25 Aug 2019 00:00:00 +0000

In our last post we were exploring GatsbyJS and something we overlooked was how GatsbyJS was using GraphQL.

We felt, GraphQL deserved it's own blog - i.e., more content! 🤟.

What is GraphQL?

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data.

GraphQL has a good phrase to explain this:

Ask for what you need,
get exactly that

Everyone: Umm, that isn't very clear on what GraphQL does and where it is used?

Fair enough 😓.

Let's say you want to build a blog. You would be needing two pages:

A page for listing all the posts.
A page for showing and individual post and it's contents.

Our API output structures would look something like this:

For getting a single post.

{
    id: string,
    title: string,
    body: string
}

For Listing for all the posts

{
    posts: [Post] // a array of all the posts
}

Things are about to get a little interesting now.

Now, if you see for listing Posts , our query structure sends in everything about each Post , including the body for each Post which we don't want to list and it just increases the payload.

GraphQL has entered the chat

With GraphQL, it's much easier to take care of this. You can specify the appropriate query structure to get what you want. Now, posts would look something like this:

{
    posts: [
      {
        id: string,
        title: string
      }
      ...
    ]
}

Everyone: Where did GraphQL come from and save the day?

Now, so far it's not a very clear picture on how GraphQL came in and solved this issue. But, what GraphQL does must be getting a bit clearer by now.

How does GraphQL save the day?

GraphQL saves the day in two ways:

Server side: GraphQL can be used from the server side.

Note: There are various implementation, but since we our core is javascript. We choose to use express (web framework for Node.js)

So, say you have a web app and want to integrate GraphQL from backend you can use express-graphql.

Picking from docs , a simple setup would be:

var express = require('express');
var graphqlHTTP = require('express-graphql');
var { buildSchema } = require('graphql');

// Construct a schema, using GraphQL schema language
var schema = buildSchema(`
  type Query {
    hello: String
  }
`);

// The root provides a resolver function for each API endpoint
var root = {
  hello: () => {
    return 'Hello world!';
  },
};

var app = express();
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true,
}));
app.listen(4000);

If you run this locally, you could check http://localhost:4000/graphql

Everyone: So, does that mean we don't need REST anymore?

A lot of pieces are still missing, but spoilers: yes you could switch from REST to GraphQL. Although, currently most of the implementations that are happening are more of a wrapper for GraphQL around REST.

Which leads us to...

API wrapper

GraphQL is relatively very new (was open sourced in 2015) compared to other methodologies for eg; REST(was released in 1999). Currently the approach that the industry has started to embrace is that of using a API wrapper for GraphQL over existing methodologies, so it doesn't matter whether it's REST or SOAP.

We will be exploring that in part 2 (in progress) in which we will also discuss on how to integrate with React.js.

Why are we embracing GraphQL as a new standard ?

One of the core things that GraphQL gives power is that the frontend can request for the exact data that it wants.

Everyone: Why does that matter, is the flat structure of RESTful API not enough?

This is probably one of those questions that we don't really understand until we really get to the origins of why and how GraphQL came to be.

We thought of writing about it, but there is a very good documentary 😍 that we would like to leave you with. They have traced the entire origin of GraphQL and how companies like Facebook, Github and Twitter etc., are adopting it.

The overall goal with this blog was to discuss how GraphQL works and give a brief overview into how the magic happens.

Stay tuned for part 2

You can also follow our blogs on https://blog.quicklyreact.com