query-factories

Integrate TanStack Query with Result types for queries and mutations.

35|4|Updated Dec 18, 2024
One-click install
npx skills add https://github.com/wellcrafted-dev/wellcrafted --skill query-factories
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: query-factories
Source: https://github.com/wellcrafted-dev/wellcrafted/tree/main/skills/query-factories
Command: npx skills add https://github.com/wellcrafted-dev/wellcrafted --skill query-factories

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill streamlines the integration of TanStack Query (React Query, Svelte Query) with wellcrafted's Result and error-handling patterns, simplifying the management of asynchronous data operations.

Core Features & Use Cases

  • Define Queries and Mutations: Easily set up queries and mutations that return Result types, ensuring robust error handling.
  • Dual Interface: Provides both reactive (.options) and imperative (.fetch()/.execute()) interfaces for flexible usage in components or workflows.
  • Error Transformation: Facilitates transforming technical service errors into user-friendly messages at the query boundary.
  • Use Case: When building a dashboard, use this Skill to define queries for fetching user data and mutations for updating user profiles, ensuring that any errors during these operations are gracefully handled and presented to the user.

Quick Start

Use the query-factories skill to define a query for fetching user data with the key ['users', userId].

Frequently Asked Questions about query-factories

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I integrate TanStack Query with Result types for error handling?

This Skill streamlines TanStack Query integration by linking queries and mutations with Result types, providing a structured approach to manage asynchronous state and transform technical errors into user-friendly messages.

Can I use both reactive and imperative data fetching patterns in React Query?

Yes, the dual interface supports reactive `.options` for component binding and imperative `.fetch()` or `.execute()` methods for workflows, enabling flexible TanStack Query data fetching and mutation execution.

How do I organize query keys and transform errors when fetching user data?

You organize query keys using structured arrays like `['users', userId]` and transform technical service errors into user-friendly messages at the query boundary when defining TanStack Query data fetching operations.

Does this approach work for managing asynchronous state in Svelte Query?

Yes, the Skill supports Svelte Query alongside React Query, enabling frontend applications to manage asynchronous state, define mutations, and handle data fetching operations using Result types and structured query keys.

What is the best way to define mutations that return Result types in a frontend dashboard?

The best way is using this Skill to define mutations that return Result types, enabling frontend dashboards to update user profiles while gracefully handling and presenting asynchronous operation errors to users.