A Practical Guide to GraphQL: From the Client Perspective/

...

/

GraphQL Query with Apollo Client in React

GraphQL Query with Apollo Client in React

Let's implement and execute GraphQL queries!

We'll cover the following...

In this lesson, we will implement our first GraphQL query using Apollo Client in React!

You’ve previously seen how different entities, such as the current user (viewer) or repositories, can be queried from GitHub’s GraphQL API. This time you will do it in React.

A Profile component might be the best place to render the current user and its associated repositories. We’ll start by using the not-yet-implemented Profile component in our App component in the src/App/index.js file, which we’ll take care of next. It makes sense to extract the Profile component now because the App component will be the static frame around the application later.

Components like Navigation and Footer are static, and components such as Profile and Organization (which you’ll see later) are dynamically rendered based on routing (URLs).

Press + to interact
import React, { Component } from 'react';
import Profile from '../Profile';
class App extends Component {
  render() {
    return <Profile />;
  }
}
export default App;

In our src/Profile/index.js file, we have added a simple functional stateless component. In the next step, we will extend it with a GraphQL query.

Press + to interact
import React from 'react';
const Profile = () =>
  <div>Profile</div>
export default Profile;

Now we’ll learn to query data with GraphQL and Apollo Client. The Apollo Client was added in a previous lesson with React’s Context API in a top-level component. We have implicit access to the Apollo Client but we never use it directly for standard queries and mutations. It says “standard” ...