Results for “data-fetching”

React Server Components vs Client Components in Next.js: the boundary discipline, "use client" / "use server" directives, Server Actions, what serializes across the boundary, common pitfalls. Use this skill to: - Decide whether a component should be RSC or Client. - Push the "use client" boundary as deep as possible. - Implement Server Actions correctly (auth, validation, revalidation). - Compose RSC and Client components without breaking the model. - Pass data across the boundary safely. Do NOT use this skill for: - General Next.js conventions (see nextjs-conventions). - Specific data-fetching APIs and caching (see nextjs-data-fetching). - Routing (see nextjs-routing).

The English summary is being prepared. Showing the original description.

Architect data fetching with TanStack Query v5, SWR, optimistic updates, prefetching, and cache invalidation strategies. Activate on: React Query, SWR, optimistic updates, cache invalidation, prefetching, stale-while-revalidate, infinite queries. NOT for: REST API design (use api-architect), database queries (use database skills), GraphQL schema (use graphql-expert).

The English summary is being prepared. Showing the original description.

Architect data fetching with TanStack Query v5, SWR, optimistic updates, prefetching, and cache invalidation strategies. Activate on: React Query, SWR, optimistic updates, cache invalidation, prefetching, stale-while-revalidate, infinite queries. NOT for: REST API design (use api-architect), database queries (use database skills), GraphQL schema (use graphql-expert).

The English summary is being prepared. Showing the original description.

Write, review, or refactor React code using prioritized guidance for data fetching, bundle size, rendering, component structure, testing, and type safety. Start with high-impact issues such as sequential requests and unnecessary library loading.

• Writing React components and data-fetching logic
• Reviewing code for loading and rendering performance
• Refactoring large components and overly broad interfaces

Create Vitest tests for Mastra playground features using MSW to simulate network responses. Exercise the real client SDK, React Query cache, and components with typed sample data to check loading, access conditions, redirects, and errors.

• Test loading, empty, and error states
• Check requests controlled by permissions or feature flags
• Verify pagination and query parameters

Design GraphQL APIs with clear data types, data-fetching functions called resolvers, and real-time updates. Address repeated database calls, pagination, structured errors, and expensive queries while planning schema changes that preserve compatibility.

• Designing schemas around business concepts
• Reducing repeated database calls with DataLoader
• Planning real-time subscriptions over WebSocket

Set up a personal monitoring dashboard with Vite and TypeScript. The skill provides a folder layout, dependency and build settings, and a page entry point for organizing stock and news panels, data services, and shared utilities.

• Start a personal stock and news dashboard
• Organize panels separately from data-fetching code
• Prepare TypeScript and Vite configuration files

Build dashboard panels in vanilla TypeScript with resizing, saved layout state, loading indicators, and retry controls. Examples also show how to wrap existing data-fetching functions with caching and temporary request pauses after repeated failures.

• Building dashboard panels in vanilla TypeScript
• Saving panel sizes across page reloads
• Adding retry controls to failed data requests

Implement and debug data fetching in Expo and React Native apps. Get guidance on API requests, caching, error handling, authentication tokens, offline behavior, and environment configuration, with fetch, React Query, and SWR options.

• Implementing API requests in an app
• Choosing React Query or SWR for caching
• Investigating network errors and retries

Use when implementing or debugging ANY network request, API call, or data fetching. Covers fetch API, React Query, SWR, error handling, caching, offline support, and Expo Router data loaders (`useLoaderData`).

The English summary is being prepared. Showing the original description.

Use when implementing or debugging ANY network request, API call, or data fetching. Covers fetch API, React Query, SWR, error handling, caching, offline support, loading/empty/error screen states, and Expo Router data loaders (`useLoaderData`).

The English summary is being prepared. Showing the original description.

Implement Fetch API, Caching, and Revalidation strategies in Next.js. Use when fetching data, configuring cache behavior, or implementing revalidation in Next.js.

The English summary is being prepared. Showing the original description.

Provides Next.js App Router data fetching patterns including SWR and React Query integration, parallel data fetching, Incremental Static Regeneration (ISR), revalidation strategies, and error boundaries. Use when implementing data fetching in Next.js applications, choosing between server and client fetching, setting up caching strategies, or handling loading and error states.

