Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Listen for Data Changes in Real-time with a GraphQL Subscription

    Eve PorcelloEve Porcello
    graphqlGraphQL

    A GraphQL API can push new data to the client with the Subscription Type. In this lesson, we’ll listen to checkIn and checkOut mutations in real time.

    To follow along with these queries, go to the Pet Library GraphQL Playground.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: At this point, we've requested data with queries, we've changed data with mutations. There's one more operation type, though, with GraphQL. That is a GraphQL subscription. Let's say we wanted to set up a real-time listener for anytime a pet is returned.

    The way that we would do this is to use a subscription. Let's close the schema, and in order to check in a pet, we have to check out a pet. In order to do either of those things, we have to be logged in. Let's make sure that we're logged in.

    We're going to provide our username and our password, and now, I can log in. The next thing I want to do is grab the token so that I can make myself an authorized user. I will add this to the HTTP headers under the authorization key. We'll add bear and paste the token.

    The next step is I want to add a subscription. Let's add a new tab. We're going to add our subscription here. These, as we saw, are named just like queries and mutations. This time, it's going to be called petReturned.

    The petReturned subscription returns something. What this returns is the checkout object. We have access to the pet, the checkout date, the check-in date, and whether or not the pet was late.

    Here, we want to add the pet query, and then we'll add name. As soon as I click play, we're going to notice some different behavior. This is listening for any changes, so it's not a request and a response. Instead, we're listening over a web socket.

    Now, let's open up one final tab here. We're going to add a mutation for checkout, and the pet that I want to check out is going to be C2. I'll get the pet and their name, then I'll change this to checkin to check-in the same pet.

    Now, if I switch back to our subscription, we see that the petReturned subscription has heard some new data. We've echoed back this checkout object. The GraphQL subscription is very useful. Whenever you have any real-time needs in your application, you're going to use a subscription. Then we can use a mutation to trigger that change.