Documentation

useQueryData

stable

Hook that returns only the data value

A lightweight hook that returns only the data value from a query, perfect for simple data consumption without loading states.

React HookLightweight

When to Use

useQueryData is perfect for simple data consumption where you don't need loading states. Use useQuery when you need full state management.

Signature

function useQueryData<TData>(
  queryKey: QueryKey,
  options?: QueryOptions<TData>
): TData | undefined

Parameters

queryKey

QueryKeyRequired

Unique identifier for the query. Can be a string, array, or object.

options

QueryOptions<TData>

Optional configuration object. If no fetcher is provided, uses a previously registered fetcher.

options.fetcher

() => Promise<TData>

Function that returns a Promise resolving to the data. Optional if fetcher was already registered.

Returns

Returns

TData | undefined

The fetched data, undefined while loading or on error

Examples

Basic Usage

Simple data consumption without loading states

import { useQueryData } from 'qortex-react';


function UserName({ userId }: { userId: string }) {
  const userName = useQueryData(
    ['user', userId],
    {
      fetcher: async () => {
        const response = await fetch(`/api/users/${userId}`);
        const user = await response.json();
        return user.name;
      }
    }
  );


  return <span>{userName || 'Loading...'}</span>;
}

With Default Value

Provide a default value for better UX

import { useQueryData } from 'qortex-react';


function ProductPrice({ productId }: { productId: string }) {
  const price = useQueryData(
    ['product', productId],
    {
      fetcher: async () => {
        const response = await fetch(`/api/products/${productId}`);
        const product = await response.json();
        return product.price;
      }
    }
  );


  return <span>${price ?? '0.00'}</span>;
}

Using Registered Fetcher

Using useQueryData with a previously registered fetcher

import { useQueryData, registerFetcher } from 'qortex-react';


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


function UserName() {
  // No need to provide fetcher - uses registered one
  const userName = useQueryData('user-name');


  return <span>{userName || 'Loading...'}</span>;
}

Behavior

Data Only

Returns only the data value, no loading or error states

Lightweight

Minimal overhead, perfect for simple data consumption

Automatic Caching

Shares cache with other hooks using the same query key

Best Practices

Do's

  • ✓Use for simple data consumption where you don't need loading states
  • ✓Provide meaningful default values for better UX
  • ✓Use with TypeScript for type safety
  • ✓Combine with useQuery when you need loading/error states

Don'ts

  • ✗Don't use when you need loading or error states
  • ✗Don't use for complex data transformations
  • ✗Don't forget to handle undefined values
  • ✗Don't use for one-time operations

Related Pages

useQueryuseQuerySelectfetchQuery