native-data-fetching
Netzwerkanfragen und Datenabfrage implementieren
Expo-Apps benötigen zuverlässiges Datenabrufen mit ordnungsgemäßem Caching, Fehlerbehandlung und Offline-Unterstützung. Diese Fähigkeit bietet bewährte Muster für die Implementierung von Netzwerkanfragen, Authentifizierung und resilienter Datenabfrage in React Native.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"native-data-fetching" 사용 중입니다. How do I make a basic GET request to an API?
예상 결과:
Use the fetch API with error handling:
```tsx
const fetchUser = async (userId: string) => {
const response = await fetch(`https://api.example.com/users/${userId}`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
};
```
Key points:
- Always check response.ok before parsing
- Handle network errors separately from HTTP errors
- Consider adding retry logic for resilience
"native-data-fetching" 사용 중입니다. Should I use AsyncStorage or SecureStore for tokens?
예상 결과:
Use SecureStore for authentication tokens and other sensitive data:
```tsx
import * as SecureStore from 'expo-secure-store';
await SecureStore.setItemAsync('auth_token', token);
// NOT: await AsyncStorage.setItem('token', token);
```
AsyncStorage is not encrypted and is accessible to any app with root access. SecureStore uses the device's secure enclave for sensitive data.
"native-data-fetching" 사용 중입니다. How do I configure different API URLs for dev and prod?
예상 결과:
Use EXPO_PUBLIC_ environment variables with .env files:
```
# .env.development
EXPO_PUBLIC_API_URL=http://localhost:3000
# .env.production
EXPO_PUBLIC_API_URL=https://api.production.com
```
```tsx
const BASE_URL = process.env.EXPO_PUBLIC_API_URL;
```
Only use EXPO_PUBLIC_ prefix for client-safe values. Never put secrets (API keys, database passwords) in these variables.
보안 감사
낮은 위험Documentation skill with code examples for Expo networking patterns. Static scanner flagged common JavaScript patterns (template literals, fetch API, environment variables) that are false positives for this documentation use case. All demonstrated patterns follow Expo security best practices.
낮은 위험 문제 (2)
위험 요인
🌐 네트워크 접근 (3)
🔑 환경 변수 (2)
품질 점수
만들 수 있는 것
API-Integration für React Native-App erstellen
Zuverlässige Netzwerkschicht mit Fetch, Fehlerbehandlung und Retry-Logik für Ihre mobile App einrichten.
Caching und Offline-Unterstützung hinzufügen
React Query für Caching, Hintergrundaktualisierungen und Offline-First-Datenzugriff implementieren.
Multi-Environment-API-Einstellungen konfigurieren
Entwicklungs-, Staging- und Produktions-API-URLs mit Umgebungsvariablen einrichten.
이 프롬프트를 사용해 보세요
How do I make API requests in my Expo app? Show me how to fetch data from an endpoint and handle errors properly.
I want to use React Query in my Expo app for data fetching. Show me how to set up the QueryClient and implement queries with caching.
My Expo app needs to work offline. Show me how to detect network status and persist React Query data for offline access.
How do I securely store authentication tokens in my Expo app and add them to API requests? Include token refresh logic.
모범 사례
- Prüfen Sie immer response.ok und behandeln Sie sowohl Netzwerk- als auch HTTP-Fehler bei Datenabrufoperationen
- Verwenden Sie React Query oder SWR für Produktions-Apps, um automatisches Caching, Deduplizierung und Hintergrundaktualisierungen zu erhalten
- Speichern Sie Authentifizierungstokens in expo-secure-store, niemals in AsyncStorage oder plain localStorage
피하기
- response.ok-Prüfungen überspringen und annehmen, dass alle Anfragen erfolgreich sind
- Sensible Daten wie Tokens in AsyncStorage oder Umgebungsvariablen mit Schreibzugriff speichern
- Denselben API-Aufruf wiederholt ohne Implementierung von Caching oder Request-Deduplizierung durchführen