cache.js
import { InMemoryCache, makeVar } from '@apollo/client';

const cache = new InMemoryCache({
  typePolicies: {
    Product: {
      fields: {
        stockText: {
          read(product, { readField }) {
            const { availableStock, quantity, outOfStock } = product;
            const lowStock = availableStock - quantity;

            if (outOfStock) {
              return 'Out of stock';
            } else if (lowStock <= 2) {
              return 'Low stock';
            }
          }
        }
      }
    }
  }

const client = new ApolloClient({ cache });
components/cart.js
import { gql, useQuery } from '@apollo/client'

const GET_CART_QUERY = gql`
  query cart {
    id
    products {
      id
      quantity
      brandName
      itemName
      stockText @client
    }
  }
`

const { loading, data, error } = useQuery(GET_CART_QUERY)

(5) Invoking query

inside a React component

(4) Apollo Client will

resolve stockText on the client-side

(1) TypePolicies - what should happen when type 'Product' is declared

(2) stockText is a new field on type 'Product'

(3) when stockText gets declared with @client, read function will get invoked

After Local-Only fields - Type Policies