A Practical Guide to GraphQL: From the Client Perspective/

...

/

React GraphQL Query

React GraphQL Query

Learn to implement GraphQL Query in React and fetch issues from an organization's repository.

We'll cover the following...

In this lesson, we are going to implement our first GraphQL query in React and get issues as a result of the query from an organization’s repository for our Issue Tracker application.

Fetching an ‘Organization’

Let’s start by fetching only an organization. Here goes the query that is to be defined as a variable above the App component:

Press + to interact
const GET_ORGANIZATION = `
  {
    organization(login: "the-road-to-learn-react") {
      name
      url
    }
  }
`;

We have used template literals in JavaScript to define the query as a string with multiple lines. It should be identical to the query used before in GraphiQL or GitHub Explorer. Now, we will use axios to make a POST request to GitHub’s GraphQL API.

The configuration for axios already points to the correct API endpoint and uses personal access token. The only ...