Why Use GraphQL: Simplify data fetching and improve Performance

In all sincerity, managing data in modern big applications presents a number of challenges. Developers have to undergo the stress of aggregating data from multiple sources, and then distribute it to multiple platforms, and also plumb it into an app's UI.

That aside, front-end developers have to decide on how to manage state on the client side, while still executing complicated features like caching and optimistic UI.

GraphQL was completely designed to ease developer pain considerably, especially with its declarative approach to data fetching. This approach simplifies data transformation and boosts API speed considerably.

Developer experience

Implementing GraphQL in your application and organization using the Apollo platform will help your team ship features faster alongside the excellent developer experience.

Apollo strives to simplify data management across all stack. Difficult to implement features such as full-stack caching, optimistic UI and data normalization, suddenly become a walk over, all thanks to Apollo Client, Apollo Server, and Apollo Graph Manager. I will show you how!

Explore your API

GraphQL's strongly typed query language enables developers to cash in at its incredible tooling for exploring GraphQL APIs. Thanks to GraphQL's introspection system. With this, developers can query a GraphQL schema for details on queries and types an end supports. GraphQL's introspection unlocks some really cool features, such as automatic documentation, autocomplete etc.

GraphQL Playground

Prisma developed the GraphQL Playground, with amazing features such as auto generated docs for schemas and query execution with autocomplete. With GraphQL we can visualize at a glance the data available in our API without looking at the backend code or knowing the data source.

Apollo DevTools

Apollo DevTools was built to allow you inspect your Apollo Client cache, track active queries, and view mutations. You also have access to GraphQL within Apollo DevTools which is convenient for testing queries as you're working on front-end code with Apollo Client. Apollo DevTools come as Chrome extensions.

Simplify front-end code

Hopefully, you have worked with REST and a state management library like Redux. You might also be familiar with writing action creators, reducers, integrating middleware and normalizing your data to make a single network request.

With Apollo Client, these concerns are not to be worried about as Apollo Client sets up everything you need for a production-ready application enabling you can focus on writing queries instead of hundreds of lines of state management code.

Modern tooling

Building your GraphQL API with the Apollo platform gives teams and organizations access to modern tooling that helps them quickly uncover bugs, gain visibility into their API, and develop challenging features such as caching, and in general servers as a confidence booster,

Tools like Apollo Graph Manager can provide monitoring and analytics for your API. It displays per-resolver tracing metrics that help you pinpoint bugs, as well as performance distribution for every field in your schema.

Declarative data fetching

Declarative data fetching is one of the key importance of using GraphQL. With GraphQL, there's no need to call multiple endpoints from the client or aggregate the data manually like you have to with traditional REST data fetching. Instead, you specify the exact data you need and GraphQL gives you exactly what you asked for.

Example below is a typical REST end point:

GET /api/cats/breeds
GET /api/cats/images
GET /api/cats/activities

The REST approach is not only time consuming, but difficult and tedious to implement especially across login systems.

Compare the previous code snippet with a GraphQL's declarative approach as shown below:

const GET_CATS = gql`
  query {
    cats {
      id
      breed
      image {
        url
      }
      activities {
        name
      }
    }
  }
`;

Here, we describing the shape of the object we want and GraphQL takes care of combining and filtering the data returning exactly what we described.

Consuming this data Apollo Client in a React app is simple, a sample is illustrated in the code snippet below:

function Feed() {
  const { loading, error, data } = useQuery(GET_CATS);

  if (error) return <Error />;
  if (loading || !data) return <Fetching />;

  return <CatList cats={data.cats} />;
}

Apollo Client takes care of the request cycle from start to finish, including tracking loading and error states for you. There?s no middleware to set up or boilerplate to write before making your first request, nor do you need to worry about transforming and caching the response. All you have to do is describe the data your component needs and let Apollo Client do the heavy lifting.

Improved performance

In many cases, using a GraphQL API over your existing REST endpoints will improve your app's performance, especially on devices with slow network connections as the number of round quires made is significantly reduced.

Avoid round trips

Each GraphQL request returns only one response, using GraphQL can help you avoid costly round trips from the client to your server. With REST, each resource represents a round trip, which quickly adds up. If you're fetching items in a list, you'll have to complete a round trip for every resource multiplied by the number of items, causing slow load times, especially on mobile devices with low connectivity.

Previous: Introducing Apollo GraphQL: The Ultimate Platform for Data-Driven applications.
Next: Introduction: Build a Full-Stack App with GraphQL and Apollo.