Gain insights into GraphQL from a client perspective. Explore practical exercises, React integration, Apollo Client, and a live VM for real-time coding with GitHub’s GraphQL API.

GraphQLClient.tar.gz

REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN

GITHUB_PERSONAL_ACCESS_TOKEN

RunApp

RunApolllo

RunGraphQLReact

This course was written to be as practical as possible. It offers an interactive learning experience, starting off with a general introduction to GraphQL and proceeding to allow you to play with GraphQL Queries and Mutations using GitHub’s GraphQL API.

After getting you comfortable with the basics of GraphQL, the course moves on to how to use GraphQL with React and then on how to integrate it with Apollo Client. You'll implement an issue tracker application using GraphQL combined with both React and Apollo Client.

Finally, with this course Educative introduces its newest feature: A live VM. You will now have access to a terminal with a native look and feel where you can modify code and see changes in real time - all inside your browser!

A Practical Guide to GraphQL: From the Client Perspective

There are two common ways to interact with the **GitHub GraphQL API** without writing any source code for it. 

First, you can use [GitHub’s GraphQL Explorer](https://developer.github.com/v4/explorer/). You only need to sign up with your GitHub account to perform a query or mutation to their GraphQL API, and it's a good way to simplify your first experience. 

Second, you can use a generic client in the form of an application. **GraphiQL** is a client that makes GraphQL requests as integration or as a standalone application. The former can be accomplished by [setting up GraphiQL directly in your application](https://github.com/skevy/graphiql-app); the latter may be more convenient for you by [using GraphiQL as a standalone application](https://github.com/skevy/graphiql-app). It’s a lightweight shell around GraphiQL that can be downloaded and installed manually or by the command line.

GitHub’s GraphQL Explorer knows about your credentials since you need to sign up using it, but the GraphiQL application needs to know about the _personal access token_ you created. You can add it in your **HTTP header** for every request in the headers configuration.

![](/api/collection/10370001/5717730879602688/page/5156965588140032/image/5762198420848640)

You can add a new header with a name and value to your GraphiQL configuration. To communicate with GitHub’s GraphQL API, fill in the header name with **“Authorization”** and the header value with **“bearer [your personal access token]“**. Save this new header for your GraphiQL application. 

Finally, you are ready to make requests to GitHub’s GraphQL API with your GraphiQL application.

![](/api/collection/10370001/5717730879602688/page/5156965588140032/image/5695540528414720)

If you use your own GraphiQL application, you’ll need to provide the GraphQL endpoint (URL in this case) for GitHub’s GraphQL API: https://api.github.com/graphql. 

For GitHub’s GraphQL API, use the `POST HTTP` method for queries and mutations, and to transfer data as a payload to your GraphQL endpoint.

This lesson taught you two ways to interact with GitHub’s GraphQL API. While GitHub’s GraphQL Explorer can only be used for GitHub’s API, GraphiQL integrated into an application or standalone can be used for any GraphQL API. The difference is that it requires a bit more setup. 

The GitHub GraphQL Explorer is really nothing more than a hosted standalone GraphiQL application tailored to use GitHub’s GraphQL API.

Now that we've set up to use the GraphQL API, we are ready to implement our first GraphQL client interactions. See you in the next chapter!

In this lesson, we are now finally ready to interact with GitHub's GraphQL API.

An Introduction to GraphQL

How to Get Started

Exploring GitHub's GraphQL API

Combining React with GraphQL

Introducing Apollo Client with GraphQL

React with Apollo and GraphQL

Local Installation Guide

Interacting with GitHub's GraphQL API