Docs
Query
Network Mode

Network Mode

Floppy Disk has no such "network mode" abstraction like TanStack-Query (opens in a new tab). But, we can replicate the "network mode" functionality easily by utilizing its options.

Note that by default, Floppy Disk will call the query function without checking online status.

Prevent Fetch When Offline

const useMyQuery = createQuery(myQueryFn, {
  enabled: (key) => {
    if (!navigator.onLine) return false; // Prevent all fetch
 
    // Or, allow initial fetch, but prevent refetch when offline
    // const { isSuccess } = useMyQuery.get(key);
    // if (isSuccess && !navigator.onLine) return false;
 
    return true;
  },
});

Prevent Retrying from Error When Offline

const useMyQuery = createQuery(myQueryFn, {
  retry: () => {
    if (!navigator.onLine) return 0; // No retry
    return 1; // Retry once when online
  },
});
ℹ️

Example: https://codesandbox.io/.../examples/react/query-network-status (opens in a new tab)

Set Globally

import { createQuery as createQueryOriginal } from 'floppy-disk';
 
export const createQuery = (queryFn, options = {}) => {
  const useQuery = createQueryOriginal(
    queryFn,
    {
      ...options,
      enabled: (key) => {
        if (!navigator.onLine) return false;
        return typeof options.enabled === 'function'
          ? options.enabled(key)
          : (options.enabled ?? true);
      },
      retry: (error, state) => {
        if (!navigator.onLine) return 0;
        return typeof options.retry === 'function'
          ? options.retry(error, state)
          : (options.retry ?? 1);
      },
    },
  );
  return useQuery;
};
Single Query with ParamsPaginated/Infinite Query