data-loading

Build SWR-based API hooks with query, infinite, and mutation factories for React data loading.

10|3|Updated Oct 23, 2023
One-click install
npx skills add https://github.com/Layer-Fi/layer-react --skill data-loading-layer-fi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: data-loading
Source: https://github.com/Layer-Fi/layer-react/tree/main/src/hooks/api
Command: npx skills add https://github.com/Layer-Fi/layer-react --skill data-loading-layer-fi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires swr, effect, lodash-es.

What problem does it solve? It standardizes how a React codebase fetches and caches server data by enforcing SWR hook factories, cache tags, and file-layout conventions, preventing ad-hoc fetch calls and inconsistent cache invalidation. ## Core Features & Use Cases - Hook Factories: Build every endpoint hook from createQueryHook, createInfiniteQueryHook, or createMutationHook instead of calling SWR directly. - Cache Tag System: Declare exported tag keys and use global cache actions (invalidate, forceReload, patchByKey, optimisticallyUpdate) for cross-module invalidation without hand-built cache keys. - Route-Mirrored Layout: Organize files under src/hooks/api/** so directory paths mirror REST routes and filenames match HTTP methods, with upsert hooks composed via createUpsertHook. - Use Case: When adding a new GET /v1/businesses/{id}/reports endpoint, create reports/get.ts with a tag key, response schema, getWithQuery request, and a createQueryHook call, then wire its cache actions into related mutations. ## Quick Start Add a new API hook for an endpoint by following the data-loading conventions in src/hooks/api, using the appropriate SWR factory and exporting its cache tag key.

Frequently Asked Questions about data-loading

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

FAQPage Schema
How do I create a new API hook with SWR in React?▼

Use one of three factories: createQueryHook for a single GET, createInfiniteQueryHook for cursor-paginated lists, or createMutationHook for POST/PATCH/PUT/DELETE. Never call useSWR, useSWRInfinite, or useSWRMutation directly in feature code.

How do I invalidate SWR cache after a mutation?▼

Use the global cache actions created next to the query hook, such as invalidate, forceReload, or patchByKey, and call them inside the mutation's useOnTriggerSuccess callback. Tags locate every matching cache entry, including all pages of an infinite query, without hand-built keys.

What is the difference between createQueryHook and createInfiniteQueryHook?▼

createQueryHook fetches a single resource and supports select for unwrapping envelopes, while createInfiniteQueryHook handles cursor-paginated lists, requires a PaginatedResponseSchema, and exposes flattenedData, hasMore, and fetchMore instead of data, size, and setSize.

Can I read React context or stores inside an API hook?▼

No. The src/hooks/api layer is blocked by lint from importing UI, feature hooks, and domain stores. Export a parameterized hook from @api and wrap it in src/hooks/features, which may combine it with app state.

Why should mutation hooks avoid names like useDeleteBankAccount?▼

Hook names must reflect what the call actually does. DELETE endpoints that archive or unlink rather than destroy get domain names like useArchiveBankTransaction or useUnlinkBankAccount, so callers do not add misleading destructive confirmations.