The English summary is being prepared. Showing the original description.

You are an expert in Apollo Client, the comprehensive GraphQL client for React applications. You help developers fetch data with GraphQL queries and mutations, manage local and remote state with Apollo's normalized cache, implement optimistic UI updates, handle pagination, and configure authentication — providing a complete data management solution for GraphQL-powered apps.

The English summary is being prepared. Showing the original description.

实现 API 调用 / 缓存 / 加载 / 错误处理 / 乐观更新时使用。覆盖 TanStack Query / SWR / RTK Query / Apollo Client / urql / Pinia Colada / Pinia Query。融合 stale-while-revalidate + 乐观更新 + Mutation + 无限加载。

The English summary is being prepared. Showing the original description.

Data fetching, caching, and revalidation patterns in Next.js App Router. Covers native fetch caching, ISR/SSG/SSR per-route choice, generateStaticParams, unstable_cache, revalidatePath/revalidateTag, Route Handlers, dynamic vs static rendering. Use this skill to: - Pick the right rendering mode (SSG / ISR / SSR / streaming) per route. - Use native fetch caching options correctly. - Build Route Handlers that match REST conventions. - Invalidate cached data after mutations. - Use generateStaticParams for dynamic SSG. Do NOT use this skill for: - RSC vs Client boundaries (see server-component-patterns). - Routing primitives (see nextjs-routing). - General conventions (see nextjs-conventions).

The English summary is being prepared. Showing the original description.

Next.js project structure, App Router conventions, file-based routing primitives, layouts, error boundaries, metadata, image and font optimization, configuration. Apply when implementing or modifying Next.js features. Use this skill to: - Pick the correct file convention (page/layout/loading/error/not-found/route/template/default). - Structure a feature within the App Router tree. - Set up metadata for SEO and OpenGraph. - Configure next.config.js for headers, redirects, image domains. - Use built-in fonts and images correctly. Do NOT use this skill for: - Server vs Client component boundaries (see server-component-patterns). - Data fetching patterns (see nextjs-data-fetching). - Complex routing (parallel/intercepting routes — see nextjs-routing). - Testing (see nextjs-testing).

The English summary is being prepared. Showing the original description.

Next.js App Router routing primitives: file-based routes, dynamic and catch-all segments, route groups, parallel routes, intercepting routes, middleware, programmatic navigation, link patterns. Use this skill to: - Pick the correct dynamic segment syntax for the route shape. - Use route groups to organize without affecting URLs. - Implement parallel/intercepting routes for modal-style navigation. - Build effective middleware for auth, redirects, A/B tests. - Use Link and useRouter correctly. Do NOT use this skill for: - Data fetching per route (see nextjs-data-fetching). - General file conventions (see nextjs-conventions). - RSC vs Client (see server-component-patterns).

The English summary is being prepared. Showing the original description.

TanStack Query (React Query) v5 best practices for data fetching, caching, mutations, and server state management. Use when building data-driven React applications, setting up query configurations, implementing mutations/optimistic updates, configuring caching strategies, integrating with SSR, or fixing v4→v5 migration errors.

The English summary is being prepared. Showing the original description.

Optimize NowStack Mobile across Convex, Expo, and TanStack Start. Use for performance, state, subscriptions, rendering, routing, forms, mobile UI, bundle, or data-fetching improvements.

The English summary is being prepared. Showing the original description.

Apollo Client GraphQL patterns — normalized cache and type policies, queries, mutations with optimistic updates, pagination, fragments, subscriptions, and Suspense hooks

The English summary is being prepared. Showing the original description.

URQL GraphQL client patterns — the exchange pipeline, document and normalized caching, queries, mutations, subscriptions, and authentication

The English summary is being prepared. Showing the original description.

SWR data fetching patterns — keys and fetchers, isLoading vs isValidating, revalidation strategy, useSWRMutation, useSWRInfinite, conditional fetching

The English summary is being prepared. Showing the original description.

tRPC type-safe API patterns — routers and procedures, input validation, context and middleware, TRPCError, and the typed client bridge

The English summary is being prepared. Showing the original description.