Implement Caching Strategies with React Query

Introduction

  • You can view the theoretical content about Caching strategies presented here
  • These Caching Patterns are not only used on the Backend but can also be implemented on the Frontend
  • You only need to replace the role of Redis typically used with Memory (or use Local Storage, IndexedDB on the Browser), while replacing the query fetching data from the Database with response data from the Server API
  • In this article, I will guide you on using React Query combined with IndexedDB (using @tanstack/react-query-persist-client and idb-keyval) to implement Caching strategies in a simple and effective way
alt text

Cache patterns

CACHE-ASIDE (Lazy Loading) & READ-THROUGH

This is the default mechanism of useQuery.

  • Cache-Aside: Check the cache first, if it does not exist, fetch from the API and save to the cache.
  • Read-Through: The client interacts through an abstraction layer (hook) and the hook automatically decides whether to retrieve data from the cache or the server.

REFRESH-AHEAD (Prefetching)

Use queryClient.prefetchQuery to proactively preload data into the cache before the user actually needs it (such as when hovering over a button or navigating pages).

WRITE-THROUGH

  • Use useMutation + queryClient.setQueryData
  • Simultaneously execute the API call to save data and update the cache to synchronize data

WRITE-AROUND

  • Use useMutation + queryClient.invalidateQueries
  • Call the API to update data, then mark the old cache as Invalidated. When the component needs to use it, it will fetch again.

WRITE-BEHIND (Write-Back)

  • Also known as Optimistic Update, using useMutation + onMutate
  • Update the UI and Cache before the request is sent to the Server. If the Server returns an error, automatically Rollback to the previous state.

Detail

In a NextJS project, create the file provider/persist-query-client.provider.tsx to define the configuration for react-query

'use client'

import {QueryClient} from '@tanstack/react-query'
import {
  PersistQueryClientProvider,
  type Persister,
} from '@tanstack/react-query-persist-client'
import {del, get, set} from 'idb-keyval'

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      gcTime: 1000 * 60 * 60 * 24, 
      staleTime: 1000 * 60 * 5, 
    },
  },
})

export const indexedDBPersister: Persister = {
  persistClient: async client => {
    await set('REACT_QUERY_OFFLINE_CACHE', client)
  },
  restoreClient: async () => {
    return await get('REACT_QUERY_OFFLINE_CACHE')
  },
  removeClient: async () => {
    await del('REACT_QUERY_OFFLINE_CACHE')
  },
}

export function ReactQueryProviders({children}: {children: React.ReactNode}) {
  return (
    <PersistQueryClientProvider
      client={queryClient}
      persistOptions={{persister: indexedDBPersister}}
      onSuccess={() => {
        console.log('Cache restored from IndexedDB')
      }}
    >
      {children}
    </PersistQueryClientProvider>
  )
}
  • gcTime: 1000 * 60 * 60 * 24 means the cache will be stored for 24 hours
  • staleTime: 1000 * 60 * 5 means data is considered fresh for 5 minutes
    • During this timeframe, no API call will be made to retrieve new data
    • When it expires, if the cache still holds data, it returns the cached data and calls the API in the background to fetch new data
    • Default is 0, meaning it will always call the API
  • Use PersistQueryClientProvider and define indexedDBPersister to interact with IndexedDB

Modify file app/layout.tsx to use ReactQueryProviders

import {ReactQueryProviders} from '@/provider/persist-query-client.provider'

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className="min-h-full font-sans">
        <main>
          <ReactQueryProviders>
            {children}
          </ReactQueryProviders>
        </main>
      </body>
    </html>
  )
}

Create file app/react-query-cache-strategies/useApi.ts to define API calling hooks with react-query as follows

import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
import axios from 'axios'

export interface Product {
  id: string
  name: string
  price: number
}

const API_URL = `${process.env.NEXT_PUBLIC_SERVER_HOST}/products`

export function useGetProducts() {
  return useQuery({
    queryKey: ['products'],
    queryFn: async () => {
      const {data} = await axios.get<Product[]>(API_URL)
      return data
    },
  })
}

export function usePrefetchProduct() {
  const queryClient = useQueryClient()

  const prefetchProduct = (id: string) => {
    queryClient.prefetchQuery({
      queryKey: ['product', id],
      queryFn: async () => {
        const {data} = await axios.get<Product>(`${API_URL}/${id}`)
        return data
      },
      staleTime: 1000 * 60 * 10, 
    })
  }

  return {prefetchProduct}
}

