Plan your dream trip with Cresta AI Agent at CCW Las Vegas – Learn more

  • Products
    Back
    PLATFORM
    AI Platform
    Cresta is the enterprise-grade Gen AI platform built for the contact center and trained on your data.
    • Cresta Opera
    • Integrations
    • Responsible AI
    PRODUCTS
    AI Agent
    Cut costs, not quality, with human-centric AI agents you can trust
    Agent Assist
    Harness real-time generative AI to empower agents with unmatched precision and impactful guidance.
    • Knowledge Assist
    • Auto-Summarization
    Conversation
    Intelligence
    Discover and reinforce the true drivers of contact center performance.
    • Cresta Insights
    • Cresta Coach
    • Cresta Quality Management
    • Cresta AI Analyst
  • Solutions
    Back
    USE CASES
    Sales
    Discover and reinforce behaviors that accelerate revenue growth
    Customer Care
    Deliver brand-defining CX at a lower cost per contact
    Retention
    Transform churn risks into
 lifelong promoters
    Collections
    Accelerate collections while minimizing compliance risk
    INDUSTRIES
    Airlines
    Automotive
    Finance
    Insurance
    Retail
    Telecommunications
    Travel & Hospitality

    Why Transcription Performance Is Holding Back Your AI Strategy

    LEARN MORE
  • Customers
    Back
    Customer Stories
    Learn how Cresta is delivering lasting value for our customers.
    • CarMax
    • Oportun
    • Brinks Home
    • Snap Finance
    • Vivint
    • Cox Communications
    • Holiday Inn
    • A Top Telecom
    • View all case studies

    Our Own Zero to One: Lessons Learned in Building The Brinks Home AI Agent

    LEARN MORE
  • Resources
    Back
    Resources Library
    • Webinars
    • Ebooks
    • Reports
    • Solution Briefs
    • Data Sheets
    • Videos
    • Infographics
    • Media Coverage
    • Press Releases
    Blog
    Industry News
    Help Center
    Solution Bundles

    AI Maturity Blueprint: A Practical Guide to Scaling AI Adoption in the Contact Center

    LEARN MORE
  • Company
    Back
    About Cresta
    Careers
    Trust
    Customers
    Partners

    We’re Going Global! Cresta Expands to APAC and EMEA

    READ THE POST
Request a demo
Request a demo
  • Cresta Blog
  • AI Innovation

GraphQL for the React Redux Developer

Graph QL

Overview

GraphQL is a popular API query language for clients to access data on servers. Cresta uses GraphQL in different ways to act as a bridge between our frontend and backend systems. This blog will discuss how a developer familiar with Redux can migrate over to GraphQL using the popular Apollo Client library to take advantage of GraphQL features.

At Cresta, simplicity and speed are a couple of our core values for our development team. In a typical application with client and server components, client state management is typically different from server state management.  For example, it’s popular to use Redux for client state management and REST API for server state manipulation. However, if GraphQL is used for both purposes, we gain greater simplicity.

This guide offers insights and tips for developers like yourself, who have an understanding of Redux using GraphQL and Apollo Client as a client state store. We’ll explore a use case by taking part in an existing redux react chat client and partially converting its message history component while using GraphQL and Apollo Client. Let’s dive in. 

Why GraphQL?

Many libraries are available for state management and synchronizing data with the server, so why use GraphQL?

On the one hand, there are Redux, MobX, and so on, which do an excellent job of client state management but leave the server synchronization as a completely separate task to be implemented by you (or by using a library such as Redux-API to ease this implementation).

On the other hand, there are tools like Firebase, Realm Sync, and PouchDB+CouchDB, which abstract and automate database synchronization so that you only need to deal with client data. However,  you also loses control of the data synchronization process. The abstraction makes it hard to control what data synchronizes first. It could skip synchronization of non-critical data altogether. Furthermore, this approach locks the application to a specific (and sometimes proprietary) database system.

By using GraphQL, you get a more balanced solution between the two sets of tool types.  Because both the client and server speak the same language, synchronization becomes easier, yet you still maintain control.  For the client state, you may use a library like Apollo Client. A GraphQL server defines and exposes the Query API layer so that clients can access/save data with it. On the server-side, a variety of choices exist.* 

Additionally, it should be noted that GraphQL is an open standard, which prevents vendor lock-in and makes it easier to swap out parts of the system in the future as the application evolves.

Intro to Apollo Client

As official documentation describes, Apollo Client is a complete state management library with GraphQL. Interestingly, one of its key features is zero-config caching, making it easy to use as a state store. Furthermore, Apollo Client already comes with support for React applications.

Dispelling a Myth Regarding Apollo Client

Apollo Client is frequently used with a GraphQL backend, so some programmers believe the myth that it can ONLY be used with a GraphQL backend. The truth of the matter is –  Apollo Client can absolutely be used as a client-only, in-browser store without any backend. Below is a basic code sample that initiates a client with only in-memory caching, without specifying any GraphQL backend to connect to:

