In this tutorial I'll teach you how to use React with Apollo GraphQL client. You'll learn how to query GraphQL server and render query results, by building a simple React application.
As a bonus, I'll explain to you an important software development principle which will help you to write higher quality code.
We'll be building a simple React application that renders a list of jobs that require GraphQL knowledge. We'll get this list of jobs by querying a GraphQL server.
Let's take a look at how our app will work. The first screen will display a title and a button:
User will click the Load GraphQL jobs
button and then the loading spinner will be rendered instead of the button:
Finally, we'll render the number of jobs and the list of jobs, displaying job title, company name and locations for each job:
Here you can play with the app and you can find the full source code in this GitHub repository.
Our application will be made of two React components:
Jobs
Job
Jobs
component will render the app title, the button and the loading indicator, as well as a list of jobs. Each job will be rendered by the Job
component.
Let's create our Job
component first:
import React from "react";
function getCitiesLabel(cities) {
return cities.length > 1 ? "Cities" : "City";
}
function getCitiesList(cities) {
return cities.map((city) => city.name).join(", ");
}
function Job(props) {
return (
<a
href={props.job.applyUrl}
className="list-group-item list-group-item-action"
>
<h3>{props.job.title}</h3>
<div>
<strong>Company:</strong> {props.job.company.name}
</div>
{props.job.cities.length > 0 && (
<div>
<strong>{getCitiesLabel(props.job.cities)}: </strong>
{getCitiesList(props.job.cities)}
</div>
)}
</a>
);
}
export default Job;
To be continued…