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!
