Display GraphQL Subscription Results in a React UI

Ian Jones
InstructorIan Jones

Share this video with your friends

Send Tweet
Published 2 years ago
Updated 4 months ago

Now that we have multiple comments coming in, we'll need to let every user connect to the OneGraph GitHub subscription. Not just the admin.

OneGraph has an option to allow subscriptions to non-admins for just this case.

Ian Jones: [0:00] Up above, we will import Comments from './Comments' and then we'll return our comments component with Comments = handleSubscriptionResults.data. Now that we're returning our comments, let's go see it in the browser.

[0:35] I've got two sessions here. This is my regular GitHub account, and this is my cloned GitHub account. I will go, "Hey there." You can see it shows up here, but it's not showing up here. If we inspect, go to the console, we got a log. We can view this and we got an error. This error says "Unable to create Webhook. You may not have admin permission on the repository."

[1:15] We need to go over to our OneGraph dashboard. We need to go to subscriptions. In here, you can see the active subscriptions, which is neat, but down here, we need to add a new repository to allow non-admin subscriptions.

[1:41] Theianjones/egghead-graphql-subscriptions, I'll enable. We've enabled. Now, when I go back here, I'm going to refresh, I'm going to say, "Can you hear me?" Now, we're getting a chat app where we're talking through GitHub subscription comments.

[2:20] In the network request, let's send another message. Over in the network tab, you can see that there wasn't any pause and that's because subscription comments are coming over through WebSocket requests. Now we can go over here, and we can say, "Now we have a working chat app."