skills.rest
operately
operatelyOFFICIAL
Explore all skills by this author →
Website𝕏@operatelyGitHub

tanstack-query

Migrate Operately frontend data fetching to TanStack Query loaders and mutations.

553|70|Updated Feb 28, 2023
Search Tags:#caching#frontend#react#data fetching#migration#tanstack query#mutations
One-click install
npx skills add https://github.com/operately/operately --skill tanstack-query-operately
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-query
Source: https://github.com/operately/operately/tree/main/.agents/skills/tanstack-query
Command: npx skills add https://github.com/operately/operately --skill tanstack-query-operately

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Operately's web app has two competing data-fetching patterns: legacy imperative Api.* calls in loaders, generated tuple hooks, and Pages.useRefresh, versus the newer TanStack Query approach. This Skill gives an AI agent the exact rules and skeletons to write new pages with TanStack Query and to migrate an existing surface's API calls in the same change, avoiding mixed loaders and stale caches. ## Core Features & Use Cases - Loader migration rules: Prefetch with generated fooQuery helpers, return query inputs instead of payloads, and read data with useLoadedQuery so pages do not refetch on mount. - Mutation lifecycle wrappers: Create useMutation hooks in model lifecycle files that invalidate the right query key prefixes on success, with canonical file references. - Testing guidance: Colocated Jest tests that seed the query client, run invalidation helpers, and assert isInvalidated on intended and unrelated keys. - Use Case: When fixing a bug on a project page that still uses Api.projects.useCreate, migrate that page's loader and mutation to TanStack Query in the same PR, following the provided old-to-new mapping table. ## Quick Start Use the tanstack-query skill to convert this page's loader and mutation from raw Api calls to TanStack Query.

Frequently Asked Questions about tanstack-query

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

FAQPage Schema
How do I migrate a page loader to TanStack Query?▼

Build the query input, prefetch with await Api.namespace.fooQuery(queryInput) in the router loader, and return the input rather than the fetched record. In the component, read it with useLoadedQuery(Api.namespace.fooQueryOptions(queryInput)) and throw if the expected field is missing.

How do I replace Pages.useRefresh with TanStack Query?▼

Replace Pages.useRefresh with a local useRefresh that calls queryClient.invalidateQueries on the page's query keys. After a TanStack loader, Pages.useRefresh will not update the cache, so invalidation through the shared query client is required.

When should I not migrate API calls to TanStack Query?▼

Leave typeahead and search-as-you-type functions such as People.usePeopleSearch imperative, and do not migrate unrelated sibling pages in the same PR. ProjectPage only needs migration when that page itself is the requested work.

What is the difference between useQuery and useLoadedQuery?▼

Use useLoadedQuery when the router loader prefetched the query; it uses loaderBackedQueryOptions so the page does not refetch on mount unless invalidated. Use plain useQuery with fooQueryOptions for non-prefetched queries like the company layout's getMe.

How do I test TanStack Query mutation invalidation in Jest?▼

Colocate a fooLifecycle.test.ts next to the lifecycle file, seed keys with queryClient.setQueryData, run the invalidate helper, and assert getQueryState(key)?.isInvalidated. Cover the intended prefixes plus one unrelated key that must stay clean.

Related Skills

Explore More Software Engineering Skills→
themadorgthemadorg
6

bedrud-fe-platform

Set up a React frontend with TanStack Router, typed API client, and auth hooks.

Official
Intermediate
hypershift-communityhypershift-community

Code Formatting

Enforce 'When...it should...' format for Go test names.

Official
Basic
connectedxmconnectedxm

applying-backend-diff

Convert backend PR diffs into admin-sdk query and mutation modules.

Official
Advanced
lunaticwithaducklunaticwithaduck

data-state

Compare React data-state libraries and recommend migration patterns for API fetching and persistence.

Community
Advanced