export function useCreateProductWriteThrough() {
  const queryClient = useQueryClient()

  return useMutation({
    mutationFn: async (newProduct: Omit<Product, 'id'>) => {
      const {data} = await axios.post<Product>(API_URL, newProduct)
      return data 
    },
    onSuccess: savedProduct => {
      queryClient.setQueryData<Product[]>(['products'], oldProducts => {
        return oldProducts ? [...oldProducts, savedProduct] : [savedProduct]
      })
    },
  })
}

export function useUpdateProductWriteAround() {
  const queryClient = useQueryClient()

  return useMutation({
    mutationFn: async (updatedProduct: Product) => {
      const {data} = await axios.patch<Product>(
        `${API_URL}/${updatedProduct.id}`,
        updatedProduct
      )
      return data
    },
    onSuccess: (_data, updatedProduct) => {

      queryClient.invalidateQueries({
        queryKey: ['products'],
      })

      queryClient.invalidateQueries({
        queryKey: ['product', updatedProduct.id],
        refetchType: 'none',
      })
    },
  })
}

export function useUpdateProductWriteBehind() {
  const queryClient = useQueryClient()

  return useMutation({
    mutationFn: async (updatedProduct: Partial<Product> & {id: string}) => {
      const {data} = await axios.patch<Product>(
        `${API_URL}/${updatedProduct.id}`,
        updatedProduct
      )
      return data
    },

    onMutate: async newProduct => {
      const detailQueryKey = ['products', newProduct.id]
      const listQueryKey = ['products']

      await queryClient.cancelQueries({queryKey: listQueryKey})
      await queryClient.cancelQueries({queryKey: detailQueryKey})

      const previousProducts = queryClient.getQueryData<Product[]>(listQueryKey)
      const previousProductDetail =
        queryClient.getQueryData<Product>(detailQueryKey)

      queryClient.setQueryData<Product[]>(listQueryKey, old => {
        return old?.map(prod =>
          prod.id === newProduct.id ? {...prod, ...newProduct} : prod
        )
      })

      queryClient.setQueryData<Product>(detailQueryKey, old => {
        return old ? {...old, ...newProduct} : undefined
      })

      return {previousProducts, previousProductDetail}
    },

    onError: (_err, newProduct, context) => {
      if (context?.previousProducts) {
        queryClient.setQueryData(['products'], context.previousProducts)
      }
      if (context?.previousProductDetail) {
        queryClient.setQueryData(
          ['products', newProduct.id],
          context.previousProductDetail
        )
      }
    },

    onSettled: (_data, _error, variables) => {
      queryClient.invalidateQueries({
        queryKey: ['products'],
        refetchType: 'none',
      })
      queryClient.invalidateQueries({
        queryKey: ['product', variables.id],
        refetchType: 'none',
      })
    },
  })
}
  • Function useGetProducts to implement CACHE-ASIDE (Lazy Loading) & READ-THROUGH strategy
    • React Query automatically checks the cache to call the API if miss/stale and saves it into the Cache
    • We only need to interact through this hook without manually executing the task of saving data to IndexedDB
  • Function usePrefetchProduct implements REFRESH-AHEAD (Prefetching), we will use it to prefetch data when the user hovers over the product title
  • Function useCreateProductWriteThrough implements WRITE-THROUGH, you can see in the onSuccess field that it directly updates the cache after creating a new product successfully
  • Function useUpdateProductWriteAround implements WRITE-AROUND, after the API call succeeds, it revalidates the cache so that next time it is needed, it will call the API instead of reusing the cached version
  • Function useUpdateProductWriteBehind implements WRITE-BEHIND (Optimistic Update)
    • onMutate is run before calling the API to update data in cache for keys ['products'] and ['products', newProduct.id]
    • onError handles rolling back both List and Detail to their original state if an API error occurs
    • onSettled always revalidates both List and Detail to accurately sync with the Server

Create file app/react-query-cache-strategies/page.tsx as the UI to consume the defined API hooks

'use client'

import {EditOutlined, PlusOutlined} from '@ant-design/icons'
import {
  Button,
  Card,
  Form,
  Input,
  InputNumber,
  Popconfirm,
  Space,
  Table,
  Tag,
  Typography,
  message,
} from 'antd'
import {useState} from 'react'
import {
  Product,
  useCreateProductWriteThrough,
  useGetProducts,
  usePrefetchProduct,
  useUpdateProductWriteAround,
  useUpdateProductWriteBehind,
} from './useApi'

