introduction.md

https://bit.ly/rw-apollo-workshop

Introduction

Hello and welcome to the RedwoodJS Conf Apollo workshop! In this workshop, we will be exploring Apollo Client more deeply, covering more advanced usages of Apollo Client and it's cache. My goal is to get you more familiar with these tools to unlock the potential in your apps.

Each exercise in this workshop is contained in its own folder starting with a number (e.g. 01-component-fragments). Each of these exercises is its own Redwood app. Once you've completed the workshop setup, each exercise can be started as a regular Redwood app.

1. Install dependencies

   yarn

2. Start the app

   yarn rw dev

App

We will be working with a scaled down version of Apollo's Spotify Showcase built with Redwood. When you start up the app after setup and start clicking around, you'll notice that it mostly works, but has some bugs and improvements that can be made. Each exercise will start addressing each of these issues. By the time we are done, we should have a fully functioning Spotify app!

Schema

Current user

Much of this workshop will be working with the CurrentUser GraphQL object type. This type contains the fields that allow you to get data for the logged in user (that's you!), such as your saved tracks, playback state, etc.

The CurrentUser type can be found as the me field in the root Query type.

query {
  me {
    profile {
      displayName
    }
  }
}

This type does not contain an id field, but rather acts as a namespace for data related to the current user. This will be important for some of the exercises in this workshop.

Pagination

Each list type in this workshop is created using a Relay-like connection type albeit with an offset-based pagination scheme. For example, to query for a playlist's tracks:

query FindPlaylistQuery($id: ID!, $limit: Int, $offset: Int) {
  # Each paginated type contains a `limit` and `offset` argument
  playlist(id: $id, limit: $limit, offset: $offset) {
    tracks {
      # Pagination information for the list type
      pageInfo {
        total
      }
      # List of edges which may contain information about the relationship between the parent type and the list
      edges {
        # The actual record, in this case `Track`.
        node {
          id
        }
      }
    }
  }
}