agentsclimarketplace

Rn data fetching

Skill lukedj78/dev-flow/rn-data-fetching

A filesystem contract (.workflow/meta.json) + 37 agent skills that take a product from idea to production: web (Next.js 16) & mobile (Expo/RN), plus an eve agent engine and Linear/scrum. Runs on Claude Code, Codex, Copilot, Gemini, Cursor.

Install
npx -y skills add lukedj78/dev-flow --skill rn-data-fetching

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Use when fetching data from APIs in React Native: choosing between fetch+useEffect (didactic only) and TanStack Query (production default), wiring the QueryClient provider, building queries / mutations / optimistic updates / paginated and infinite lists / cache invalidation / refetch on focus, handling loading and error states, AsyncStorage persistence, offline-first behavior. Triggers on: "fetch posts from API", "infinite scroll", "optimistic mutation", "cache invalidation", "loading state". Not for: styling lists (rn-styling), backend setup (rn-backend, Wave 3 — provider-agnostic), GraphQL clients (out of scope).

SKILL.md

3.1 KB, as published. Nobody here has run it

rn-data-fetching — guardrail for data fetching in React Native + Expo

For the current Expo API and per-version details, verify against the Expo docs / MCP mcp.expo.dev / expo/skills (see rn-fundamentals → Source of truth).

The 5 rules (non-negotiable)

  1. TanStack Query is the default for any data that comes from the network. fetch + useEffect is acceptable ONLY in didactic examples or for one-off bootstrap calls (e.g. reading a config at app start).
  2. One QueryClient per app, mounted at the root layout. Never instantiate per-screen.
  3. Query keys are arrays, hierarchical, with the most specific filter last: ["posts", "list", { filter }]. NEVER stringly-typed keys.
  4. Every mutation invalidates the queries it affects. Use queryClient.invalidateQueries({ queryKey: [...] }) in onSuccess. Optimistic updates use onMutate + onError rollback.
  5. staleTime ≥ 60_000 ms is the default to avoid refetch-on-focus storms. Tune per query based on freshness need.

Quick decision tree

  • "Should I use fetch or TanStack Query?" → references/decision-tree.md
  • "How do I set up TanStack Query in a fresh Expo app?" → references/tanstack-query-setup.md
  • "What's the right query key shape, the right cancel pattern, the right loading state?" → references/patterns.md
  • "Show me a working query / mutation / infinite scroll example" → references/examples/
  • "Why does my fetch race on unmount?" → references/concepts.md

Common anti-patterns (NEVER do)

  • ❌ useEffect(() => { fetch(...).then(setData) }, []) for production data — no retry, no dedup, no cancel.
  • ❌ useState<Data | null>(null) + useState<boolean>(false) for loading — let TanStack Query own server state.
  • ❌ queryKey: "posts" as a string — must be an array.
  • ❌ Calling setData after the component unmounts — TanStack Query handles cancel automatically.
  • ❌ Mutation that updates the server but does NOT invalidateQueries — UI shows stale data.
  • ❌ Refetching on every navigation — set staleTime per query.

Sources

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.