GraphQL and Apollo are a great combination of tools to be used with React! GraphQL makes it easier to get, modify, or get a realtime feed of your data from the servers. It’s also entirely open-source standard.

Apollo provides a suite of easy tools to implement everything related to GraphQL in React and it’s also open-source hosted on GitHub.

More recently, Apollo released an update introducing React Hooks, this has drastically reduced the code needed to use GraphQL, making it ten times simpler to use queries, subscriptions, and mutations in React.

Final Result

We are going to build a simple web page with the list of all the Star Wars films in chronological order:

You can get the final application here:

Star Wars laser blades

Prerequisites

You need a working React app, you can get one from one of these boilerplates:

Apollo Dependencies

Apollo logo

Apollo needs a few dependencies to provide all the tooling required for GraphQL, you need to open the terminal and type:

npm install apollo-boost @apollo/react-hooks graphql

The functionalities brought by these packages are:

Apollo Client

To enable Apollo in our project, we create an Apollo client and use ApolloProvider to inject it into our component tree:

import "./styles.css"
import React from "react"
import ReactDOM from "react-dom"
import ApolloClient from "apollo-boost"
import { ApolloProvider } from "@apollo/react-hooks"

import App from "./App"

const client = new ApolloClient({
uri: "https://api.graph.cool/simple/v1/swapi",
})

ReactDOM.render(
<ApolloProvider client={client}>
<App />
</ApolloProvider>,
document.getElementById("app")
)

What Should I Query?

After having added the client, we need to think about which data we might want to request from this GraphQL endpoint and we can do it easily there.

We might want to request the first three or six films, changing the parameter "first", we then select different information like the title or the release date.

public star wars graphql API

Get and Show the Data

Then, we have to proceed with the final, most beautiful step:

import React, { Fragment } from "react"

import { useQuery } from "@apollo/react-hooks"
import { gql } from "apollo-boost"

const STAR_WARS_FILMS = gql`
{
allFilms(first: 6, orderBy: releaseDate_ASC) {
episodeId
title
releaseDate
director
}
}
`


export default function App() {
const { loading: loadingFilms, error: errorFilm, data: dataFilms } = useQuery(
STAR_WARS_FILMS
)

if (loadingFilms) return <p>Loading...</p>
if (errorFilm) return <p>There's an error: {errorFilm.message}</p>

console.dir(dataFilms)

const films = dataFilms.allFilms.map((film) => (
<div key={film.episodeId}>
<p>
<b>{film.title}</b> - produced by {film.director} -{" "}
{film.releaseDate.substr(0, 4)}
</p>
</div>
))
return (
<Fragment>
<h1>Star Wars Films</h1>
{films}
</Fragment>
)
}

And voilà! Our app is now working wonderfully!

Complete Codesandbox Playground

Look and edit the code here: https://codesandbox.io/s/graphql-hooks-with-react-16-ixnpdhttps://851jm.csb.app/

References and Resources