[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6GFE4REJHH2HTZPJYC4TVD1":3,"skill-same:01M6GFE4REJHH2HTZPJYC4TVD1":81},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":28,"publishedAt":49,"linkOnly":50,"markdownContent":51,"markdownBody":52,"frontMatter":53,"refName":60,"commitSha":61,"skillDirectory":62,"forksCount":14,"repositoryHtmlUrl":63,"repositoryHomepageUrl":64,"ownerHtmlUrl":65,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":66,"install":67,"resources":80},"01M6GFE4REJHH2HTZPJYC4TVD1","native-data-fetching",null,"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).","ibragimov-oasis\u002Fname-navigator","ibragimov-oasis","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F240665573?v=4","01M6DF78Y45R8228FHAZ7G6JXM","IBRAGIMOV MUKHAMMADJON","01M6DF792RGGYNSN2BMSED45SJ",0,"MIT","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fname-navigator\u002Fblob\u002Fmain\u002F.antigravity\u002Fskills\u002Fskills-antigravity\u002Fsource-antigravity-awesome-skills\u002Fplugins\u002Fantigravity-awesome-skills-claude\u002Fskills\u002Fnative-data-fetching\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000033","数据分析师","PROFESSION","适用职业",[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48],"native","native data fetching","data","router","expo router","error","caching","artifact","domain","query","community","expo","support","fetch","api","network","swr","offline","debugging","react","2026-11-10 10:12:30",false,"---\nname: native-data-fetching\ndescription: 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).\nrisk: unknown\nsource: community\nversion: 1.0.0\nlicense: MIT\ntags:\n  - domain\u002Fskills\n  - artifact\u002Fskill\n  - source\u002Fskills-antigravity\n---\n\n# Expo Networking\n\n**You MUST use this skill for ANY networking work including API requests, data fetching, caching, or network debugging.**\n\n## References\n\nConsult these resources as needed:\n\n```\nreferences\u002F\n  expo-router-loaders.md   Route-level data loading with Expo Router loaders (web, SDK 55+)\n```\n\n## When to Use\nUse this skill when:\n\n- Implementing API requests\n- Setting up data fetching (React Query, SWR)\n- Using Expo Router data loaders (`useLoaderData`, web SDK 55+)\n- Debugging network failures\n- Implementing caching strategies\n- Handling offline scenarios\n- Authentication\u002Ftoken management\n- Configuring API URLs and environment variables\n\n## Preferences\n\n- Avoid axios, prefer expo\u002Ffetch\n\n## Common Issues & Solutions\n\n### 1. Basic Fetch Usage\n\n**Simple GET request**:\n\n```tsx\nconst fetchUser = async (userId: string) => {\n  const response = await fetch(`https:\u002F\u002Fapi.example.com\u002Fusers\u002F${userId}`);\n\n  if (!response.ok) {\n    throw new Error(`HTTP error! status: ${response.status}`);\n  }\n\n  return response.json();\n};\n```\n\n**POST request with body**:\n\n```tsx\nconst createUser = async (userData: UserData) => {\n  const response = await fetch(\"https:\u002F\u002Fapi.example.com\u002Fusers\", {\n    method: \"POST\",\n    headers: {\n      \"Content-Type\": \"application\u002Fjson\",\n      Authorization: `Bearer ${token}`,\n    },\n    body: JSON.stringify(userData),\n  });\n\n  if (!response.ok) {\n    const error = await response.json();\n    throw new Error(error.message);\n  }\n\n  return response.json();\n};\n```\n\n---\n\n### 2. React Query (TanStack Query)\n\n**Setup**:\n\n```tsx\n\u002F\u002F app\u002F_layout.tsx\nimport { QueryClient, QueryClientProvider } from \"@tanstack\u002Freact-query\";\n\nconst queryClient = new QueryClient({\n  defaultOptions: {\n    queries: {\n      staleTime: 1000 * 60 * 5, \u002F\u002F 5 minutes\n      retry: 2,\n    },\n  },\n});\n\nexport default function RootLayout() {\n  return (\n    \u003CQueryClientProvider client={queryClient}>\n      \u003CStack \u002F>\n    \u003C\u002FQueryClientProvider>\n  );\n}\n```\n\n**Fetching data**:\n\n```tsx\nimport { useQuery } from \"@tanstack\u002Freact-query\";\n\nfunction UserProfile({ userId }: { userId: string }) {\n  const { data, isLoading, error, refetch } = useQuery({\n    queryKey: [\"user\", userId],\n    queryFn: () => fetchUser(userId),\n  });\n\n  if (isLoading) return \u003CLoading \u002F>;\n  if (error) return \u003CError message={error.message} \u002F>;\n\n  return \u003CProfile user={data} \u002F>;\n}\n```\n\n**Mutations**:\n\n```tsx\nimport { useMutation, useQueryClient } from \"@tanstack\u002Freact-query\";\n\nfunction CreateUserForm() {\n  const queryClient = useQueryClient();\n\n  const mutation = useMutation({\n    mutationFn: createUser,\n    onSuccess: () => {\n      \u002F\u002F Invalidate and refetch\n      queryClient.invalidateQueries({ queryKey: [\"users\"] });\n    },\n  });\n\n  const handleSubmit = (data: UserData) => {\n    mutation.mutate(data);\n  };\n\n  return \u003CForm onSubmit={handleSubmit} isLoading={mutation.isPending} \u002F>;\n}\n```\n\n---\n\n### 3. Error Handling\n\n**Comprehensive error handling**:\n\n```tsx\nclass ApiError extends Error {\n  constructor(message: string, public status: number, public code?: string) {\n    super(message);\n    this.name = \"ApiError\";\n  }\n}\n\nconst fetchWithErrorHandling = async (url: string, options?: RequestInit) => {\n  try {\n    const response = await fetch(url, options);\n\n    if (!response.ok) {\n      const error = await response.json().catch(() => ({}));\n      throw new ApiError(\n        error.message || \"Request failed\",\n        response.status,\n        error.code\n      );\n    }\n\n    return response.json();\n  } catch (error) {\n    if (error instanceof ApiError) {\n      throw error;\n    }\n    \u002F\u002F Network error (no internet, timeout, etc.)\n    throw new ApiError(\"Network error\", 0, \"NETWORK_ERROR\");\n  }\n};\n```\n\n**Retry logic**:\n\n```tsx\nconst fetchWithRetry = async (\n  url: string,\n  options?: RequestInit,\n  retries = 3\n) => {\n  for (let i = 0; i \u003C retries; i++) {\n    try {\n      return await fetchWithErrorHandling(url, options);\n    } catch (error) {\n      if (i === retries - 1) throw error;\n      \u002F\u002F Exponential backoff\n      await new Promise((r) => setTimeout(r, Math.pow(2, i) * 1000));\n    }\n  }\n};\n```\n\n---\n\n### 4. Authentication\n\n**Token management**:\n\n```tsx\nimport * as SecureStore from \"expo-secure-store\";\n\nconst TOKEN_KEY = \"auth_token\";\n\nexport const auth = {\n  getToken: () => SecureStore.getItemAsync(TOKEN_KEY),\n  setToken: (token: string) => SecureStore.setItemAsync(TOKEN_KEY, token),\n  removeToken: () => SecureStore.deleteItemAsync(TOKEN_KEY),\n};\n\n\u002F\u002F Authenticated fetch wrapper\nconst authFetch = async (url: string, options: RequestInit = {}) => {\n  const token = await auth.getToken();\n\n  return fetch(url, {\n    ...options,\n    headers: {\n      ...options.headers,\n      Authorization: token ? `Bearer ${token}` : \"\",\n    },\n  });\n};\n```\n\n**Token refresh**:\n\n```tsx\nlet isRefreshing = false;\nlet refreshPromise: Promise\u003Cstring> | null = null;\n\nconst getValidToken = async (): Promise\u003Cstring> => {\n  const token = await auth.getToken();\n\n  if (!token || isTokenExpired(token)) {\n    if (!isRefreshing) {\n      isRefreshing = true;\n      refreshPromise = refreshToken().finally(() => {\n        isRefreshing = false;\n        refreshPromise = null;\n      });\n    }\n    return refreshPromise!;\n  }\n\n  return token;\n};\n```\n\n---\n\n### 5. Offline Support\n\n**Check network status**:\n\n```tsx\nimport NetInfo from \"@react-native-community\u002Fnetinfo\";\n\n\u002F\u002F Hook for network status\nfunction useNetworkStatus() {\n  const [isOnline, setIsOnline] = useState(true);\n\n  useEffect(() => {\n    return NetInfo.addEventListener((state) => {\n      setIsOnline(state.isConnected ?? true);\n    });\n  }, []);\n\n  return isOnline;\n}\n```\n\n**Offline-first with React Query**:\n\n```tsx\nimport { onlineManager } from \"@tanstack\u002Freact-query\";\nimport NetInfo from \"@react-native-community\u002Fnetinfo\";\n\n\u002F\u002F Sync React Query with network status\nonlineManager.setEventListener((setOnline) => {\n  return NetInfo.addEventListener((state) => {\n    setOnline(state.isConnected ?? true);\n  });\n});\n\n\u002F\u002F Queries will pause when offline and resume when online\n```\n\n---\n\n### 6. Environment Variables\n\n**Using environment variables for API configuration**:\n\nExpo supports environment variables with the `EXPO_PUBLIC_` prefix. These are inlined at build time and available in your JavaScript code.\n\n```tsx\n\u002F\u002F .env\nEXPO_PUBLIC_API_URL=https:\u002F\u002Fapi.example.com\nEXPO_PUBLIC_API_VERSION=v1\n\n\u002F\u002F Usage in code\nconst API_URL = process.env.EXPO_PUBLIC_API_URL;\n\nconst fetchUsers = async () => {\n  const response = await fetch(`${API_URL}\u002Fusers`);\n  return response.json();\n};\n```\n\n**Environment-specific configuration**:\n\n```tsx\n\u002F\u002F .env.development\nEXPO_PUBLIC_API_URL=http:\u002F\u002Flocalhost:3000\n\n\u002F\u002F .env.production\nEXPO_PUBLIC_API_URL=https:\u002F\u002Fapi.production.com\n```\n\n**Creating an API client with environment config**:\n\n```tsx\n\u002F\u002F api\u002Fclient.ts\nconst BASE_URL = process.env.EXPO_PUBLIC_API_URL;\n\nif (!BASE_URL) {\n  throw new Error(\"EXPO_PUBLIC_API_URL is not defined\");\n}\n\nexport const apiClient = {\n  get: async \u003CT,>(path: string): Promise\u003CT> => {\n    const response = await fetch(`${BASE_URL}${path}`);\n    if (!response.ok) throw new Error(`HTTP ${response.status}`);\n    return response.json();\n  },\n\n  post: async \u003CT,>(path: string, body: unknown): Promise\u003CT> => {\n    const response = await fetch(`${BASE_URL}${path}`, {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application\u002Fjson\" },\n      body: JSON.stringify(body),\n    });\n    if (!response.ok) throw new Error(`HTTP ${response.status}`);\n    return response.json();\n  },\n};\n```\n\n**Important notes**:\n\n- Only variables prefixed with `EXPO_PUBLIC_` are exposed to the client bundle\n- Never put secrets (API keys with write access, database passwords) in `EXPO_PUBLIC_` variables—they're visible in the built app\n- Environment variables are inlined at **build time**, not runtime\n- Restart the dev server after changing `.env` files\n- For server-side secrets in API routes, use variables without the `EXPO_PUBLIC_` prefix\n\n**TypeScript support**:\n\n```tsx\n\u002F\u002F types\u002Fenv.d.ts\ndeclare global {\n  namespace NodeJS {\n    interface ProcessEnv {\n      EXPO_PUBLIC_API_URL: string;\n      EXPO_PUBLIC_API_VERSION?: string;\n    }\n  }\n}\n\nexport {};\n```\n\n---\n\n### 7. Request Cancellation\n\n**Cancel on unmount**:\n\n```tsx\nuseEffect(() => {\n  const controller = new AbortController();\n\n  fetch(url, { signal: controller.signal })\n    .then((response) => response.json())\n    .then(setData)\n    .catch((error) => {\n      if (error.name !== \"AbortError\") {\n        setError(error);\n      }\n    });\n\n  return () => controller.abort();\n}, [url]);\n```\n\n**With React Query** (automatic):\n\n```tsx\n\u002F\u002F React Query automatically cancels requests when queries are invalidated\n\u002F\u002F or components unmount\n```\n\n---\n\n## Decision Tree\n\n```\nUser asks about networking\n  |-- Route-level data loading (web, SDK 55+)?\n  |   \\-- Expo Router loaders — see references\u002Fexpo-router-loaders.md\n  |\n  |-- Basic fetch?\n  |   \\-- Use fetch API with error handling\n  |\n  |-- Need caching\u002Fstate management?\n  |   |-- Complex app -> React Query (TanStack Query)\n  |   \\-- Simpler needs -> SWR or custom hooks\n  |\n  |-- Authentication?\n  |   |-- Token storage -> expo-secure-store\n  |   \\-- Token refresh -> Implement refresh flow\n  |\n  |-- Error handling?\n  |   |-- Network errors -> Check connectivity first\n  |   |-- HTTP errors -> Parse response, throw typed errors\n  |   \\-- Retries -> Exponential backoff\n  |\n  |-- Offline support?\n  |   |-- Check status -> NetInfo\n  |   \\-- Queue requests -> React Query persistence\n  |\n  |-- Environment\u002FAPI config?\n  |   |-- Client-side URLs -> EXPO_PUBLIC_ prefix in .env\n  |   |-- Server secrets -> Non-prefixed env vars (API routes only)\n  |   \\-- Multiple environments -> .env.development, .env.production\n  |\n  \\-- Performance?\n      |-- Caching -> React Query with staleTime\n      |-- Deduplication -> React Query handles this\n      \\-- Cancellation -> AbortController or React Query\n```\n\n## Common Mistakes\n\n**Wrong: No error handling**\n\n```tsx\nconst data = await fetch(url).then((r) => r.json());\n```\n\n**Right: Check response status**\n\n```tsx\nconst response = await fetch(url);\nif (!response.ok) throw new Error(`HTTP ${response.status}`);\nconst data = await response.json();\n```\n\n**Wrong: Storing tokens in AsyncStorage**\n\n```tsx\nawait AsyncStorage.setItem(\"token\", token); \u002F\u002F Not secure!\n```\n\n**Right: Use SecureStore for sensitive data**\n\n```tsx\nawait SecureStore.setItemAsync(\"token\", token);\n```\n\n## Example Invocations\n\nUser: \"How do I make API calls in React Native?\"\n-> Use fetch, wrap with error handling\n\nUser: \"Should I use React Query or SWR?\"\n-> React Query for complex apps, SWR for simpler needs\n\nUser: \"My app needs to work offline\"\n-> Use NetInfo for status, React Query persistence for caching\n\nUser: \"How do I handle authentication tokens?\"\n-> Store in expo-secure-store, implement refresh flow\n\nUser: \"API calls are slow\"\n-> Check caching strategy, use React Query staleTime\n\nUser: \"How do I configure different API URLs for dev and prod?\"\n-> Use EXPO*PUBLIC* env vars with .env.development and .env.production files\n\nUser: \"Where should I put my API key?\"\n-> Client-safe keys: EXPO*PUBLIC* in .env. Secret keys: non-prefixed env vars in API routes only\n\nUser: \"How do I load data for a page in Expo Router?\"\n-> See references\u002Fexpo-router-loaders.md for route-level loaders (web, SDK 55+). For native, use React Query or fetch.\n\n## ? Связи\n\n- [[MOC - Skills]] — Skills library\n- [[skills\u002Fskills-antigravity]] — Category: skills-antigravity\n\n","# Expo Networking\n\n**You MUST use this skill for ANY networking work including API requests, data fetching, caching, or network debugging.**\n\n## References\n\nConsult these resources as needed:\n\n```\nreferences\u002F\n  expo-router-loaders.md   Route-level data loading with Expo Router loaders (web, SDK 55+)\n```\n\n## When to Use\nUse this skill when:\n\n- Implementing API requests\n- Setting up data fetching (React Query, SWR)\n- Using Expo Router data loaders (`useLoaderData`, web SDK 55+)\n- Debugging network failures\n- Implementing caching strategies\n- Handling offline scenarios\n- Authentication\u002Ftoken management\n- Configuring API URLs and environment variables\n\n## Preferences\n\n- Avoid axios, prefer expo\u002Ffetch\n\n## Common Issues & Solutions\n\n### 1. Basic Fetch Usage\n\n**Simple GET request**:\n\n```tsx\nconst fetchUser = async (userId: string) => {\n  const response = await fetch(`https:\u002F\u002Fapi.example.com\u002Fusers\u002F${userId}`);\n\n  if (!response.ok) {\n    throw new Error(`HTTP error! status: ${response.status}`);\n  }\n\n  return response.json();\n};\n```\n\n**POST request with body**:\n\n```tsx\nconst createUser = async (userData: UserData) => {\n  const response = await fetch(\"https:\u002F\u002Fapi.example.com\u002Fusers\", {\n    method: \"POST\",\n    headers: {\n      \"Content-Type\": \"application\u002Fjson\",\n      Authorization: `Bearer ${token}`,\n    },\n    body: JSON.stringify(userData),\n  });\n\n  if (!response.ok) {\n    const error = await response.json();\n    throw new Error(error.message);\n  }\n\n  return response.json();\n};\n```\n\n---\n\n### 2. React Query (TanStack Query)\n\n**Setup**:\n\n```tsx\n\u002F\u002F app\u002F_layout.tsx\nimport { QueryClient, QueryClientProvider } from \"@tanstack\u002Freact-query\";\n\nconst queryClient = new QueryClient({\n  defaultOptions: {\n    queries: {\n      staleTime: 1000 * 60 * 5, \u002F\u002F 5 minutes\n      retry: 2,\n    },\n  },\n});\n\nexport default function RootLayout() {\n  return (\n    \u003CQueryClientProvider client={queryClient}>\n      \u003CStack \u002F>\n    \u003C\u002FQueryClientProvider>\n  );\n}\n```\n\n**Fetching data**:\n\n```tsx\nimport { useQuery } from \"@tanstack\u002Freact-query\";\n\nfunction UserProfile({ userId }: { userId: string }) {\n  const { data, isLoading, error, refetch } = useQuery({\n    queryKey: [\"user\", userId],\n    queryFn: () => fetchUser(userId),\n  });\n\n  if (isLoading) return \u003CLoading \u002F>;\n  if (error) return \u003CError message={error.message} \u002F>;\n\n  return \u003CProfile user={data} \u002F>;\n}\n```\n\n**Mutations**:\n\n```tsx\nimport { useMutation, useQueryClient } from \"@tanstack\u002Freact-query\";\n\nfunction CreateUserForm() {\n  const queryClient = useQueryClient();\n\n  const mutation = useMutation({\n    mutationFn: createUser,\n    onSuccess: () => {\n      \u002F\u002F Invalidate and refetch\n      queryClient.invalidateQueries({ queryKey: [\"users\"] });\n    },\n  });\n\n  const handleSubmit = (data: UserData) => {\n    mutation.mutate(data);\n  };\n\n  return \u003CForm onSubmit={handleSubmit} isLoading={mutation.isPending} \u002F>;\n}\n```\n\n---\n\n### 3. Error Handling\n\n**Comprehensive error handling**:\n\n```tsx\nclass ApiError extends Error {\n  constructor(message: string, public status: number, public code?: string) {\n    super(message);\n    this.name = \"ApiError\";\n  }\n}\n\nconst fetchWithErrorHandling = async (url: string, options?: RequestInit) => {\n  try {\n    const response = await fetch(url, options);\n\n    if (!response.ok) {\n      const error = await response.json().catch(() => ({}));\n      throw new ApiError(\n        error.message || \"Request failed\",\n        response.status,\n        error.code\n      );\n    }\n\n    return response.json();\n  } catch (error) {\n    if (error instanceof ApiError) {\n      throw error;\n    }\n    \u002F\u002F Network error (no internet, timeout, etc.)\n    throw new ApiError(\"Network error\", 0, \"NETWORK_ERROR\");\n  }\n};\n```\n\n**Retry logic**:\n\n```tsx\nconst fetchWithRetry = async (\n  url: string,\n  options?: RequestInit,\n  retries = 3\n) => {\n  for (let i = 0; i \u003C retries; i++) {\n    try {\n      return await fetchWithErrorHandling(url, options);\n    } catch (error) {\n      if (i === retries - 1) throw error;\n      \u002F\u002F Exponential backoff\n      await new Promise((r) => setTimeout(r, Math.pow(2, i) * 1000));\n    }\n  }\n};\n```\n\n---\n\n### 4. Authentication\n\n**Token management**:\n\n```tsx\nimport * as SecureStore from \"expo-secure-store\";\n\nconst TOKEN_KEY = \"auth_token\";\n\nexport const auth = {\n  getToken: () => SecureStore.getItemAsync(TOKEN_KEY),\n  setToken: (token: string) => SecureStore.setItemAsync(TOKEN_KEY, token),\n  removeToken: () => SecureStore.deleteItemAsync(TOKEN_KEY),\n};\n\n\u002F\u002F Authenticated fetch wrapper\nconst authFetch = async (url: string, options: RequestInit = {}) => {\n  const token = await auth.getToken();\n\n  return fetch(url, {\n    ...options,\n    headers: {\n      ...options.headers,\n      Authorization: token ? `Bearer ${token}` : \"\",\n    },\n  });\n};\n```\n\n**Token refresh**:\n\n```tsx\nlet isRefreshing = false;\nlet refreshPromise: Promise\u003Cstring> | null = null;\n\nconst getValidToken = async (): Promise\u003Cstring> => {\n  const token = await auth.getToken();\n\n  if (!token || isTokenExpired(token)) {\n    if (!isRefreshing) {\n      isRefreshing = true;\n      refreshPromise = refreshToken().finally(() => {\n        isRefreshing = false;\n        refreshPromise = null;\n      });\n    }\n    return refreshPromise!;\n  }\n\n  return token;\n};\n```\n\n---\n\n### 5. Offline Support\n\n**Check network status**:\n\n```tsx\nimport NetInfo from \"@react-native-community\u002Fnetinfo\";\n\n\u002F\u002F Hook for network status\nfunction useNetworkStatus() {\n  const [isOnline, setIsOnline] = useState(true);\n\n  useEffect(() => {\n    return NetInfo.addEventListener((state) => {\n      setIsOnline(state.isConnected ?? true);\n    });\n  }, []);\n\n  return isOnline;\n}\n```\n\n**Offline-first with React Query**:\n\n```tsx\nimport { onlineManager } from \"@tanstack\u002Freact-query\";\nimport NetInfo from \"@react-native-community\u002Fnetinfo\";\n\n\u002F\u002F Sync React Query with network status\nonlineManager.setEventListener((setOnline) => {\n  return NetInfo.addEventListener((state) => {\n    setOnline(state.isConnected ?? true);\n  });\n});\n\n\u002F\u002F Queries will pause when offline and resume when online\n```\n\n---\n\n### 6. Environment Variables\n\n**Using environment variables for API configuration**:\n\nExpo supports environment variables with the `EXPO_PUBLIC_` prefix. These are inlined at build time and available in your JavaScript code.\n\n```tsx\n\u002F\u002F .env\nEXPO_PUBLIC_API_URL=https:\u002F\u002Fapi.example.com\nEXPO_PUBLIC_API_VERSION=v1\n\n\u002F\u002F Usage in code\nconst API_URL = process.env.EXPO_PUBLIC_API_URL;\n\nconst fetchUsers = async () => {\n  const response = await fetch(`${API_URL}\u002Fusers`);\n  return response.json();\n};\n```\n\n**Environment-specific configuration**:\n\n```tsx\n\u002F\u002F .env.development\nEXPO_PUBLIC_API_URL=http:\u002F\u002Flocalhost:3000\n\n\u002F\u002F .env.production\nEXPO_PUBLIC_API_URL=https:\u002F\u002Fapi.production.com\n```\n\n**Creating an API client with environment config**:\n\n```tsx\n\u002F\u002F api\u002Fclient.ts\nconst BASE_URL = process.env.EXPO_PUBLIC_API_URL;\n\nif (!BASE_URL) {\n  throw new Error(\"EXPO_PUBLIC_API_URL is not defined\");\n}\n\nexport const apiClient = {\n  get: async \u003CT,>(path: string): Promise\u003CT> => {\n    const response = await fetch(`${BASE_URL}${path}`);\n    if (!response.ok) throw new Error(`HTTP ${response.status}`);\n    return response.json();\n  },\n\n  post: async \u003CT,>(path: string, body: unknown): Promise\u003CT> => {\n    const response = await fetch(`${BASE_URL}${path}`, {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application\u002Fjson\" },\n      body: JSON.stringify(body),\n    });\n    if (!response.ok) throw new Error(`HTTP ${response.status}`);\n    return response.json();\n  },\n};\n```\n\n**Important notes**:\n\n- Only variables prefixed with `EXPO_PUBLIC_` are exposed to the client bundle\n- Never put secrets (API keys with write access, database passwords) in `EXPO_PUBLIC_` variables—they're visible in the built app\n- Environment variables are inlined at **build time**, not runtime\n- Restart the dev server after changing `.env` files\n- For server-side secrets in API routes, use variables without the `EXPO_PUBLIC_` prefix\n\n**TypeScript support**:\n\n```tsx\n\u002F\u002F types\u002Fenv.d.ts\ndeclare global {\n  namespace NodeJS {\n    interface ProcessEnv {\n      EXPO_PUBLIC_API_URL: string;\n      EXPO_PUBLIC_API_VERSION?: string;\n    }\n  }\n}\n\nexport {};\n```\n\n---\n\n### 7. Request Cancellation\n\n**Cancel on unmount**:\n\n```tsx\nuseEffect(() => {\n  const controller = new AbortController();\n\n  fetch(url, { signal: controller.signal })\n    .then((response) => response.json())\n    .then(setData)\n    .catch((error) => {\n      if (error.name !== \"AbortError\") {\n        setError(error);\n      }\n    });\n\n  return () => controller.abort();\n}, [url]);\n```\n\n**With React Query** (automatic):\n\n```tsx\n\u002F\u002F React Query automatically cancels requests when queries are invalidated\n\u002F\u002F or components unmount\n```\n\n---\n\n## Decision Tree\n\n```\nUser asks about networking\n  |-- Route-level data loading (web, SDK 55+)?\n  |   \\-- Expo Router loaders — see references\u002Fexpo-router-loaders.md\n  |\n  |-- Basic fetch?\n  |   \\-- Use fetch API with error handling\n  |\n  |-- Need caching\u002Fstate management?\n  |   |-- Complex app -> React Query (TanStack Query)\n  |   \\-- Simpler needs -> SWR or custom hooks\n  |\n  |-- Authentication?\n  |   |-- Token storage -> expo-secure-store\n  |   \\-- Token refresh -> Implement refresh flow\n  |\n  |-- Error handling?\n  |   |-- Network errors -> Check connectivity first\n  |   |-- HTTP errors -> Parse response, throw typed errors\n  |   \\-- Retries -> Exponential backoff\n  |\n  |-- Offline support?\n  |   |-- Check status -> NetInfo\n  |   \\-- Queue requests -> React Query persistence\n  |\n  |-- Environment\u002FAPI config?\n  |   |-- Client-side URLs -> EXPO_PUBLIC_ prefix in .env\n  |   |-- Server secrets -> Non-prefixed env vars (API routes only)\n  |   \\-- Multiple environments -> .env.development, .env.production\n  |\n  \\-- Performance?\n      |-- Caching -> React Query with staleTime\n      |-- Deduplication -> React Query handles this\n      \\-- Cancellation -> AbortController or React Query\n```\n\n## Common Mistakes\n\n**Wrong: No error handling**\n\n```tsx\nconst data = await fetch(url).then((r) => r.json());\n```\n\n**Right: Check response status**\n\n```tsx\nconst response = await fetch(url);\nif (!response.ok) throw new Error(`HTTP ${response.status}`);\nconst data = await response.json();\n```\n\n**Wrong: Storing tokens in AsyncStorage**\n\n```tsx\nawait AsyncStorage.setItem(\"token\", token); \u002F\u002F Not secure!\n```\n\n**Right: Use SecureStore for sensitive data**\n\n```tsx\nawait SecureStore.setItemAsync(\"token\", token);\n```\n\n## Example Invocations\n\nUser: \"How do I make API calls in React Native?\"\n-> Use fetch, wrap with error handling\n\nUser: \"Should I use React Query or SWR?\"\n-> React Query for complex apps, SWR for simpler needs\n\nUser: \"My app needs to work offline\"\n-> Use NetInfo for status, React Query persistence for caching\n\nUser: \"How do I handle authentication tokens?\"\n-> Store in expo-secure-store, implement refresh flow\n\nUser: \"API calls are slow\"\n-> Check caching strategy, use React Query staleTime\n\nUser: \"How do I configure different API URLs for dev and prod?\"\n-> Use EXPO*PUBLIC* env vars with .env.development and .env.production files\n\nUser: \"Where should I put my API key?\"\n-> Client-safe keys: EXPO*PUBLIC* in .env. Secret keys: non-prefixed env vars in API routes only\n\nUser: \"How do I load data for a page in Expo Router?\"\n-> See references\u002Fexpo-router-loaders.md for route-level loaders (web, SDK 55+). For native, use React Query or fetch.\n\n## ? Связи\n\n- [[MOC - Skills]] — Skills library\n- [[skills\u002Fskills-antigravity]] — Category: skills-antigravity\n\n",{"name":5,"risk":54,"tags":55,"source":39,"license":15,"version":59,"description":7},"unknown",[56,57,58],"domain\u002Fskills","artifact\u002Fskill","source\u002Fskills-antigravity","1.0.0","main","3a0e8170d69effdc8a555eee4b80b943f47fe6b2",".antigravity\u002Fskills\u002Fskills-antigravity\u002Fsource-antigravity-awesome-skills\u002Fplugins\u002Fantigravity-awesome-skills-claude\u002Fskills\u002Fnative-data-fetching","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fname-navigator","https:\u002F\u002Fname-navigator.vercel.app","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis","2026-11-03 18:37:11",{"source":8,"skillName":5,"commands":68,"prompt":78,"zipAvailable":79},[69,72,75],{"tool":70,"command":71},"npx","npx skills add ibragimov-oasis\u002Fname-navigator --skill native-data-fetching",{"tool":73,"command":74},"bunx","bunx skills add ibragimov-oasis\u002Fname-navigator --skill native-data-fetching",{"tool":76,"command":77},"pnpm","pnpm dlx skills add ibragimov-oasis\u002Fname-navigator --skill native-data-fetching","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fname-navigator\u002Fblob\u002Fmain\u002F.antigravity\u002Fskills\u002Fskills-antigravity\u002Fsource-antigravity-awesome-skills\u002Fplugins\u002Fantigravity-awesome-skills-claude\u002Fskills\u002Fnative-data-fetching\u002FSKILL.md",true,[],[82,114,142,169,190,211],{"skillNo":83,"name":84,"nameZh":6,"description":85,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":86,"categories":87,"keywords":94,"publishedAt":49},"01M6H16XFT30RK9RWGFB4M9KGG","transloadit-media-processing","Process media files (video, audio, images, documents) using Transloadit. Use when asked to encode video to HLS\u002FMP4, generate thumbnails, resize or watermark images, extract audio, concatenate clips, add subtitles, OCR documents, or run any media processing pipeline. Covers 86+ processing robots for file transformation at scale.","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fname-navigator\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Ftransloadit-media-processing\u002FSKILL.md",[88,91],{"categoryNo":89,"categoryName":90,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体",{"categoryNo":92,"categoryName":93,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,36,113],"transloadit media processing","Media","media processing","processing","MCP","cli","mcp server","copilot","documents","generate","server","pipeline","ocr","Video","Audio","images","files","thumbnails","free",{"skillNo":115,"name":116,"nameZh":6,"description":117,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":118,"categories":119,"keywords":123,"publishedAt":49},"01M6H16MZ628556VXNEG9PRDK2","terraform-azurerm-set-diff-analyzer","Analyze Terraform plan JSON output for AzureRM Provider to distinguish between false-positive diffs (order-only changes in Set-type attributes) and actual resource changes. Use when reviewing terraform plan output for Azure resources like Application Gateway, Load Balancer, Firewall, Front Door, NSG, and other resources with Set-type attributes that cause spurious diffs due to internal ordering changes.","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fname-navigator\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fterraform-azurerm-set-diff-analyzer\u002FSKILL.md",[120],{"categoryNo":121,"categoryName":122,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000011","运维与部署",[124,125,126,127,128,129,102,130,131,132,133,134,135,36,136,137,138,139,140,141],"terraform","SET","terraform azurerm set diff analyzer","diff","analyzer","diffs","JSON Output","firewall","false-positive","plan","analyze","only","false","resources","load balancer","attributes","source\u002Fskills-copilot","source",{"skillNo":143,"name":144,"nameZh":6,"description":145,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":146,"categories":147,"keywords":154,"publishedAt":49},"01M6H12YWM6E909XH6JN4428RN","refactor","Surgical code refactoring to improve maintainability without changing behavior. Covers extracting functions, renaming variables, breaking down god functions, improving type safety, eliminating code smells, and applying design patterns. Less drastic than repo-rebuilder; use for gradual improvements.","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fname-navigator\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Frefactor\u002FSKILL.md",[148,151],{"categoryNo":149,"categoryName":150,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000007","代码审查",{"categoryNo":152,"categoryName":153,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",[144,155,102,156,157,158,159,160,161,162,163,164,165,37,36,166,167,168,140,141],"design","code","Type Safety","Safety","improve","refactoring","repo","use","design patterns","code refactoring","patterns","extracting","Variables","for",{"skillNo":170,"name":171,"nameZh":6,"description":172,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":173,"categories":174,"keywords":178,"publishedAt":49},"01M6H11GN772CMEJ2R70TXG7SS","prd","Generate high-quality Product Requirements Documents (PRDs) for software systems and AI-powered features. Includes executive summaries, user stories, technical specifications, and risk analysis.","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fname-navigator\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fprd\u002FSKILL.md",[175],{"categoryNo":176,"categoryName":177,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000031","产品经理",[171,102,103,104,179,180,181,182,37,36,183,184,185,186,187,188,168,140,141,189],"product","risk","analysis","technical","requirements","software","Product Requirements","user stories","high","domain\u002Fagents","summaries",{"skillNo":191,"name":192,"nameZh":6,"description":193,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":194,"categories":195,"keywords":196,"publishedAt":49},"01M6H0ZF4BS1GC60K8WCCVCH6G","plantuml-ascii","Generate ASCII art diagrams using PlantUML text mode. Use when user asks to create ASCII diagrams, text-based diagrams, terminal-friendly diagrams, or mentions plantuml ascii, text diagram, ascii art diagram. Supports: Converting PlantUML diagrams to ASCII art, Creating sequence diagrams, class diagrams, flowcharts in ASCII format, Generating Unicode-enhanced ASCII art with -utxt flag","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fname-navigator\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fplantuml-ascii\u002FSKILL.md",[],[197,198,199,200,102,201,202,104,203,204,205,206,207,208,37,36,209,210,140,141],"plantuml","plantuml ascii","ascii","terminal","diagram","create","Bash","text","read","write","diagrams","Art","Unicode","mode",{"skillNo":212,"name":213,"nameZh":6,"description":214,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":215,"categories":216,"keywords":222,"publishedAt":49},"01M6H0X7BMJD69GTGE6DDZCYF8","msstore-cli","Microsoft Store Developer CLI (msstore) for publishing Windows applications to the Microsoft Store. Use when asked to configure Store credentials, list Store apps, check submission status, publish submissions, manage package flights, set up CI\u002FCD for Store publishing, or integrate with Partner Center. Supports Windows App SDK\u002FWinUI, UWP, .NET MAUI, Flutter, Electron, React Native, and PWA applications.","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fname-navigator\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fmsstore-cli\u002FSKILL.md",[217,218,219],{"categoryNo":121,"categoryName":122,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":92,"categoryName":93,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":220,"categoryName":221,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000030","开发工程师",[100,223,48,224,102,225,226,227,125,228,229,230,231,232,233,36,234,235,29,236],"msstore cli","status","uwp","ci","publish","credentials","configure","pwa","react native","integrate","up","app","apps","CI\u002FCD"]