@jswork/react-query-shortcut v1.0.2

react-query-shortcut

A lightweight wrapper for TanStack Query that simplifies API integration with a unified interface.

Installation

yarn add @jswork/react-query-shortcut

Features

• 🚀 Simplified API integration with TanStack Query
• 🎯 String-based query keys for easier management
• 🔄 Unified interface for queries and mutations
• 🛠 Built-in utilities for data management

Basic Setup

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

// Initialize your API endpoints
nx.$api = {
  'users/list': () => fetch('/api/users').then(res => res.json()),
  'users/create': (data) => fetch('/api/users', {
    method: 'POST',
    body: JSON.stringify(data)
  }).then(res => res.json())
};

// Set up QueryClient
const queryClient = new QueryClient();
nx.$client = queryClient;

Usage

useQuery

Simplified query hook for fetching data:

const { data, isLoading } = nx.useQuery('users/list');

// Using object config
const { data, isLoading } = nx.useQuery({
  queryKey: ['custom-key'],
  queryFn: () => fetchCustomData()
});

useMutation

Streamlined mutation hook for data updates:

const { mutate } = nx.useMutation('users/create');

// Handle user creation
const handleCreate = () => {
  mutate({ name: 'John Doe' });
};

// Using object config
const { mutate } = nx.useMutation({
  mutationFn: (data) => updateCustomData(data)
});

getQueryData

Retrieve cached query data:

// Get data with string key
const userData = nx.getQueryData('users/list');

// Get data with array key
const nestedData = nx.getQueryData(['parent', 'child']);

invalidateQuery

Invalidate and refetch queries:

// Invalidate with string key
await nx.invalidateQuery('users/list');

// Invalidate with array key
await nx.invalidateQuery(['parent', 'child']);

License

Code released under the MIT license.