Skip to content
  • Sign In
  • Try Now
View all events
GraphQL

Creating React Applications with GraphQL

Published by O'Reilly Media, Inc.

Intermediate content levelIntermediate

Unleash the power of data queries in your next React project

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 live event 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:

Schedule

The time frames 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)

Your Instructor

  • Tamas Piros

    Tamas Piros is a Google Developer Expert in web technologies and a seasoned developer experience engineer. He’s a passionate advocate for modern web technologies, helping people understand and unlock the latest and greatest features of web development.

    linkedinXlinksearch