Getting Started with GraphQL
Part 4: Basic Features
This is part 4 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
- Part 4: Basic Features (you are here)
- Part 5: Deployment
We’ve managed to add some preliminary features in part 3 of this series. In this part, we will make the website look nicer and add basic features to it.
🚀 Styling and Configuring Webpack
I used the link below as reference.
Before we dive into adding more features, let’s style the website nicer. We will be introducing files with .ico
, .css
, .png
extensions. Webpack by default only knows JavaScript. That’s why we used bable-loader
to help webpack understand how to bundle .ts
files. We want to install appropriate loaders/plugins to bundle those file types.
# tell webpack how to bundle .css files
npm install --save-dev style-loader css-loader# tell webpack how to bundle .png .jpg .gif
npm install --save-dev file-loader# tell webpack how to bundle .ico
npm install --save-dev favicons-webpack-plugin
Your webpack config should look like this.
Styling
I went ahead and added some styling to the website. I will skip the details here because it’s primarily stuff related to React and not GraphQL. The end result looks like this.
I split the list and forms into different tabs. Home
, Movies
, andTV Shows
all renders MovieList
at the moment. Eventually, Home
tab should render both MovieList
and SeriesList
. Movies
tab will display MovieList
and TV Shows
tab will display SeriesList
.
Complete Lists and Forms
In previous part, we didn’t require genres
and maturity_rating
for creating a movie
. We will now remove these constraints and complete the lists and forms. Since Movie
depends on MaturityRating
and MovieGenre
, we will start with these dependencies.
Maturity Rating
Recall we already defined getAllMaturityRatings
and addMaturityRating
on the back-end. So just like how we created MovieList
and MovieForm
in previous part, we can create MaturityRatingList
and MaturityRatingForm
as follows.
MaturityRatingForm
is working as expected!
Hmm, but we can’t tell if the request goes through when we click submit. Let’s add a snackbar that informs the user whether the request was successful or not. According to the documentation, Mutation
component also takes onCompleted
and onError
callbacks. So we can open the notification in these callbacks.
Voilà! This is much more user friendly.
Remember we set the mutation parameter be GraphQLNonNull
? As a result, when the textfield is empty (i.e. null), the server responded with 500
error code.
Movie Genre
The implementation is essentially same as MaturityRating
above.
Movie
This is the interesting part. We now need to input the maturity_rating
and genre_ids
to create a movie. First, create a textfield for users to input maturity_rating
. We need to call getAllMaturityRatings
query and supply the response data to the textfield.
It should look something like this.
MovieGenres
is a little bit tricky because we allow users to add multiple genres to a movie. We need to use multiselect component.
Okay! Looks like the new movie is created successfully and its reference is also added to corresponding MovieGenre
.
Hmm, the movie list looks a little dry. Why is that? Well, it’s missing images! Remember what Netflix’s collection looks like?
Add image
field to Movie
model, MovieType
, addMovie
mutation, and MovieForm
.
Series Genre and Series
Just repeat the same thing we did for Movie
and MovieGenre
, and you are good to go.
Add your own movies/series
Go ahead and add some of your favorite movies and series! After some styling, you will get something like this.
Can’t wait to share your favorite movies/series to the world? We will deploy our app on Heroku in the next part!