Query Multiple Services with OneGraph GraphiQL Editor

Query Multiple Services with urqls GraphQL Client in React

Refactor Commonly Used Variables Into a Utils File to Be Shared Across Our React App

Write an Authenticated GraphQL Query in OneGraph

Install and Create an OneGraph Authentication Object Within a React Application

Create an AuthProvider Component for Our React Application to Use Through React Context

Wrap Our React Application in an AuthProvider Component

Query Github Comments with OneGraph through urql's Client in React

Pass Authorization Headers to Our Requests in React Through urql's fetchOptions

Display GraphQL Data with a React Component

Style a React List Component 

Use a GraphQL Mutation to Create a Github Issue Comment

Use urqls useMutation to Create Github Issues in a React App

Style a React Input Component with CSS-in-JS

Write a GraphQL Subscription Query in the Graphiql Editor

Extract a React View Component From a CommentQuery Component

Write a Subscription GraphQL Query in React with urql

Reduce a GraphQL Subscription Stream into a Collection with urql

Display GraphQL Subscription Results in a React UI

Use a GraphQL Query and Subscription Together to Fetch the History and Current Comments

React Real-Time Messaging with GraphQL using urql and OneGraph

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.

react

https://app.egghead.io/api/v1/lessons/react-display-graphql-subscription-results-in-a-react-ui/subtitles

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."

https://app.egghead.io/api/v1/lessons/react-display-graphql-subscription-results-in-a-react-ui/transcript