zustand-queries v1.0.10

Zustand Queries

Asynchronous server-state management for Zustand (React or Vanilla JS). Tiny size and high perfomance. TypeScript fully supported.

Features

• Automatic cache control and invalidation
• Stale results while re-validating
• Promise-based queries
• Suspense mode for React's <Suspense />
• Comming soon: retries on errors, SSR support

Installing

Zustand is peer dependency and required to be installed.

NPM

npm install zustand-queries --save

Yarn

yarn add zustand-queries

Getting started

Caching is based on using async functions or functions, which return Promise. Result of returned Promise is cached by function's arguments array as key.

React/Preact

Cache storage initialization:

import { create } from 'zustand'
import { createCache } from 'zustand-queries'

export const useCacheStore = create(createCache())

Example of API function, which fetches data from server and returns Promise:

export const API = {
  getPostsByDate(startDate, endDate) {
    return fetch(`https://example.com/posts/?start=${startDate}&end=${endDate}`)
  }
}

Using in components:

import { useCacheStore } from '...'
import { API } from '...'

function PostCard() {
  const { $query } = useCacheStore()

  // Result of API.getPostsByDate is cached with it's arguments array as key
  const { data, loading, error, refetch } = $query(API.getPostsByDate, ['12.10.2023', '01.07.2024'])

  if (loading) return <div>Loading...</div>

  if (error) throw new Error('Something went wrong')

  return (
    <div>
      <h2>Content of post №1754:</h2>
      <p>{ data }</p>
      <button onClick={refetch}>Update data</button>
    </div>
  )
}

React Suspense mode:

import { useCacheStore } from '...'
import { API } from '...'

function SuspensedPostCard() {
  const { $suspenseQuery } = useCacheStore()

  const { data } = $suspenseQuery(API.getPostsByDate, ['12.10.2023', '01.07.2024'])

  return (
    <div>
      <h2>Content of post №1754:</h2>
      <p>{ data }</p>
      <button onClick={refetch}>Update data</button>
    </div>
  )
}