Documentation

registerFetcher

stable

Register a fetcher function for a query

Register a global fetcher function for a query key, allowing you to use the query without specifying a fetcher in each useQuery call.

Core APIGlobal

Centralized Configuration

registerFetcher is perfect for centralizing your data fetching logic and configuration in one place.

Signature

function registerFetcher<TData, TError = Error>(
  queryKey: QueryKey,
  options: QueryOptions<TData, TError> & { fetcher: () => Promise<TData> }
): void

Parameters

queryKey

QueryKeyRequired

Unique identifier for the query. Can be a string or array of primitives.

options

QueryOptions<TData, TError> & { fetcher: () => Promise<TData> }Required

Configuration object containing the fetcher function and optional settings.

options.fetcher

() => Promise<TData>Required

Function that returns a Promise resolving to the data.

options.staleTime

numberDefault: 0

Time in milliseconds after which data is considered stale.

options.refetchOnSubscribe

'always' | 'stale' | falseDefault: 'stale'

When to refetch data when component subscribes.

options.persist

booleanDefault: true

Whether to persist this query's data when using a persister. Set to false for sensitive or temporary data.

Returns

Returns

void

No return value

Examples

Basic Registration

Register a fetcher for a query key

import { registerFetcher } from 'qortex-react';


// Register a fetcher for user data
registerFetcher(
  'user-data',
  {
    fetcher: async () => {
      const response = await fetch('/api/user');
      return response.json();
    }
  }
);


// Now you can use it without specifying a fetcher
function UserProfile() {
  const { data, isLoading } = useQuery('user-data', {});
  
  if (isLoading) return <div>Loading...</div>;
  return <div>Hello, {data.name}!</div>;
}

With Options

Register a fetcher with default options

import { registerFetcher } from 'qortex-react';


// Register with default options
registerFetcher(
  'products',
  {
    fetcher: async () => {
      const response = await fetch('/api/products');
      return response.json();
    },
    staleTime: 5 * 60 * 1000, // 5 minutes
    refetchOnSubscribe: 'stale'
  }
);


// Use with minimal configuration
function ProductList() {
  const { data } = useQuery('products', {});
  
  return (
    <div>
      {data?.map(product => (
        <div key={product.id}>{product.name}</div>
      ))}
    </div>
  );
}

Skip Persistence

Exclude sensitive data from persistence

import { registerFetcher } from 'qortex-react';


// User profile - persisted (default)
registerFetcher('user-profile', {
  fetcher: async () => fetch('/api/profile').then(r => r.json())
});


// Auth tokens - NOT persisted (sensitive data)
registerFetcher('auth-session', {
  fetcher: async () => fetch('/api/session').then(r => r.json()),
  persist: false // Won't be saved to localStorage/sessionStorage
});


// Temporary UI state - NOT persisted
registerFetcher('temp-filters', {
  fetcher: async () => ({ category: 'all', sort: 'newest' }),
  persist: false
});

Behavior

Global Registration

Makes the fetcher available globally for the query key

Default Options

Sets default options that apply to all uses of the query

Simplified Usage

Allows useQuery calls without specifying a fetcher

Centralized Logic

Centralizes data fetching logic in one place

Best Practices

Do's

  • ✓Register fetchers early in your application lifecycle
  • ✓Use descriptive query keys that match your API endpoints
  • ✓Set appropriate default options for your use case
  • ✓Keep fetcher functions pure and focused

Don'ts

  • ✗Don't register the same query key multiple times
  • ✗Don't use complex logic in fetcher functions
  • ✗Don't forget to handle errors in your fetchers
  • ✗Don't register fetchers in render functions

Related Pages

useQueryfetchQueryQueryOptions