@react-hookbox/data-query

⚡ @react-hookbox/data-query

Powerful asynchronous state management for React — built on top of @tanstack/react-query, for data fetching, caching, and mutating.

✨ Features

• 🔍 createDataQuery for creating query definitions
• 🔍 useDataQuery for fetching and caching data
• ✏️ createDataMutation for creating mutation definitions
• ✏️ useDataMutation for creating/updating/deleting data
• ⚛️ Hooks-based API that fits seamlessly into React

📦 Installation

npm install @react-hookbox/data-query @tanstack/react-query

yarn add @react-hookbox/data-query @tanstack/react-query

pnpm add @react-hookbox/data-query @tanstack/react-query

Peer Dependencies

This package requires @tanstack/react-query as a peer dependency. Make sure to wrap your app with QueryClientProvider:

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return <QueryClientProvider client={queryClient}>{/* Your app */}</QueryClientProvider>;
}

✨ useDataQuery — Fetching & Caching Data

import { createDataQuery, useDataQuery } from '@react-hookbox/data-query';

// Define the query
const userQuery = createDataQuery({
  queryFn: async (variables: { id: string }) => {
    const response = await fetch(`/api/users/${variables.id}`);
    return response.json();
  },
  queryKey: (variables) => ['user', variables.id],
});

// Use in a component
function UserProfile({ id }: { id: string }) {
  const [response] = useDataQuery(userQuery, { id });

  if (response.isLoading) return <div>Loading...</div>;
  if (response.isError) return <div>Error: {response.error.message}</div>;

  return <div>{response.data?.name}</div>;
}

✨ useDataMutation — Creating/Updating/Deleting Data

import { createDataMutation, useDataMutation } from '@react-hookbox/data-query';

// Define the mutation
const createUserMutation = createDataMutation({
  mutationFn: async (variables: { name: string; email: string }) => {
    const response = await fetch('/api/users', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(variables),
    });
    return response.json();
  },
});

// Use in a component
function CreateUserForm() {
  const [mutate, { isPending, isError, error, isSuccess }] = useDataMutation(createUserMutation, {
    onSuccess: (data) => {
      console.log('User created:', data);
    },
    onError: (error) => {
      console.error('Failed to create user:', error);
    },
  });

  const handleSubmit = () => {
    mutate({ name: 'John Doe', email: '[e-mail]' });
  };

  return (
    <div>
      <button onClick={handleSubmit} disabled={isPending}>
        {isPending ? 'Creating...' : 'Create User'}
      </button>
      {isSuccess && <p>User created successfully!</p>}
      {isError && <p>Error: {error?.message}</p>}
    </div>
  );
}

🛠️ Development

Build

pnpm build

Clean

pnpm clean

Lint

pnpm lint

Type Check

pnpm check-types

📄 License

MIT