What is GraphQL?

GraphQL is a query language for APIs. In this lesson, we go through an initial discussion on GraphQL and how GraphQL differs from traditional REST APIs.

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

This lesson preview is part of the TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL
  • [00:00 - 00:29] What we've built so far with our Node app conforms to a little more to what a REST API is, REST standing for Representation State Transfer. In traditional REST APIs, the client interacts with a server by accessing various endpoints to get, post, put, or delete data while leveraging the HTTP protocol.

    [00:30 - 00:47] In our app to get all the listings we had to make a request to the /listings endpoint. If we wanted our server to serve data for just one listing, we could implement a /listing/id endpoint, where ID is a dynamic value.

    [00:48 - 00:59] If we had users in our mock data, we could also implement a user /id endpoint to serve certain user data, and so on. Now let's consider an example scenario.

    [01:00 - 01:09] A client app needs to display some user information plus all the listings for that user. Now this client doesn't have to be ours.

    [01:10 - 01:19] Someone else can develop a web or mobile application that interacts with our API. How would we play out this scenario with REST?

    [01:20 - 01:37] With an example REST API, the client would need to make a request to /user/id to fetch the initial user data for that particular ID. Then the client would have to make a second request to something maybe like user id /listings.

    [01:38 - 01:45] That returns all the listings for that user. So far this isn't too bad, it's just two requests.

    [01:46 - 01:53] Where does GraphQL fall in here? GraphQL is a query language for making requests to APIs.

    [01:54 - 02:13] With the GraphQL, the client tells a server exactly what it needs and the server responds back with the data. GraphQL is not tied to any specific fronted or back-end technology, meaning you can use GraphQL with React, View, Node, Ruby, Rails, etc.

    [02:14 - 02:26] Here is an example query where we attempt to query the user of a certain ID. And when we query this user, we can tell our GraphQL API which fields we want to be returned.

    [02:27 - 02:40] In this case, we're saying we want the id field, the name field, and then for the listings for this user, we also want the id and title of these listings. Now GraphQL is also a typed language.

    [02:41 - 02:56] So before we declare how we want each of these fields to be resolved in our back-end API, we have to tell GraphQL the type of the data we expect. We want the id to be of type GraphQL id, the name to be of type GraphQL string.

    [02:57 - 03:07] We want the listings field to be of type a list of listing types. And the exclamation mark here is basically telling our API that this is a required field.

    [03:08 - 03:22] GraphQL allows for some significant benefits. GraphQL APIs are intuitive because the client specifies exactly what data it needs, thus making the code intuitive and easy to understand.

    [03:23 - 03:33] GraphQL APIs are performance because no useless data needs to be transferred. And as a result, reduced latency will make our app feel faster.

    [03:34 - 03:40] This is especially important for slower internet connections. And GraphQL APIs are typed.

    [03:41 - 03:53] GraphQL uses a type system of its own to validate requests. This integrates beautifully with TypeScript to create a robust, statically typed application.

    [03:54 - 04:03] GraphQL APIs are also self-documenting. They encourage the use of GraphQL IDEs or integrated development environments.

    [04:04 - 04:18] And GraphQL APIs also consist of a single endpoint. So for all the data that might be returned from a database or a server, everything is to be served within a single endpoint in GraphQL.

    [04:19 - 04:29] Listings, a certain listing, users, a certain user, etc. As we've mentioned, GraphQL isn't tied to any specific technology.

    [04:30 - 04:43] This is because GraphQL is a specification, not a direct implementation. The community has created several different implementations based on the tools and technologies we might be using.

    [04:44 - 04:58] For example, there's the Apollo Server library for Node Frameworks, GraphQL Java for Java applications, GraphQL Ruby for Ruby applications, and a lot more. And this is the same for client tools as well.

    [04:59 - 05:13] There's Apollo clients for the React, View, and other JavaScript client code that can exist. There's GraphQL Python to work with Python, GraphQL.client for .NET applications, and a lot more as well.

    [05:14 - 05:25] This all might still sound pretty vague and too good to be true. So in the next lesson, we're going to go through an example-driven approach to compare a real REST and GraphQL API.

    [05:26 - 05:37] We'll be using the GitHub API that has been made publicly available. And only after going through the next lesson will we come back and discuss some of the more core concepts of GraphQL.