Search⌘ K
AI Features
Home
Courses
A Practical Guide to GraphQL: From the Client Perspective

React GraphQL Query

Explore how to integrate GraphQL queries in a React app by using axios to send POST requests to GitHub's API. Understand storing query results and errors in React state, and implement conditional rendering to manage different UI states.

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:

Node.js
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 thing left is passing the query to it as payload during a POST ...