Getting Started with GraphQL in React using Apollo Client

Apollo is a great interface for fetching and managing data through GraphQL. When we’re building applications with GraphQL, it’s important to manage data effectively to have a smooth development experience. This is where Apollo steps in, and acts as an abstraction layer over GraphQL 

, and provides a robust platform for data fetching.

The power of Apollo lies with how much we get out of the box (it’s a lot). We don’t need to do lengthy custom setups or configurations and can get started right away. Here, we’ll be discussing the benefits and usage of Apollo Client with ReactJS, but it’s important to note that most of the same features are also available in Angular and Vue.

Before we dive deeper into Apollo, let’s briefly discuss GraphQL.

GraphQL is a query language, built by developers at Facebook that emphasizes predictable results by building schemas for building queries. We use a tree structure to fetch data through a single central API endpoint. 

GraphQL is a domain-specific language (DSL), so it's focused on doing one thing, instead of general-purpose languages like JavaScript which you can use to work on different types of applications. Other DSLs you may be aware of are CSS, YAML, XML, etc.

With traditional REST APIs, we are usually exposing multiple APIs for different purposes. For example, we might have an API to fetch books, and a different API to fetch authors. Similarly, we may have APIs to get a singular book or author. With GraphQL, we only hit a single endpoint, but we use fields to fetch only the data we need, such as only the name of the book, in a sea of different available parameters made available by the back-end.

By making a single request, our application can be fast even on slow mobile networks. The type system of GraphQL keeps the API structure robust, and the dev tools help us see the schema definitions to easily debug our requests. Moreover, it solves the problem of over-fetching and under-fetching, as we’re able to get exactly the data we need in one hit. Its optimistic UI and caching make all interaction with the server super fast and snappy.

On the server-side, we import the required libraries and create schemas for Queries and Mutations, respectively. This prevents us from spending time thinking of complex API flows. 

 are used to create, update, or delete the data.

Here is a very basic example from the GraphQL documentation:

First, we build the schema where all our possible queries lie,

var schema = buildSchema(`
	type Query {
		hello: String  
}
`);

Now, we can create a root resolver that hosts all our functions corresponding to the queries we have created:

var root = { hello: () => 'Hello world!' };

Finally, we can initialize our application with GraphQL.

var app = express();

app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true
}))

The algorithm itself is very simple, it resolves each field before diving inside and doing the same until all the fields are resolved. After that, the result is returned in the required format.

We can also choose to create our GraphQL backend with apollo-server. It's easy to get started with, isn't tied to a specific GraphQL client in any way, and provides us some useful functionality for the backend as well including incremental updates.

To describe and initiate our queries on the front-end, we can use the 

 library to hook into our React components, this will give us our resultant data as props. More often, people choose to go with libraries such as Apollo and Relay. Here, we’ll be discussing how Apollo specifically provides us with a toolkit to make our lives easier when working with GraphQL.

Firstly, we need to include the required functions from apollo-client, apollo-link-http and apollo-cache-inmemory.

We can create a client instance through ApolloClient, where we’ll pass two things:

import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import gql from 'graphql-tag'

const client = new ApolloClient({
  link: new HttpLink({ url: 'https://localhost:3000/graphql '}),
  cache: new InMemoryCache()
})

Now, we can call our query function with the defined query. Here, we’re getting all books for authors that are aged less than or equal to 25. Note, we’re using the JavaScript template syntax to write our queries. If using the graphQL extension, it will also provide us with syntax highlighting.

client.query({
  query: gql`
	query: YoungAuthBooks {
		authors(filter: { age: { le: 25 } }) {
			books
		}
	}
`
}).then(data => console.log(data))
  .catch(error => console.error(error))

We can do much more with queries like this, for example, we may choose to hit a different resolver to get all the books of a specific author.

query YoungAuthorBooks {
  authors(filter: { name: { eq: "Michael Morpurgo" } }){
    books
  }
}

As Apollo uses Context API under the hood, to enable it to access our components, we need to wrap our root element with ApolloProvider.

import { ApolloProvider } from '@apollo/client';

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

