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 has transformed the way developers build web applications, GraphQL is an emerging technology that changes how they build APIs to query and mutate data. With GraphQL developers can query the exact data required by a page, or an application, and therefore it does not load an excessive amount of data. GraphQL can be used in any web or mobile application. In this training, you will get up and running with GraphQL and discover the core knowledge needed to create an application using React and GraphQL. (Please note that throughout this workshop we’ll be using React Apollo and Apollo GraphQL)

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

  • By the end of this live, hands-on, online course, you’ll understand how to:

  • Implement a more advanced application that uses React to work with GraphQL.

  • Think about your applications data in terms of a graph structure.
  • Utilise media optimisation 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 front-end or developer who wants to apply GraphQL concepts to a React App.
  • You are a web developer, who already works with React, and are new to GraphQL.
  • You’d like to know how to remove excessive data from your application.
  • Interested in how to specify the exact data structure to be returned from an API.

Prerequisites

  • Basic React knowledge (components, state, props, modules and event handlers)
  • Basic understanding of API design (RESTful APIs)
  • Basic GraphQL understanding (Queries, DataTypes, Basic Mutations)

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

Introduction and Setup: Overview of the App architecture (React and GraphQL) (20 minutes)

  • Presentation
  • Q&A

Getting started with Apollo GraphQL (Server Side) (30 minutes)

  • Presentation & hands-on demonstration: Adding Apollo GraphQL server
  • Exercise
  • Q&A

5 min BREAK

Getting started with Apollo GraphQL (Client Side) (20 minutes)

  • Presentation & hands-on demonstration: Adding Apollo Client to React
  • Exercise

Applying GraphQL to React (35 minutes)

  • Presentation & hands-on demonstration: GraphQL client in a React application
  • Exercise
  • Q&A

5 min. BREAK

Create, Update and Delete (40 minutes)

  • Presentation & hands-on demonstration: Using CRUD operations in a GraphQL context
  • Exercise
  • Q&A

5 min. BREAK

Managing media (25 minutes)

  • Presentation & hands-on demonstration: Uploading Images
  • Exercise

Implementing a custom Data Type in GraphQL (25 minutes)

  • Presentation & hands-on demonstration: Create a custom data type to manage media (image) resources
  • Exercise

Running queries using a custom Data Type (30 minutes)

  • Presentation: display media (image) resources via GraphQL
  • Exercise
  • Q&A