Wan

How to GraphQL Course Review

June 17, 2019

If you’re a beginner fresh from learning React, you might have heard of GraphQL and want to learn that next.

In this post, I will review one resource you could use to start learning GraphQL: How To GraphQL by Prisma and members of the GraphQL community.

Price

It’s free. Enough said.

Stacks Covered

Compared to most resources out there, I’m impressed by the stack covered by How To GraphQL:

  • React (a library excellent for building UIs)
  • Apollo (a suite of tools that helps us to easily build GraphQL-based software)
  • GraphQL-Yoga (an express server that is pre-configured to run as a GraphQL server)
  • Prisma (an ORM that simplifies database access via GraphQL)
  • GraphQL (a query language for API)

You will learn almost all you need to build your own GraphQL-based clients and servers. Though, the course doesn’t teach you how to deploy both of them; I wish they did teach that because due to our use of Prisma, we actually need to deploy four servers (including our client server). To help you deploy, I’ll share deployment-related resources at the end of this post.

Another thing they don’t teach you is authorization and authentication that are not based on Local Storage.

Course Flow and Difficulty

When you first start, you are encouraged by the site to get a high-level view of GraphQL by reading or watching a series of lessons. This is important especially if you’re used to RESTful APIs.

The lessons during the high-level phase are not difficult. Note that nothing in the course is linear or mandatory. You can skip through any lessons and start the Frontend and Backend tracks.

Afterwards, you can choose one sub-course from the Frontend and Backend track. For the frontend, I recommend you take the React + Apollo course. For the backend, take the Node course.

The site won’t tell you which of the two courses you should start first. I recommend doing the backend first because it can live independently from the frontend while the frontend is dependent on the backend for it to work. Other than that, doing the backend will introduce you to the GraphQL Playground which is a great tool to understand how GraphQL queries and mutations work.

The end-product after completing both those courses is a Hacker News clone with the following features:

  1. Signup
  2. Login/Logout
  3. Create and delete post
  4. Upvote post
  5. Real-time update of the frontpage whenever a new post is added (either by you or a different user)
  6. Authorization via JWT stored in Local Storage

As expected of a beginner course, the course will guide you step-by-step and hand-holding is always involved. Reduce your copy-pasting and try to implement your own features if you want to get more out of the course.

Conclusion

I highly recommend How to GraphQL if you’re interested in learning GraphQL and how we can use it client and server-side. Before the course, I tried Wes Bos’ (Advanced React)[https://advancedreact.com/] paid course but there’s a lot that goes over my head; How to GraphQL immensely helped me complement the concepts I didn’t catch from Bos’ course.

If you’re interested to start the course, the following are some resources that might help you deploy your Hacker News clone:

React and Apollo client

Deploy your React and Apollo client with Zeit’s NOW

Deploy your React and Apollo client with Netlify

Deploy your React and Apollo client with Heroku

Prisma and Database server

Deploy your Prisma and database server with Heroku

Once you’ve deployed both servers, remember to go to your backend folder and run prisma deploy (doc). Use prisma-deploy -n so you can choose to create a new service that is linked to your new prisma server hosted on heroku rather than the tutorial demo server.

The endpoint of the service, which you can view in app.prisma.io, is needed by your GraphQL-Yoga server to communicate with your Prisma server.

GraphQL-Yoga server

Deploy your GraphQL-Yoga with Heroku

Once deployed, Remember to change the frontend and the prisma service url to the production versions.


Get post updates via email