Write an Authenticated GraphQL Query in OneGraph
We use the OneGraph Graphiql editor to query GitHub for a repository issue comment. Github requires you to be authenticated before returning data. In this lesson, we log into GitHub through the OneGraph Graphiql editor and query for a GitHub issue.
Lecturer: [0:00] Here you can see we're back in our OneGraph dashboard. We're going to head over the data explorer. We don't want to query for npm and dev.2 anymore, so we'll delete those.
[0:13] We'll find GitHub in the sidebar. We want to query for a repository. Instead of passing strings here, we should pass variables. To do that, we can add parentheses and then GraphQL variables are denoted with a $.
[0:34] First, we want the repo owner and with GraphQL, everything is typed. We have to tell our query what kind of type this is, and it's a string. It's also required. Next, we want the repo name. It's a string and it's required.
[0:58] Finally, we want the issue number, which is an int, also required. To pass these variables in, instead of GraphQL.js, we'll go $ repo name. Instead of owner, we'll go $ repo owner, and that's all the repository takes. Off of the repository, we want to get an issue. This is where we pass our issue number. The number is issue number, and then we want the ID, the title and the body text.
[1:53] To populate these variables with values, we can go to our query variables. We pass it an object, the key of repo owner, and the repo owner will be Ian Jones. Next, we'll do the repo name, and you can see that GraphQL auto populates it because it knows it's just parsing this query.
[2:24] The repo name is egghead GraphQL subscriptions. Next, we'll get the issue number. We'll do one. I'll put a string here, and you can see that it's expecting a type of int. That's reassuring that this variable is an int, not a string. Now, when we send this request, we get an alert saying that we're not logged-in to GitHub.
[2:58] With GitHub's API, you need an access token to get data back. We're going to log in to GitHub, and then rerun the request, and now we have data back. In this tab, you can see that I'm on the owner of the Ian Jones, and then the repository at [inaudible] GraphQL subscriptions.
[3:25] This description matches the body text that was sent back. Let's copy our query, and we'll head back to our editor, and we'll paste that query into here. These variables stay the same because GraphQL inside of your app acts exactly the same as it does in graphical.
[3:50] One thing that we do need to change is, we need to pass variables into our use query hook. Variables, and this is an object. We will pass these variables into our object. We'll paste them, and there we go.
[4:17] We'll open a terminal. We'll yarn start. This opens up a server on 3000. We'll open up our dev tools, and we're already printing the object. Let's look at the last one. We got an error. This is telling us that we need to authenticate with GitHub. Which is something similar that we got in our graphical editor before we signed in.