const {Title, Text} = Typography

export default function ProductManagementPage() {
  const [form] = Form.useForm()
  const [createForm] = Form.useForm()
  const [editingKey, setEditingKey] = useState<string>('')

  const {data: products, isLoading, isFetching} = useGetProducts()
  const {prefetchProduct} = usePrefetchProduct()
  const createWriteThrough = useCreateProductWriteThrough()
  const updateWriteAround = useUpdateProductWriteAround()
  const updateWriteBehind = useUpdateProductWriteBehind()

  const isEditing = (record: Product) => record.id === editingKey

  const edit = (record: Product) => {
    form.setFieldsValue({...record})
    setEditingKey(record.id)
  }

  const cancel = () => {
    setEditingKey('')
  }

  const handleCreate = async (values: {
    name: string
    price: number
    description?: string
  }) => {
    try {
      await createWriteThrough.mutateAsync(values)
      message.success('Product created successfully (Write-Through)!')
      createForm.resetFields()
    } catch {
      message.error('Failed to create product.')
    }
  }

  const handleUpdateWriteAround = async (id: string) => {
    try {
      const row = await form.validateFields()
      await updateWriteAround.mutateAsync({id, ...row})
      message.success('Product updated (Write-Around / Invalidate Cache)!')
      setEditingKey('')
    } catch {
      message.error('Failed to update product.')
    }
  }

  const handleUpdateWriteBehind = async (id: string) => {
    try {
      const row = await form.validateFields()
      await updateWriteBehind.mutateAsync({id, ...row})
      message.success('Product updated optimistic (Write-Behind)!')
      setEditingKey('')
    } catch {
      message.error('Failed to update product.')
    }
  }

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      width: '10%',
    },
    {
      title: 'Product Name',
      dataIndex: 'name',
      key: 'name',
      width: '20%',
      render: (text: string, record: Product) => {
        if (isEditing(record)) {
          return (
            <Form.Item 'Please 0}} input message: name="name" name!'}]} product rules="{[{required:" style="{{margin:" true,>
              <Input/>
            </Form.Item>
          )
        }
        return (
          <Text className="cursor-pointer hover:text-blue-500" onMouseEnter="{()"> prefetchProduct(record.id)}
          >
            {text}
          </Text>
        )
      },
    },
    {
      title: 'Description',
      dataIndex: 'description',
      key: 'description',
      width: '40%',
      render: (text: string, record: Product) => {
        if (isEditing(record)) {
          return (
            <Form.Item 0}} name="description" style="{{margin:">
              <Input placeholder="Optional description"/>
            </Form.Item>
          )
        }
        return text || <Text type="secondary">N/A</Text>
      },
    },
    {
      title: 'Price ($)',
      dataIndex: 'price',
      key: 'price',
      width: '12%',
      render: (price: number, record: Product) => {
        if (isEditing(record)) {
          return (
            <Form.Item 'Please 0}} input message: name="price" price!'}]} rules="{[{required:" style="{{margin:" true,>
              <InputNumber className="w-full" min="{0}"/>
            </Form.Item>
          )
        }
        return `${price}`
      },
    },
    {
      title: 'Views',
      dataIndex: 'views',
      key: 'views',
      width: '8%',
      render: (views: number) => <Tag color="cyan">{views ?? 0}</Tag>,
    },
    {
      title: 'Actions',
      key: 'actions',
      render: (_: unknown, record: Product) => {
        const editable = isEditing(record)

        if (editable) {
          return (
            <Space>
              <Button onClick="{()" size="small" type="primary"> handleUpdateWriteAround(record.id)}
                loading={updateWriteAround.isPending}
              >
                Save (Write-Around)
              </Button>
              <Button danger onClick="{()" size="small" type="dashed"> handleUpdateWriteBehind(record.id)}
                loading={updateWriteBehind.isPending}
              >
                Save (Optimistic)
              </Button>

              <Popconfirm onConfirm="{cancel}" title="Cancel editing?">
                <Button size="small">Cancel</Button>
              </Popconfirm>
            </Space>
          )
        }

        return (
          <Space>
            <Button icon="{<EditOutlined"/>}
              disabled={editingKey !== ''}
              onClick={() => edit(record)}
            >
              Edit
            </Button>
          </Space>
        )
      },
    },
  ]

  return (
    <div className="max-w-6xl mx-auto p-4 space-y-6">
      <div className="flex justify-between items-center border-b pb-4">
        <Title level="{2}">Product</Title>
        {isFetching && <Tag color="processing">Fetching Data...</Tag>}
      </div>

      <Card className="shadow-sm mb-5" title="Add New Product">
        <Form className="flex gap-4 items-center flex-wrap" form="{createForm}" layout="inline" onFinish="{handleCreate}">
          <Form.Item 'Enter className="mb-0" message: name="name" name'}]} rules="{[{required:" true,>
            <Input placeholder="Product Name"/>
          </Form.Item>

          <Form.Item className="mb-0" name="description">
            <Input placeholder="Description (Optional)"/>
          </Form.Item>

          <Form.Item 'Enter className="mb-0" message: name="price" price'}]} rules="{<a href="https://howtodevez.blogspot.com/2025/04/all-practice-series.html" target="_blank">{required:" true,>
            <InputNumber min="{0}" placeholder="Price"/>
          </Form.Item>

          <Form.Item className="mb-0">
            <Button htmlType="submit" icon="{<PlusOutlined" type="primary"/>}
              loading={createWriteThrough.isPending}
            >
              Create Product
            </Button>
          </Form.Item>
        </Form>
      </Card>

      <Card className="shadow-sm" title="Product List">
        <Form component="{false}" form="{form}">
          <Table 5}} bordered columns="{columns}" dataSource="{products}" loading="{isLoading}" pagination="{{pageSize:" rowKey="id"/>
        </Form>
      </Card>
    </div>
  )
}

