skills.rest
luke-h1
luke-h1COMMUNITY
Explore all skills by this author →
WebsiteGitHub

native-data-fetching

Implement and debug network requests using fetch, axios, and React Query.

13|1|Updated Oct 13, 2023
Search Tags:#authentication#api#error handling#data fetching#networking#react query#offline support
One-click install
npx skills add https://github.com/luke-h1/foam --skill native-data-fetching-luke-h1
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: native-data-fetching
Source: https://github.com/luke-h1/foam/tree/main/.agents/skills/native-data-fetching
Command: npx skills add https://github.com/luke-h1/foam --skill native-data-fetching-luke-h1

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the implementation and debugging of all network requests, API calls, and data fetching operations within your application, ensuring robust and efficient data handling.

Core Features & Use Cases

  • API Request Implementation: Easily set up GET, POST, and other HTTP methods.
  • Data Fetching Libraries: Integrates with React Query (TanStack Query) for advanced caching, state management, and mutations.
  • Error Handling & Resilience: Provides strategies for comprehensive error handling, retries, and request cancellation.
  • Offline Support: Enables offline-first capabilities by checking network status and persisting data.
  • Authentication: Manages token storage and refresh mechanisms securely.
  • Environment Configuration: Supports environment-specific API URLs and configurations.
  • Use Case: When building a feature that displays user profiles fetched from an API, use this Skill to implement the data fetching with React Query, handle loading and error states, and ensure tokens are correctly attached for authentication.

Quick Start

Use the native-data-fetching skill to fetch user data for a given user ID using the fetch API.

Frequently Asked Questions about native-data-fetching

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

FAQPage Schema
How do I set up React Query for data fetching and mutations?▼

React Query setup for data fetching involves configuring the client for advanced caching, state management, and mutations. It streamlines implementing GET and POST requests while maintaining robust application state and handling loading or error conditions.

What's the best way to handle API errors and network request failures?▼

API error handling is best managed through comprehensive strategies using custom ApiError implementations. This approach provides robust resilience by structuring network request failures, enabling retries, and supporting request cancellation.

How does offline support work with React Query and NetInfo?▼

Offline support with React Query uses NetInfo to check network status and React Query's onlineManager to enable offline-first strategies. This approach persists data locally and manages query synchronization when network connectivity is restored.

Can I manage authentication tokens securely using expo-secure-store?▼

Yes, you can manage authentication tokens securely using expo-secure-store for token storage and refresh mechanisms. This approach ensures sensitive credentials are correctly attached to API calls without exposing them to the client environment.

How do I configure environment variables for API URLs in a network request?▼

Configuring environment variables for API URLs involves setting up environment-specific configurations to manage endpoints. This supports distinct development and production environments, ensuring network requests route to the correct API base URL.

Does this data fetching approach work with both the fetch API and axios?▼

Yes, this data fetching approach works with both the fetch API and axios for implementing HTTP methods. It covers basic fetch usage alongside advanced library integration for comprehensive network request handling and debugging.

Related Skills

Explore More Software Engineering Skills→
nawab69nawab69

native-data-fetching

Implement network requests and API data fetching in Expo React Native apps.

Community
Advanced
imankhaimankha

data-always-ready

Enforce parent-guarded rendering for React components with asynchronous data.

Community
Basic
jhlee0409jhlee0409

code-review

Review TypeScript and React code for quality, accessibility, and performance.

Community
Intermediate
expoexpo
2.4k

native-data-fetching

Implement and debug network requests and API calls in Expo applications.

Official
Intermediate