Home

GraphQL Workshop Tutorial

Welcome to the tutorial accompanying the GraphQL workshop. This purpose of this tutorial is to get you up and running with GraphQL and to introduce the most important concepts of using GraphQL.

There are 3 parts to this tutorial:

• Fundamentals: Chapters with assignments to step-by-step build a GraphQL api and web application, including solutions
• Testing: Explains 3 possible testing strategies
• Final Project: A final assignment to build a SpaceX application, including solutions

To get the most out of this workshop we recommend solving the assignments on your own, and using the solutions as comparison or if you're really stuck . The workshop presentation together with the information in the chapters contain everything you need to solve the assignments.

Some programming experience in C-style languages (JS, TS, Java, etc.) is required. In this tutorial we use TypesScript, we try to explain the syntax and keep it simple as we go along. But you might have to lookup a TypeScript API if certain code looks unfamiliar.

If you get stuck or can't solve an assignment, we still encourage you to follow along and learn about GraphQL by reviewing the chapter solutions.

Let's start with the tutorial!

Pre-requisties

You should already have the following:

• Installed NodeJS 10 or 12
• Installed Yarn

Contents

• Setting up your development environment
• More information about this codebase and the GraphQL setup

Fundamentals

A step-by-step or standalone guide to build a GraphQL API and web application. It's possible to start at any chapter. Each chapter contains assignments that are free to implement however you'd like. As a more guided track you can follow the solutions where we build a favourite list app.

You can also start with the projects and use the fundamentals guide as a reference. Chapter 4 is a project to build a Covid tracking application, and in the final project we build a SpaceX application.

1. My first query
   [Frontend, Backend]
   Writing our first query using GraphQL

2. Calling GraphQL from React
   [Frontend]
   Consuming our GraphQL API from React

3. Server Side Rendering
   [Frontend]
   Configuring Server Side Rendering

4. Project - Covid App
   [Frontend, Backend]
   Real world example of connecting to a service to build a covid app

5. Paging
   [Frontend, Backend]
   Implement paging

6. Lazy Queries
   [Frontend]
   Conditionally call GraphQL

7. Mutations
   [Frontend, Backend]
   Modifying and updating data

8. Fragments
   [Frontend]
   Re-usable components using Fragments

9. Union Types
   [Frontend, Backend]
   How to use union types

10. Dataloader
    [Backend]
    Make your API efficient

11. Advanced GraphQL
    [Frontend, Backend]
    Caching, Input types, interfaces, scalars, optimistic responses

Testing

There are 3 parts to testing GraphQL. In these chapters we take a close look at all the strategies.

12. Unit Testing Client Side
    [Frontend, Test]
    How to unit test GraphQL powered components

13. Unit Testing Server Side
    [Backend, Test]
    How to unit test GraphQL API's

14. Integration Testing
    [Test]
    How to run integration tests on GraphQL API's

Final Project

15. SpaceX App
    [Frontend, Backend]
    In this project we build an app using the SpaceX API.