lines
Jan 18, 2024

Harnessing Apollo Client 3's Reactive Variables for Local State Management

Explore the power of Apollo Client 3's Reactive Variables for seamless local state management in our latest blog.
Simranjit Singh
Simranjit SinghSenior Software Engineer - I

Apollo Client 3 has introduced a powerful feature called reactive variables, providing a flexible mechanism for managing local state independent of the Apollo Client cache. This article explores the significance of these variables, their creation, manipulation, and utilization through the useReactiveVar hook.

Understanding Reactive Variables

Reactive variables are distinct from the cache, allowing storage of diverse data types and structures without reliance on GraphQL syntax. Reactive variables offer a significant advantage through their innate ability to detect changes effortlessly via the useReactiveVar hook. When a reactive variable's value undergoes modification, Apollo Client seamlessly recognises this alteration. This allows for seamless, real-time updates to our app’s UI, without the need for manual intervention.

Creating Reactive Variables

Let us explore how to create and utilize reactive variables.

Utilizing Reactive Variables

Reading the value:

Modifying the value:

Reacting

useReactiveVar

As the name suggests, reactive variables can trigger reactive changes in your application. Whenever you modify the value of a reactive variable, queries that depend on that variable refresh, and your application's UI updates accordingly.

The useReactiveVar hook can be used to read from a reactive variable in a way that allows the React component to re-render if/when the variable is next updated.

Comparing Reactive Variables with Redux

Benefits of Reactive Variables over Redux

  1. Reduced Boilerplate: Reactive variables eliminate the need for multiple actions, reducers, and selectors in Redux, simplifying state updates.
  2. Dynamic Updates: Modifications to reactive variables trigger real-time updates in related queries and React components without additional configuration.
  3. Simplicity: Apollo Client's makeVar and useReactiveVar streamline state management, reducing the complexity compared to Redux's actions, reducers, selectors, and middleware.

Benefits of Reactive Variables over React Context

  1. Granular Updates: Reactive variables offer granular control over updates compared to React Context, enabling more specific re-renders only when related variables change using useReactiveVar hook.
  2. Simplicity: React context requires provider components with value and its update function for each state. Which can be more complex to use, especially if you are managing a lot of data.

Code Snippet: Reactive Variables vs. Redux vs. React Context

Redux Example (With Actions, Reducer, and Selectors)

React Context Example (With Provider and Consumer Components)

Apollo Client Reactive Variable

Explanation

In the Redux example, actions are defined to perform specific tasks like adding items to the cart. A reducer handles these actions to update the state. Additionally, selectors are created to extract specific portions of the state for use in components.

Contrastingly, with Apollo Client's reactive variables, there is no need to define separate actions, reducers, or selectors. The makeVar function initialises the reactive variable, which can be directly modified with simple functions like cartItemsVar([...cartItems, newItem]).

The use of reactive variables simplifies state management by eliminating the need for multiple files and functions typically required in Redux. This reduction in boilerplate code enhances code readability and maintenance.

Managing Multiple Reactive Variables

In larger applications, managing multiple reactive variables efficiently becomes crucial. Organizing them within a structured folder can enhance maintainability and accessibility across the codebase. Consider the following approach:

Folder Structure Create a dedicated folder, perhaps named reactiveVars, to house all your reactive variables based on different features of the app:

Each file within the reactiveVars folder can encapsulate a specific feature related reactive variables, ensuring modularity and separation of concerns. For instance, you might have a cart.ts file:

This approach helps maintain a coherent structure by grouping related reactive variables within the same feature file. It promotes clarity and ease of access when working on specific functionalities within the application.

Conclusion

Reactive variables in Apollo Client 3 offer a streamlined and efficient alternative to Redux for managing local state. By demonstrating the comparative boilerplate code and complexities between React Context, Redux and Apollo Client's reactive variables, the advantages of using reactive variables become more apparent. And with a feature-based folder structure, we can ensure a more structured and manageable local state management system.

Developers can leverage reactive variables to improve code maintainability and reduce overhead, ultimately simplifying the state management process in their applications.

Hire our Development experts.