React and GraphQL tutorial: Build a Rick and Morty Character App

Learn how to build GraphQL apps with React. In this tutorial, we'll learn about GraphQL, queries and mutations, how to use GraphQL in React apps, and how to work with GraphQL in WebStorm. We're going to build a Rick and Morty Character app.

LInk to the rickandmorty REST API: https://rickandmortyapi.com/api/ Link to the rickandmorty GraphQL API: https://rickandmortyapi.com/graphql Link to the final app codebase: https://github.com/ebenezerdon/react-graphql-rickandmorty-app Link to IDE theme: https://plugins.jetbrains.com/plugin/12891-codelytv-theme

Follow me on Twitter: https://twitter.com/ebenezerDN Follow me on GitHub: https://github.com/ebenezerdon Follow me on LinkedIn: https://linkedin.com/in/ebenezerdon

Outline

• 00:00:00 - Intro
• 00:00:24 - Explaining GraphQL and what we'll be building
• 00:07:24 - Understanding GraphQL Queries and Mutations
• 00:11:13 - Setting up our React app
• 00:15:44 - Setting up GraphQL in WebStorm
• 00:19:31 - Setting up GraphQL in our React app
• 00:21:33 - Making our first React+GraphQL query with the Apollo client
• 00:26:01 - Making GraphQL queries in WebStorm scratch files
• 00:29:08 - Using the Apollo provider in our React-GraphQL app
• 00:29:51 - Querying our GraphQL API inside the App component [1]
• 00:36:07 - Creating our Card component [1]
• 00:37:25 - Querying our GraphQL API inside the App component [2]
• 00:40:23 - Creating our Card component [2]
• 00:44:03 - Querying our GraphQL API with arguments
• 00:49:17 - Wrapping up ... https://www.youtube.com/watch?v=Mh4O3Smf8E0