The result is as followsalt textalt text

You can check if the data has been stored in IndexedDB and compare: if data is already present in cache, react-query will not call the API againalt text

Happy coding!

See more articles here.

Comments

Post a Comment

Popular posts from this blog

All Practice Series

Image
Introduction This is a comprehensive page about the technologies I have shared in series format. You can view brief introductions and links to directly access each series you are interested in. In the field of software development, to deploy a product from the initial idea to its release, the standard process typically involves several stages as follows: Database : Designing and implementing the database according to business requirements, storing data during the system's operation. Backend : Handling the main logic of the system, communicating with the database and services. Frontend : Building the interface for users to interact with the system, which could be a desktop, mobile, or web application. This usually includes implementing UI/UX and integrating APIs from the backend. DevOps : Deploying the system for use, which can be done on a server or in the cloud. Testing : Applying testing methods to ensure the product meets the standards for release. Of course, these are just stan...
Read more

Understanding React Server Component

Image
Introduction As most of us already know, React enables us to break down interfaces into independent parts called Components, facilitating reuse and customization. Currently, React Components are divided into two main types: Client Components : widely used in Client Side Rendering (CSR) applications. Server Components : a new type of component that renders on the server side before being sent to the client (browser). At first glance, it may seem similar to Server Side Rendering (SSR) which has been used for a while, but in reality, these two concepts have certain differences. The Difference of RSC (React Server Component) Ease of development: React Server Component allows easy direct connection to server-side resources such as databases or internal services, streamlining development processes. Improved performance: By reducing latency in communication between client and server, React Server Component enhances overall application performance. Reduced source code size: Libraries utili...
Read more

Kubernetes Deployment for Zero Downtime

Image
Introduction In Kubernetes (K8s) , a Pod is the smallest resource unit used to run one or more containers during deployment. There are several ways to create a Pod : you can create it directly, use a ReplicationController , or a ReplicaSet . However, the most commonly used resource for managing Pods is the Deployment . When you use a Deployment , it actually creates a ReplicaSet to manage the Pods but comes with many additional benefits that support the deployment process. Some Advantages of Deployment : Ensures Pod Availability : It guarantees that the specified number of Pods are always running according to the configuration, automatically deploying additional Pods if any failures occur. Supports Restart and Undo Deployment : Allows you to easily restart or roll back to previous versions of your Deployment . Zero Downtime Deployment : When updating configurations or scaling Deployments , zero downtime is crucial. This means that new Pods are created while the old Pods are stil...
Read more

Sitemap

Image
A page aggregator designed for easy reference and search, compiling all blog posts for convenient access. Loading all posts...
Read more

Deploying a NodeJS Server on Google Kubernetes Engine