GraphQL

More specifically, in the code example presented above, an in-memory cache is provided to the client to connect to, and the local state can be stored in this cache, according to this Apollo Client Documentation. It’s an easy assumption to make, but Apollo Client can be used either with GraphQL or as an in-browser store without any backend. 

Chrome Extension Tool

To make debugging more manageable, the Apollo Client Devtools may be installed in your Chrome browser to watch queries and client cache state as you debug the code.

Now that we’ve addressed a common myth and have the tools we need, let’s begin the use case example of replacing Redux store with Appollo Client. 

Replacing Redux Store with Apollo Client

Example – Displaying State

Let’s look at one example of a react-redux component to show message history in a redux chat app. Note how react-redux passes state threads into the component as a react props value:

In this example, the threads state contains a dictionary of arrays, with the recipient being the key. Each array contains elements with key (numeric sequence number), from (string identifying the sender) and text (string for the message text) for that recipient.

Examine the screenshot below to see how the new code looks. This shows how you can convert this component using Apollo Graph QL (you can test it here).

The above screenshot shows that by using the Apollo Client useQuery method, the client GraphQL cache can be queried, and the return values can be passed as props to the react UI component to render.

This example is not super helpful, however it does render a static, hardwired state into the UI. To realize the full power of using Apollo Client cache as a store, let’s explore how to modify the stored values in the in-memory cache.

Making Modifications to the Store

To make modifications to the store Redux, you can use Actions and Reducers. However, when Apollo Client cache is used as a store, the way to make modifications is slightly different:

  • A query is specified: this limits the scope of data that is modified.
  • You can invoke the readQuery method on the cache to read existing data from the query, with the returned result being similar to the state passed into a reducer.
  • This data (similar to a reducer) can then be modified by creating a new object representing the new state and then written back into the cache by the writeQuery method.

Example – Modifying State

The above example shows how to access the store, but what about modifying the store when new messages are received?  In this Redux example, whenever a new message is received, the reducer code updates this threads Redux state by concatenating the new message to the array corresponding to the recipient. See below:

The corresponding, converted code with Apollo Client is below, and you can test it here. 

Note the following:

  • The Apollo GraphQL client cache acts as an in-memory state store similar to the Redux store.
  • To access its state, use `readQuery` on the cache first.
  • The `writeQuery` call can do dispatching actions on the “store”

Comparison – Pros and Cons

As shown in the comparison table below, the advantage of using Apollo Client is by simplification – that is, it’s the opportunity to unify usage of GraphQL for both client state store and interactions with backends.

Apollo Client Redux
Pros:

  • Extend to GraphQL backends easily
  • Use the same GraphQL query syntax for both client and server
Pros:

  • react-redux integrates with react components via props
  • Easy JS syntax to access store
Cons:

  • No easy support or concept for middleware
Cons:

  • Does not easily connect with GraphQL server

Next Steps

This guide explains how to convert part of a simple, open-source Redux chat app from Redux to Apollo Client. However, you can apply the concepts explained to other Redux applications too.

You can clone the sample converted chat app at this GitHub link. Feel free to clone, modify and experiment.

Below are some next steps to take this to the next level:

  • Choose a GraphQL backend out of the variety of choices available*
  • Connect to a GraphQL backend: After you choose a GraphQL backend, pass the link parameter to the ApolloClient constructor. The same web application is now easily converted to establish a bridge to a GraphQL backend.
  • Explore fragments: as opposed to queries, “fragments” define pieces of data that can be re-used in multiple places.
  • In addition to the message history example, take the existing redux-based chat application and convert the whole application to use Apollo Client instead.
  • Explore apollo-cache-persist to save the store into browser local storage.
  • Explore Optimistic UI to get the best of both worlds – fast client cache for UI, and backend for synchronized storage.

Let us know your thoughts and whether you’d like to see more on this topic.

*Examples of GraphQL backends:

  • Hasura
  • PostGraphile
  • Apollo Server
  • Prisma
  • dgraph.io (SaaS)
  • FaunaDB (SaaS)

Author:

July 1, 2021

100 South Murphy Ave Ste 300
Sunnyvale, California 94086

Karl-Liebknecht-Str. 29A
10178 Berlin, Germany

100 King Street West
1 First Canadian Place, Suite 6200
Toronto ON M5X 1E8

Info
  • AI Platform
  • Customers
  • Resources
  • Partners
  • Trust
  • About
  • Careers
  • Blog
  • Support
  • Contact Us
Follow us
  • LinkedIn
  • YouTube
  • Twitter

Newsletter

Subscribe for the latest news & updates

© 2025 Cresta

  • Terms of Service
  • Privacy Policy
  • Employee Privacy Notice
  • Privacy Settings