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

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.

import { makeVar } from '@apollo/client';
import { CartItem, ViewMode } from '@types';

// Creating a reactive variable
const initialCartItems = [];
export const cartItemsVar = makeVar<CartItem[]>(initialCartItems);

Utilizing Reactive Variables

Reading the value:

const cartItems = cartItemsVar();

Modifying the value:

cartItemsVar([...cartItems, newItem]);

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.

import { makeVar, useReactiveVar } from "@apollo/client";
import { cartItemsVar } from '@reactiveVars/cart';

export const Cart = () => {
  const cartItems = useReactiveVar(cartItemsVar);
  // ...

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)

// Redux actions
const ADD_TO_CART = 'ADD_TO_CART';

const addToCart = (item) => ({
  type: ADD_TO_CART,
  payload: item,
});

// Redux reducer
const cartReducer = (state = [], action) => {
  switch (action.type) {
    case ADD_TO_CART:
      return [...state, action.payload];
    default:
      return state;
  }
};

// Redux selectors
const selectCartItems = (state) => state.cart;
const selectCartItemCount = (state) => state.cart.length;

React Context Example (With Provider and Consumer Components)

import React, { createContext, useContext, useState } from 'react';

// Creating context
const CartContext = createContext();

// Providing context at higher level
const CartProvider = ({ children }) => {
  const [cartItems, setCartItems] = useState([]);

  return (
    <CartContext.Provider value={{ cartItems, setCartItems }}>
      {children}
    </CartContext.Provider>
  );
};

// Consuming context in a component
const Cart = () => {
  const { cartItems, setCartItems } = useContext(CartContext);
  // ... rendering logic
};

Apollo Client Reactive Variable

import { makeVar, useReactiveVar } from '@apollo/client';
import { CartItem } from '@types';

// Creating a reactive variable
const initialValue=[]
export const cartItemsVar = makeVar<CartItem[]>([]);

// Using the reactive variable in any component
const Cart = () => {
  const cartItems = useReactiveVar(cartItemsVar);

  const addToCart = (newItem) => {
  // Modifying the reactive variable
    cartItemsVar([...cartItems, newItem]);
  };

  // rendering logic
  return (
    <div>
      <h2>Cart Items</h2>
      <ul>
        {cartItems.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

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:

src/
  |- reactiveVars/
      |- cart.ts
      |- user.ts
	  |- settings.ts
      |- ... (other features) 

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:

import { makeVar } from '@apollo/client';
import { CartItem, ViewMode } from '@types';

const initialCartItems = [];
export const cartItemsVar = makeVar<CartItem[]>(initialCartItems);
export const isCartOpen = makeVar<boolean>(false);
export const selectedViewMode = makeVar<ViewMode>('grid');

// Other related reactive variables for the cart feature...

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.