O'Reilly logo
live online training icon Live Online training

Creating React applications with GraphQL

Unleash the power of data queries in your next React project

Tamas Piros

Just as React transformed the way developers build web applications, GraphQL is changing how developers build APIs to query and mutate data. With GraphQL you can query the exact data required by a page or an application without loading an excessive amount of data. And GraphQL can be used in any web or mobile application.

Expert Tamas Piros gets you up and running with GraphQL. You’ll discover everything you need to create a basic application using React and GraphQL with React Apollo and Apollo GraphQL. You’ll also learn some things that may surprise you. For instance, did you know that GraphQL isn’t cacheable, but it’s a supplement to React and a replacement for RESTful APIs? Join Tamas to find out more.

What you'll learn-and how you can apply it

By the end of this live online course, you’ll understand:

  • How to implement a more advanced application that uses React to work with GraphQL
  • How to think about your application’s data in terms of a graph structure
  • How to utilize media optimization via GraphQL

And you’ll be able to:

  • Run GraphQL queries in a React context
  • Create custom types for GraphQL
  • Manage media via a third-party service and GraphQL

This training course is for you because...

  • You’re a frontend developer who wants to apply GraphQL concepts to a React App.
  • You’re a web developer working with React, but you’re new to GraphQL.
  • You want to know how to remove excessive data from your application.
  • You’re interested in specifying the exact data structure returned from an API.

Prerequisites

  • General knowledge of React (components, state, props, modules, and event handlers)
  • A basic understanding of API design (RESTful APIs) and GraphQL (queries, data types, and basic mutations)
  • A machine with a React development environment, Node.js (LTS or current), and a text editor installed

Recommended preparation:

Recommended follow-up:

About your instructor

  • Tamas Piros is a director at Full Stack Training and a web developer turned technical instructor, curriculum developer, developer evangelist, and Google Developer Expert in web technologies. He has more than a decade of experience working with large, prestigious organizations. He’s delivered training classes for clients and regularly conducts presentations and workshops at conferences and meetups all over the world.

Schedule

The timeframes are only estimates and may vary according to how the class is progressing

Overview of React and GraphQL architecture (20 minutes)

  • Lecture: Discuss the fundamentals of GraphQL and why it’s a cutting edge technology.
  • Q&A

Getting started with server-side Apollo GraphQL (30 minutes)

  • Lecture: How to utilise the Apollo GraphQL server
  • Hands-on exercise: Code review and implementation
  • Q&A
  • Break (5 minutes)

Getting started with client-side Apollo GraphQL (20 minutes)

  • Lecture: Adding Apollo client to React
  • Hands-on exercise: Code review and implementation

Applying GraphQL to React (35 minutes)

  • Lecture: GraphQL client in a React application
  • Hands-on exercise: Code review and implementation
  • Q&A
  • Break (5 minutes)

Create, update, and delete (40 minutes)

  • Lecture: CRUD operations in a GraphQL context, learn how to read and write data from GraphQL
  • Hands-on exercise: Code review and implementation
  • Q&A
  • Break (5 minutes)

Managing media (25 minutes)

  • Lecture: Learn how to manage images via GraphQL
  • Hands-on exercise: code review and implementation

Implementing a custom data type in GraphQL (25 minutes)

  • Lecture: Creating a custom data type to manage media (image) resources
  • Hands-on exercise: Code review and implementation

Running queries using a custom data type (25 minutes)

  • Lecture: Displaying media (image) resources via GraphQL
  • Hands-on exercise: Code review and implementation

Wrap-up and Q&A (5 minutes)