Getting Started with GraphQL

Part 3: Front-end

This is part 3 of Getting Started with GraphQL series. We will be building a Netflix clone with GraphQL. You can check out the demo app here. The source code is available here. You can also play around with demo app’s graphiql here.

Index

• Part 1: Introduction
• Part 2: Back-end
• Part 3: Front-end (you are here)
• Part 4: Basic Features
• Part 5: Deployment

I used this tutorial as reference.

GraphQL with React: The Complete Developers Guide

🚀 Introducing React

We will be using React to build our front-end. React is a web application library for front-end development.

npm install react react-dom

I’m going to assume that you already know React. If not, I learned React from the tutorial below.

The Modern React Bootcamp (Hooks, Context, NextJS, Router)

🚀 Introducing Webpack

Webpack is a module bundler. Webpack makes sure dependencies are imported in the correct order and bundle all the files into one file. Since all the js code is in one big file, the client only needs to request once. Check A Brief History of the Dependency Graph section of the link below for more details.

Webpack: When To Use And Why

In order to run back-end and front-end at the same time (this is a toy project so we are putting everything in one project), we will use webpack as middleware to response all the request to / with front-end code.

npm install --save webpack webpack-dev-middleware html-webpack-plugin babel-loader

Add these code to your back-end.

Now we need to configure webpack and tell it what to bundle and how to bundle.

Update .babelrc to tell Babel how to compile .jsx files.

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]
}

Start the server and go to / directory and you should see a white page with the text Jflix .

🚀 Introducing Material-UI

Material-UI is a React component library that helps us build front-end quickly without worrying too much about the styling.

npm install @material-ui/core

GraphQL with React

We will be using something called Apollo Client, JavaScript client for GraphQL. This library helps us handle data fetching and management, so we can focus on building our application.

Apollo

npm install apollo-boost @apollo/react-hooks graphql

Query

The tutorial I was using was old and inconsistent with latest documentation (Apollo Client is relatively new so there are active changes). So I used tutorial as reference for this section.

The goal of this section is to figure out how to fetch data with GraphQL. We are going to create a class component MovieList that requests the data and display the response. Since JavaScript does not understand the query language, we will use gql from apollo-boost to help JavaScript compiler to understand it.

This looks really weird but it is a valid JavaScript syntax. This is called template tagging. Let’s digest this slowly. You are probably already familiar with template literal.

const val = 5;
const str = `val is ${val}`; // "val is 5"

Template tagging is just a function that takes a template literal as argument. So when we interpolate a string, this is kind of what’s happening.

See the link below for more details.

A guide to JavaScript Template Literals

We want to send the query to the server. We use Query component for making the request and receiving the response. Query takes query as a prop and requires a function as a child (this is called context consumer in React). The request status including response data will be sent to the function as the parameters (i.e. loading , error , data ).

You should see something like this on the screen.

Mutation

I used this as reference. In this section, we want to be able to add a movie from the front-end. To make things simple, forget about MaturityRating and MovieGenre . Let’s start with just title , description , and released_year . (I’ve temporarily removed the code for MaturityRating and MovieGenre for addMovie mutation)

We want to send a mutation query to GraphQL server when the submit button is clicked. Just like with query, we use gql to write the mutation and pass it to Mutation component.

But wait, how do we access the text field data in MovieForm ? GraphQL supports variable arguments. If you go to graphiql , you can open QUERY VARIABLES panel located at the bottom left corner.

This is how we use variables in GraphQL.

mutation NewMutationName($variable1: Type, $variable 2: Type) {
  ExistingMutationName(param1: $variable1, param2: $variable2) {
    ...
  }
}

We define a new mutation NewMutationName where we tell GraphQL what variables we want to use. Note the variable name must start with $ sign. Then we can use the variables with $variable . Under QUERY VARIABLES panel, we can assign values to these parameters as follows.

Now we just need to do similar things in React. Go update our mutation to expect arguments.

Just like the Query component, Mutation requires a function as a child. This function will receive these arguments.

• 1st argument: the mutate function
• 2nd argument: { data, loading, error } , where data is the response from the server.

When you fill out the text fields and press submit, you see that we have successfully send mutation to GraphQL server.

If you refresh the page to force refetch the movie list, the movie we just added will appear at the last row.

Refetch Data Automatically

But this is weird. If we submit a movie, we wan to see it in the list immediately (without refreshing the page)! All you need to do is to tell GraphQL what queries to run again when the mutation is done.

I exported query from MovieList and named it GetAllMovieQuery here. This tells GraphQL to run GetAllMovieQuery once the mutation is completed, which updates the state of Apollo internally and triggers rerender. Now you should see the list is updated immediately after submit.

No refresh needed!

Now you know the basics for using GraphQL. In the next part, we will be styling the website to look more like Netflix:)