Fullstack Tutorial with GraphQL, React & Apollo
Learn how to build a Hackernews clone with GraphQL, React & Apollo Client. Use create-react-app for the frontend and graphql-yoga & Prisma for the backend.
What's a major benefit of using a GraphQL client library?
Note: The final project for this tutorial can be found on GitHub. You can always use it as a reference whenever you get lost throughout the course of the following chapters. Also note that each code block is annotated with a filename. These annotations directly link to the corresponding file on GitHub, so you can clearly see where to put the code and what the end result will look like.
In the previous tutorials, you learned about major concepts and benefits of GraphQL. Now is the time to get your hands dirty and start out with an actual project!
You're going to build a simple clone of Hackernews. Here's a list of the features the app will have:
- Display a list of links
- Search the list of links
- Users can authenticate
- Authenticated users can create new links
- Authenticated users can upvote links (one vote per link and user)
- Realtime updates when other users upvote a link or create a new one
In this track, you'll use the following technologies for building the app:
You'll create the React project with
create-react-app, a popular command-line tool that gives you a blank project with all required build configuration already setup.
Why a GraphQL Client?
In the Clients section in the GraphQL part, we already covered the responsibilities of a GraphQL client on a higher level, now it's time to get more concrete.
In short, you should use a GraphQL client for tasks that are repetitive and agnostic to the app you're building. For example, being able to send queries and mutations without having to worry about lower-level networking details or maintaining a local cache. This is functionality you'll want in any frontend application that's talking to a GraphQL server - why build it yourself when you can use one of the amazing GraphQL clients out there?
There are a few GraphQL client libraries available. For very simple use cases (such as writing scripts),
graphql-request might already be enough for your needs. However, chances are that you're writing a somewhat larger application where you want to benefit from caching, optimistic UI updates and other handy features. In these cases, you have the choice between Apollo Client and Relay.
Apollo vs Relay
The most common question heard from people that are getting started with GraphQL on the frontend is which GraphQL client they should use. We'll try to provide a few hints that'll help you decide which of these clients is the right one for your next project!
The performance benefits of Relay come at the cost of a notable learning curve. Relay is a pretty complex framework and understanding all its bits and pieces does require some time to really get into it. The overall situation in that respect has improved with the release of the 1.0 version, called Relay Modern, but if you're for something to just get started with GraphQL, Relay might not be the right choice just yet.