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 is a Developer Evangelist with a decade of experience in full-stack web development as well as a robust technical instructor background, and has a decade of experience working with customers and training them in technologies including but not limited to JavaScript, Angular, Node.js, TypeScript, XQuery, Java, NoSQL and related database technologies and methodologies.

    Throughout his career Tamas has delivered technical training sessions to large, multinational organisations such as Verizon, Orange, BBC, Accenture, Panasonic, Credit Suisse, Deutsche Bank and OECD to mention a few. On top of the training sessions, Tamas also regularly conducts workshops and presentations all over the world. He spoke at prestigious conferences that include HTML5 DevConf in San Francisco and JSConf Asia in Singapore among various others and at a significant number of meetups throughout Europe.

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
  • Q&A

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

  • Lecture: Adding Apollo GraphQL server
  • Hands-on exercise
  • Q&A
  • Break (5 minutes)

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

  • Lecture: Adding Apollo client to React
  • Hands-on exercise

Applying GraphQL to React (35 minutes)

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

Create, update, and delete (40 minutes)

  • Lecture: CRUD operations in a GraphQL context
  • Hands-on exercise
  • Q&A
  • Break (5 minutes)

Managing media (25 minutes)

  • Lecture: Uploading images
  • Hands-on exercise

Implementing a custom data type in GraphQL (25 minutes)

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

Running queries using a custom data type (25 minutes)

  • Lecture: Displaying media (image) resources via GraphQL
  • Hands-on exercise

Wrap-up and Q&A (5 minutes)