Query Github Comments with OneGraph through urql's Client in React
In this lesson, we send a github graphql query using urql. We have to set up onegraph-auth so that we can pass our github authentication token in our request headers.
Urql's createClient function takes a fetchOptions parameter. This is how we can set any of the headers on our requests that urql sends.
Instructor: [0:00] Now that we are successfully querying GitHub through OneGraph, let's build out our comments query in the OneGraph dashboard head to the Data Explorer tab.
[0:14] Now that we're here, we want to grab the comments off of this issue. We'll go to the sidebar, find repository, then the issue. We scroll to comments. We'll take the last 100 comments, the nodes. We want the author and the login. We want the body of the comment, the id, the url, and viewerDidAuthor. We shouldn't have to change these parameters.
[1:03] Let's run the query. We can see that we're getting comments. I put in some dummy data, just so that we get something back. Let's rename this query, commentsListQuery. Go ahead and copy it.
[1:20] We'll go back to our terminal. I'm going to open up a new terminal tab. The first thing we'll do is make their source/components. Then, you will touch source/components-comments.js.
[1:41] We'll go ahead and open comments. The first thing we need is to import React from React. Next, I'm going to assign const commentsQuery=. Then, we will define function comments and make sure we export default comments.
[2:14] At top, we will import useQuery from URQL. Then inside of our comments component, we will call const result = useQuery, passing in the query of commentsQuery.
[2:43] We'll console.log the result, and we'll return null for now. Now, inside of our app, we will import comments from ./component/comments, and then we'll render our comments.
[3:12] Remove this and this for now, because we will not need it. Let's head over to our browser, open up our app, nothing is rendering. Variable repo owner of typestring was provided an invalid value.
[3:39] That means that we didn't pass any variables to this query. We need to go down here and type variables. Pass it in object. The first repo owner will be theianjones, repo name will be Egghead GraphQL subscriptions, issue number will be one. We'll save, and we open this up. You can see that we're getting comments.