Skip to content

Contact sales

By filling out this form and clicking submit, you acknowledge our privacy policy.

Relay & GraphQL

Course Summary

The Relay & GraphQL course is designed to demonstrate how to utilize Relay with GraphQL in the context of React applications.

The course begins with lectures and exercises on making GraphQL requests and understanding Relay concepts like fragments, variables, and callbacks. Next, it explores Relay concepts like slicing, pagination, and data fetching. The course concludes with a deep dive into Relay mutations, including working with optimistic updates and fat queries.

Purpose
 Learn how to use Relay with GraphQL in the context of React applications.
Audience
 Developers with some experience in developing React components.
Role
Software Developer - Web Developer
Skill Level
Intermediate
Style
Hack-a-thon - Workshops
Duration
3 Days
Related Technologies
JavaScript | Relay Modern | Web Development

 

Productivity Objectives
  • Explain the problems that GraphQL and Relay help to solve
  • Write GraphQL queries to retrieve data from a database
  • Build out a client UI that specifies its data needs using Relay to connect to your GraphQL-based server

What You'll Learn:

In the Relay & GraphQL training course, you'll learn:
  • Introduction
    • Demand Driven Architecture vs REST
    • GraphQL and Relay
  • Making GraphQL Requests
    • Utilize GraphiQL to send queries
    • Define Queries
    • Understand Types
    • Specify Query Parameters
    • Understand Fragments
    • Utilize Query Variables
    • Under the Hood: How a GraphQL Server Responds to Queries
  • Relay Concepts
    • Containers, Fragments, Root Container and Routes
    • Internal Architecture Client-Side Cache
  • Getting Started with Relay
    • Relay Container Composition
    • Name Fragments and Variables
    • Pass Variables to Fragments
    • Set and Using Relay Variables
    • Conditional Fields with @include and @skip
    • Debugging Network Requests
    • Render Callbacks
  • Slicing and Paginating
    • Relay Support in GraphQL: Cursors, Slicing and Paginating Data using Connections
    • Relay Support in GraphQL: Edges and PageInfo
    • Navigating/Paginating one-to-many relationships
  • Querying via Relay
    • Re-fetching, the Node Interface, and Global 'id's
    • The Node root field
    • Thinking in Graphs
  • Data Fetching
    • Data fetching & Ready State
    • Utilize Ready State Events
    • Handle Server Errors
    • Force Fetching
  • Mutations
    • Relay's Mutation Pattern
    • Handling Mutations
    • Optimistic Updates and Fat Queries
    • Mutator Configurations & Updating the Client Store
    • Range Behaviors
    • Mutations for: adding an item, changing an item, deleting an item
real world content

Real-World Content

Project-focused demos and labs using your tool stack and environment, not some canned "training room" lab.
expert practitioners

Expert Practitioners

Industry experts that bring their battle scars into the classroom.
experiential learning

Experiential Learning

More coding than lecture, coupled with architectural and design discussions.
tailored outlines

Tailored Outlines

One-size-fits-all doesn't apply to training teams. That's where we come in!
“I appreciated the instructor's technique of writing live code examples rather than using fixed slide decks to present the material.”

VMware

Dive in and learn more

When transforming your workforce, it's important to have expert advice and tailored solutions. We can help. Tell us your unique needs and we'll explore ways to address them.

Let's chat

By filling out this form and clicking submit, you acknowledge our privacy policy.