GraphQL, React, and TypeScript introduction
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo 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.
Lesson Transcript
[00:00 - 00:13] Introduction. In this part of the course we will learn how to use GraphQL with TypeScript. GraphQL is a typed query language that allows you to specify exactly which fields you want to get from the backend when you query for some data or you want to perform some mutation on the backend.
[00:14 - 00:21] Let's say you work with a Pokemon API and you want to fetch some data about the Pokemon. You would send a query containing the fields you're interested in.
[00:22 - 00:31] For example here we want to get the ID, number and name of the Pokemon. As a result we'll get an object containing all the fields that we required.
[00:32 - 00:41] As we've asked for an ID, number and name we got all those fields. To use GraphQL you need to support it both on the backend and the front end of your application.
[00:42 - 00:47] For the front end there are a bunch of libraries available, all of them have React bindings. For example there is Relay.
[00:48 - 00:54] It is a library by Facebook released alongside GraphQL. It has a steep learning curve and you may need some time to learn it.
[00:55 - 01:06] There is your quail. It is a GraphQL library by Formidable Labs that has a nice and easy to learn API. And also there is Apollo. It's a platform that provides client libraries for all popular web frameworks and mobile platforms.
[01:07 - 01:15] It is popular and has an easy to learn API. We will use it in this part of the course. All these libraries provide wrappers to perform GraphQL requests.
[01:16 - 01:24] But you can also perform GraphQL requests manually. After all it's just a regular HTTP request. For example you can try to run this curl in the terminal.
[01:25 - 01:33] Here we try to fetch a query to get the data about pk2 Pokemon. As a result we get the data describing this Pokemon for us.
[01:34 - 01:41] Most GraphQL server implementations also provide schema explorer. For example if you want to play with the Pokemon API you can do it here.
[01:42 - 01:49] GraphQL Pokemon 2, Versal.App and here you will see the playground where you can execute GraphQL queries. You will see the results on the right panel.
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
Introduction. In this part of the course we will learn how to use GraphQL with TypeScript. GraphQL is a typed query language that allows you to specify exactly which fields you want to get from the backend when you query for some data or you want to perform some mutation on the backend. Let's say you work with a Pokemon API and you want to fetch some data about the Pokemon. You would send a query containing the fields you're interested in. For example here we want to get the ID, number and name of the Pokemon. As a result we'll get an object containing all the fields that we required. As we've asked for an ID, number and name we got all those fields. To use GraphQL you need to support it both on the backend and the front end of your application. For the front end there are a bunch of libraries available, all of them have React bindings. For example there is Relay. It is a library by Facebook released alongside GraphQL. It has a steep learning curve and you may need some time to learn it. There is your quail. It is a GraphQL library by Formidable Labs that has a nice and easy to learn API. And also there is Apollo. It's a platform that provides client libraries for all popular web frameworks and mobile platforms. It is popular and has an easy to learn API. We will use it in this part of the course. All these libraries provide wrappers to perform GraphQL requests. But you can also perform GraphQL requests manually. After all it's just a regular HTTP request. For example you can try to run this curl in the terminal. Here we try to fetch a query to get the data about pk2 Pokemon. As a result we get the data describing this Pokemon for us. Most GraphQL server implementations also provide schema explorer. For example if you want to play with the Pokemon API you can do it here. GraphQL Pokemon 2, Versal.App and here you will see the playground where you can execute GraphQL queries. You will see the results on the right panel.