Using React with GraphQL: An Apollo Review

As enterprise AI and the Internet of Things (IoT) expand, flexibility is crucial in the software development world.

Developers need tools that help them manage a shifting network of technology while creating products that are economical to maintain.

One of the newest – with a stable release in 2016 – is GraphQL. This open source tool created by Facebook has some developers calling it “the future of APIs”.

What Is GraphQL?

GraphQL is Facebook’s query language for APIs.

It’s a syntax that outlines how to request specific data, and it’s most often used by a server to load data to a client.

In simple terms, GraphQL serves as an intermediate layer between the client and a collection of data sources.

It receives requests from the client, fetches data according to its instructions, and returns what was requested by the call.

Flexibility and specificity set GraphQL apart from other options like REST APIs.

The client can ask for the data it really wants and draw only that data from multiple sources. It pulls many resources in one call, all organized by types.

What problem does GraphQL solve?

REST APIs were a huge step forward, but they have some baggage.

Much of the data pulled never gets used, wasting time and potentially slowing an application with no payoff. REST API also use multiple calls to access separate resources.

With GraphQL, the server can query data from several hard-to-connect sources from a single endpoint and deliver it in an expected format.

It’s a standardized, straightforward way to ask for exactly what is needed.

It also solves the problem of backward compatibility. With REST APIs any changes to endpoints necessitates a version change to prevent compatibility issues.

New requirements don’t necessitate a new endpoint when using GraphQL.

React + GraphQL = Apollo

Apollo Client is a small, flexible, fully-featured client often used with GraphQL.

It has integrations for many tools including Angular and React, the latter being very popular with developers right now.

Apollo has several useful advantages. It’s simple to learn and use, so bringing teams up to speed is easy.

It can be used as the root component for state management. The client gives the calls and queries answers as props.

Plus, developers can make changes and see them reflected in the UI immediately. Apollo also features a helpful client library and good developer tools.

One of the biggest operational benefits is that Apollo is incrementally adoptable. Developers can drop it into part of an existing app without having to rebuild the entire thing.

It works with any build set-up and any GraphQL server or schema, too.

Strengths of Apollo

Being able to get complex relations with a single call- plus avoiding problems with types- are major benefits.

Apollo also offers multiple filter types, can be used as state management, and removes the need to handle HTTP calls.

With Apollo subscriptions are usually implemented with WebSockets, which is an advantage over React’s competitors.

Most importantly from an operations standpoint, Apollo is easy to learn and use.

It’s painless for team members to add it to their toolkits.

Limitations of Apollo

API are still needed for authorization and security (including tokens, JSON Web Tokens, and session management).

It’s also true that Apollo can’t go as deeply as Redux does, so when building complex apps, the tools have to be combined.

Comparison

GraphQL is often compared to REST APIs, though they aren’t exactly the same thing.

REST is an API design architecture which decouples the relationship between the underlying system and the API response, much as GraphQL serves as an intermediary, but it takes a different approach.

There are multiple endpoints compared to GraphQL’s single endpoint philosophy. That adds complexity as the application scales.

REST also suffers from under – and over-fetching. Using Apollo GraphQL queries only what is needed at the time, which eliminates the problem.

Some developers like to use Relay instead of Apollo. Relay is Facebook’s open-sourced GraphQL client.

It’s heavily optimized for performance, working to reduce network traffic wherever possible. The tradeoff is that Relay is complex and hard to learn. Many find it simpler just to use.

Future Outlook

Once considered a niche technology, GraphQL is now proving its worth.

Major companies are using it in production, including Facebook, Airbnb, GitHub, and Twitter. With this much growth over just a few years, it’s a safe bet GraphQL has a long functional life ahead of it.

Wondering if GraphQL would work for your company’s next project? Set up a complimentary meeting to review your needs and find out what kind of solution we could build for you!

Request a Consultation