Query Guides

Single Query

Create a query using createQuery:

import { createQuery } from "floppy-disk/react";
 
const myQuery = createQuery(
  myAsyncFn,
  // { staleTime: 5000, revalidateOnFocus: false } <-- optional options
);

Use it inside your component:

const useMyQuery = myQuery();
 
function MyComponent() {
  const { data, error } = useMyQuery();
 
  if (!data && !error) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
 
  return <div>{data.foo} {data.bar}</div>;
}

Keyed Query (Dynamic Params)

You can create parameterized queries:

import { createQuery } from "floppy-disk/react";
 
import { getZombieById } from "../utils"; // Your own module
 
const zombieQuery = createQuery(
  getZombieById,
  // { staleTime: 5000, revalidateOnFocus: false } <-- optional options
);

Use it with parameters:

function ZombieDetail({ id }) {
  const useZombieQuery = zombieQuery({ id: 1 });
  const { data, error } = useZombieQuery();
 
  if (!data && !error) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
 
  return <div>Name: {data.name}, hp: {data.hp}</div>;
}

Each unique parameter creates its own cache entry.

Keyed Query Demo

Zombie ID: 3

⏳ Loading...

Store Inheritance

Queries in FloppyDisk are built on top of the core store. This means every query inherits the same capabilities, such as subscribe, getState, and store events. It also gets automatic reactivity out of the box, so components rerender only when the state they use actually changes.

const { data } = useMyQuery();
// ^Only data changes will trigger a re-render
 
const value = useMyQuery().data?.foo.bar.baz;
// ^Only data.foo.bar.baz changes will trigger a re-render

Get state outside React:

const myPlantQuery = createQuery<MyPlantResponse>(getMyPlant); // Query without paramerer
const zombieQuery = createQuery<GetZombieByIdResponse, { id: string }>(getZombieById); // Parameterized query
 
const getMyPlantQueryData = () => myPlantQuery().getState().data;
const getZombieQueryData = ({ id }) => zombieQuery({ id }).getState().data;

Query State Machine Concept of Stale, Revalidate, & Invalidate