GraphQL Query Language
Listen for Data Changes in Real-time with a GraphQL Subscription
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.
Instructor: [00:00] 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.
[00:16] 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.
[00:30] 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.
[00:50] 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.
[01:03] 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.
[01:16] 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.
[01:30] 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.
[01:46] 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.
Looks like the default connections over a websocket with Apollo Server is 10 unless you specify more. I updated the code so that this wouldn't be a problem even if many people are connected. Thanks for the heads up!
Hi @Eve, here Subscriptions are not testable "message": "Cannot read property 'headers' of undefined"
Make sure you are "logged in" and have your token present in the headers. That should resolve the problem! Thanks!
Hi, I am having an issue connecting to websocket from my browser. Getting following error:
{
"error": "Could not connect to websocket endpoint wss://funded-pet-library.moonhighway.com/graphql. Please check if the endpoint url is correct."
}
@Vui I got the same error but went ahead to write the checkOut and checkIn mutations and I got the desired response for the subscription
Hello, Having some issues here with the subscription: { "error": "Could not connect to websocket endpoint wss://funded-pet-library.moonhighway.com/graphql. Please check if the endpoint url is correct." } /* Endpoint: https://funded-pet-library.moonhighway.com/
*/
{ "error": "Could not connect to websocket endpoint wss://pet-library.moonhighway.com/graphql. Please check if the endpoint url is correct." }
Having some issues here with the subscription: could not connect to websocket endpoint wss://funded-pet-library.moonhighway.com/.