Next, we need to define our query. It’s better to create a folder structure where all our queries and mutations are in specific folders so it’s easier to navigate during development.

 file, where we’ll define and export our query.

import gql from "graphql-tag";

export const BOOKSBYAUTHOR = gql`
	query youngAuthorBooks($id: ID){
		authors(id: $id) {
			books
		}
	}
`

Now, we can import this in the file for our React component where we’ll be calling this query and use it with the hooks Apollo provides.

const [getBooksByAuthor, { loading, error, data }] = useLazyQuery(BOOKSBYAUTHOR);

allows us to query programmatically on events. For example, we click a button to load the books, in that case, the click handler function will look something like this:

const onClickGetBooks = (authorId) => {
  getBooksByAuthor({
    variables: {
      id: authorId
    }
  })
}

<button onClick={() => onClickGetBooks(24)}>
  Get Books By Michael Morpurgo
</button>;

 from our click function, but we could also have this come from anywhere, such as a state variable. If we wanted to run the query every time a component loads, we can call the 

const [getBooksByAuthor, { loading, error, data }] = useQuery(BOOKSBYAUTHOR, {
  variables: { id: 24 }
});

Now, all we need to do is conditionally render our data. We can simply do that in our return statement in this fashion:

if (loading) return <p>Loading books…</p>;

if (error) return <p>Unable to load books. {error.message}</p>;

return data.youngAuthorBooks.books.map((book) => <p>{book.name}</p>);

Mutating data with Apollo Hooks is just as easy. We can call the 

 hook, pass in the required variables to update our data, and get our results back.

First, we initialize our hook and create our 

import gql from "graphql-tag";

export const UPDATEAUTHORNAME = gql`
	mutation updateAuthorName(
		$authorId: ID
		$author: Author
	) {
		updateTransaction(
			authorId: $authorId
			author: $author
		) {
			success
			message
			error
			author {
				id
				age
				name
			}
		}
	}
`

const [updateAuthorName] = useMutation(UPDATEAUTHORNAME);

Now, we can call it conditionally. Like before, we’ll call the mutation on a button click.

const onClickGetBooks = (authorId) => {
  updateAuthorName({
    variables: { id: authorId, author: { name: authorName } },
    refetchQueries: ['getBooksByAuthor'],
    awaitRefetchQueries: true
  });
};

<button onClick={() => updateAuthorName(24)}>Update</button>;

 parameter allows us to specify an array of previously defined queries to fetch once our mutation is complete. Although it is unnecessary in our case, just for the sake of example we’ll get all the books by the author again. Enabling the 

 waits until the mentioned queries have been called before marking the mutation as complete.

Typically, when we’re working with REST APIs, we need to have some sort of state management solution for our React apps. This is because we need to keep track of our data, loading states, and success/error responses. This can sometimes make our code harder to navigate.

However, Apollo provides us with caching as well as variables that hold the loading and API call result states directly. This means we don’t need to create further state variables, as we can just fetch them out of the query or mutation that we run as seen in the previous example.

Moreover, we don’t need to store the fetched data in state either. Since Apollo caches all the results, if we query for the same data again, it will avoid making unnecessary API calls and instead look into the memory first to find a cached version of the call.

From experience, it's clear that GraphQL is being considered more day by day by developers against traditional REST servers. One common use-case I’ve encountered is fetching data from Content Management Systems, where a specific data model is defined. This makes it easy to think of our data in a tree structure and to fetch what we need based on conditions quickly and efficiently.

There’s no doubt that it allows developers to think of a different approach when handling data management between clients and servers. And Apollo is right at the forefront, providing even more features and possibilities to make things convenient for developers.

AUTHOR

Kumail Pirzada

Apollo is a great interface for fetching and managing data through GraphQL. When we’re building applications with GraphQL, it’s important to manage data effectively to have a smooth development experience. This is where Apollo steps in, and acts as an abstraction layer over GraphQL (which is just a…

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Free Tools

Getting Started with GraphQL in React using Apollo Client

Tags

Responses (0)

Free AI Career Tools

AI Job Listings

ATS Resume Checker

Startup Perks

Masterclasses

Tutorials

Fullstack React with TypeScript