Image
Introduction to GKE Google Kubernetes Engine (GKE) is a managed Kubernetes service provided by Google Cloud Platform , facilitating simple and efficient deployment of Docker images. We only need to provide some configuration for the number of nodes, machine types, and replicas to use. Some Concepts Cluster A Cluster is a collection of Nodes where Kubernetes can deploy applications. A cluster includes at least one Master Node and multiple Worker Nodes . The Master Node is used to manage the Worker Nodes . Node A Node is a server in the Kubernetes Cluster. Nodes can be physical servers or virtual machines. Each Node runs  Kubernetes , which is responsible for communication between the Master Node and Worker Node , as well as managing Pods and containers running on it. Pod A Pod is the smallest deployable unit in Kubernetes . Each Pod contains one or more containers, typically Docker containers. Containers in the same Pod share a network namespace, meaning they have the ...
Read more

React Practice Series

Image
Introduction React is a JavaScript library created by Facebook , often referred to as the most popular frontend framework today. This page aims to gather articles related to ReactJS , covering topics such as theory, features, and commonly used packages in the process of building ReactJS applications. I will update this series with more articles in the future as new ideas for content come up. The articles are arranged in increasing order of difficulty, so if you have time, it's recommended to start from the beginning of the series. This will ensure you grasp the essential knowledge and information needed for the subsequent articles. Here are some key topics in the series that you need to explore to effectively use ReactJS : Fundamental : React Hook, React Reconciliation. State management : redux, mobx, recoil, zustand, xstate, etc. Middleware libraries : redux-thunk, redux-saga, redux-observable, etc. Popular packages : tasnstack query, immer, styled-components, etc. Rendering te...
Read more

Docker Practice Series

Image
Introduction Docker is an open platform for developing, shipping, and running applications. This page is dedicated to compiling articles related to Docker , covering both the theoretical aspects and practical applications of Docker in setting up popular tools essential for software development. I will be updating this series with more articles in the future as new ideas for topics arise. The articles are arranged in increasing order of difficulty, making it easier for you to follow along. If you have the time, I recommend starting from the beginning of the series to ensure that you grasp the necessary knowledge and information needed for the more advanced articles later on. Here are some key topics in the series that you need to explore to effectively use Docker : Basic knowledge Docker commands Docker Compose Building Docker images Performance improvement Integration with CI/CD Once you have a solid understanding of the foundational knowledge, the extended topics (including advanced...
Read more

Helm for beginer - Deploy nginx to Google Kubernetes Engine

Image
Introduction Helm is a package manager for Kubernetes , which simplifies the process of deploying and managing applications on Kubernetes clusters. Helm uses a packaging format called charts , which are collections of files that describe a related set of Kubernetes resources. Key Components of Helm Charts : Helm packages are called charts. A chart is a collection of files that describe a related set of Kubernetes resources. A single chart might be used to deploy something simple, like a memcached pod, or something complex, like a full web app stack with HTTP servers , databases, caches, and so on. Values : Charts can be customized with values, which are configuration settings that specify how the chart should be installed on the cluster. These values can be set in a ` values.yaml ` file or passed on the command line. Releases : When you install a chart, a new release is created. This means that one chart can be installed multiple times into the same cluster, and each can be indep...
Read more

A Handy Guide to Using Dynamic Import in JavaScript

Image
Introduction In JavaScript, when we import a file, the process usually happens synchronously, known as static import. However, as our applications grow, this synchronous loading can lead to slower initial page loads due to larger JavaScript bundles. Moreover, there are times when imports are necessary only under specific circumstances, leading to unnecessary loading times for users who might not even utilize those features. Details Instead of burdening all users with unnecessary imports, dynamic imports come to the rescue. They allow us to load modules or files only when they are needed, thus improving performance and user experience. Dynamic imports are invoked using the import() function and return a promise. When using default exports, the exported data can be accessed through the default field, while other data can be accessed through fields with matching names. Here's how you can use dynamic imports: import ( "ramda" ). then ( module => { const moduleDefaul...
Read more

DevOps Practice Series

Image
Introduction DevOps is a combination of development (Dev) and operations (Ops), aimed at uniting people, processes, and technology to enhance the software development lifecycle. Here are some key aspects of DevOps: Collaboration and Communication: DevOps fosters a culture where development, IT operations, quality engineering, and security teams work together seamlessly. Continuous Integration and Continuous Delivery (CI/CD): These practices automate the integration and delivery of code changes, ensuring faster and more reliable software releases. Infrastructure as Code (IaC): This approach involves managing and provisioning computing infrastructure through machine-readable scripts, rather than physical hardware configuration. Monitoring and Logging: Continuous monitoring and logging help teams to detect issues early and maintain system reliability. Automation: Automating repetitive tasks reduces errors and increases efficiency, allowing teams to focus on more strategic work. By impleme...
Read more