1. Intro & setup
10m

👋 Welcome to Summit 2024

...and Realtime data across your graph with federated subscriptions. We're so excited to have you here with us!

In this workshop, you'll learn how to bring realtime data capabilities into our API. We'll take an existing and introduce a chat feature that runs on data throughout the graph.

What you'll learn:

  • Define and use the Subscription type in a federated
  • Implement HTTP Callbacks between the and
  • Apply the @requires and @external s

⚠️ Before the workshop...

Please complete the pre-requisite installations and account creation instructions.

Task!

Helpful links

Agenda

With all of our setup out of the way, let's talk about the structure of the workshop.

  • PART 1: First, we'll discuss the ins and outs of using in federation. We'll look at a couple ways that we can make subscriptions work, and talk about the method we'll focus on today.
  • PART 2: Next, we'll implement our ! We'll bring realtime data into our application; , schema, , you name it!
  • PART 3: After that, we'll tweak our with some inter- optimizations! We'll see how we can use data from a different subgraph to influence our events.
  • PART 4: Finally, we'll take a closer look at how we can monitor the performance of our with telemetry and debuggability.

Sound good? Great! Time to get to know your companion course. (You are here! 📍)

📖 How to use this companion course

You can use this course as a reference throughout the workshop. Here you'll find instructions, code snippets and exercise solutions that we'll be going through in the workshop.

Follow-along: Lessons starting with Follow-along are designed for you to follow along with the instructor! Do what they're doing, but on your own machines.

Exercise: Lessons starting with Exercise are designed to be an individual exercise for you to try your best to solve on your own! If you need help, you can pair with someone beside you, flag down a mentor or consult the solution in that same lesson.

Setup checkpoint

What we're building

Want to book a trip to new, exciting, sometimes-fictional places in the vast universe? Enter Airlock!

The Airlock app homepage with a list of places to book.

Airlock is an intergalactic travel app that lets us browse listings and their amenities, make bookings—and soon, we'll be able to chat with our hosts.

Subscriptions in Airlock

Our Airlock app already consists of several . The subgraphs we'll interact with today are:

  • accounts: guest- and host-specific data
  • messages: our ✨NEW✨ subgraph, which we'll stuff with subscription goodness for realtime communication between guests and their hosts
  • Provided time, listings: all the data under the sun about our intergalactic listings and their amenities

Our goal for the messages is to subscribe to new messages that are sent in a particular conversation. We're just handling backend logic here: we won't focus on any of the frontend fanciness, but this will provide us with the foundation to build something production-grade.

An image of a chat application showing realtime communication between a guest and a host

Test out some operations!

When your is all setup, jump into Studio Explorer and test out some . The first time you run an operation, Explorer will prompt you for the 's routing URL. By default, we should be running on port 4000.

http://127.0.0.1:4000
https://studio.apollographql.com

A screenshot of Explorer showing the Connection Settings modal and the URL for our router

Provide an Authorization header

First, we'll need to provide an Authorization header to accompany our . We have a number of different users to choose from, but one particular user is already part of a conversation:

Authorization: Bearer xeno

Test it out! Run the following command to get data about the user you've just authenticated as.

query GetMe {
  me {
    id
    isLoggedIn
    name
    lastActiveTime
    profileDescription
  }
}
https://studio.apollographql.com

A screenshot of Explorer showing the response for the GetMe operation

Now that you're "authenticated", you can create a conversation, get a list of active conversations, a specific conversation, etc. Be sure to always include your Authorization header with every request!

Fetch all of the user's conversations
query GetConversations {
  conversations {
    messages {
      text
      sentFrom {
        id
      }
    }
  }
}
https://studio.apollographql.com/

The Explorer in Studio, showing an operation to fetch all conversations along with its response

Note: By default, there won't be any messages in this conversation! (We'll get there.)

You can also create a different conversation by scratch. If you're authorized as user "xeno", try out creating a new conversation with recipient "dallas".

Create a new conversation
mutation CreateConversationWithRecipient($recipientId: ID!) {
  createConversation(recipientId: $recipientId) {
    id
    createdAt
  }
}

And in the Variables panel:

{
  "recipientId": "dallas"
}
https://studio.apollographql.com/

The Explorer in Studio, showing an operation to create a conversation along with its response

Note: Each time you open a tab for a new , you'll need to include the auth header specified earlier.

Finally, you can log in your user and log them out again. Try this .

Toggle the user's logged in status
mutation ToggleUserLoggedIn {
  changeLoggedInStatus {
    time
    success
    message
  }
}
https://studio.apollographql.com/

Toggling the logged in state of our authenticated user

Saving operations for the future!

The following will come in handy through the remainder of the course. We don't have the schema in place to run all of these operations currently, but we'll get there! Let's save them to a new Collection.

We can do this by opening the in a new tab and clicking the Save icon.

https://studio.apollographql.com/

Highlighting the bookmark icon and the save button to access and save to operation collections

This will prompt us to give the a name, and select the collection we want to save it to.

https://studio.apollographql.com/

The save operation modal, with the dropdown open to save to a new default personal collection

Let's add each of these so that we can access them more easily in the future.

Subscribe to a conversation

subscription SubscribeToMessagesInConversation(
  $listenForMessageInConversationId: ID!
) {
  listenForMessageInConversation(id: $listenForMessageInConversationId) {
    text
    sentTime
  }
}

Send a message to a conversation

mutation SendMessageToConversation($message: NewMessageInput!) {
  sendMessage(message: $message) {
    id
    text
    sentTo {
      id
      name
    }
  }
}

Log a user in and out

Toggle the user's logged in status
mutation ToggleUserLoggedIn {
  changeLoggedInStatus {
    time
    success
    message
  }
}

Fetch all of a user's conversations

Fetch all of the user's conversations
query GetConversations {
  conversations {
    messages {
      text
      sentFrom {
        id
      }
    }
  }
}

Subscribe to a conversation (including a user's online status)

subscription SubscribeToMessagesInConversationIncludeOnline(
  $listenForMessageInConversationId: ID!
) {
  listenForMessageInConversation(id: $listenForMessageInConversationId) {
    text
    sentTime
    sentTo {
      isOnline
    }
  }
}

Send a message to conversation (including a user's online status)

mutation SendMessageToConversationIncludeOnline($message: NewMessageInput!) {
  sendMessage(message: $message) {
    text
    sentTo {
      id
      name
      isOnline
    }
  }
}
Next

Share your questions and comments about this lesson

Your feedback helps us improve! If you're stuck or confused, let us know and we'll help you out. All comments are public and must follow the Apollo Code of Conduct. Note that comments that have been resolved or addressed may be removed.

You'll need a GitHub account to post below. Don't have one? Post in our Odyssey forum instead.