hjemmesidekongen/ai/expo-data-fetching

Expo Data Fetching

React Native has fetch built in — but raw fetch in useEffect creates unreliable, verbose patterns. React Query is the standard for server state in Expo apps.

React Query Setup

Wrap the root layout in QueryClientProvider. Set staleTime, retry, and refetchOnWindowFocus: false in defaults — mobile apps don't have browser windows, so the default focus refetch fires unexpectedly without this.

Query and Mutation

const { data, isLoading, error } = useQuery({
  queryKey: queryKeys.users.detail(userId),
  queryFn: () => fetchUser(userId),
  enabled: !!userId,
});
const mutation = useMutation({
  mutationFn: updateUser,
  onSuccess: (user) =>
    queryClient.invalidateQueries({ queryKey: queryKeys.users.all }),
});

Key Rules

• Use React Query for all remote server state. Local UI state stays in useState.
• Define query keys as typed constants — never inline strings across files.
• Always handle isLoading and error before accessing data.
• Set staleTime in defaults to reduce unnecessary refetches on screen focus.
• For offline-first, persist the query cache with MMKV or AsyncStorage.

See references/process.md for SWR patterns, offline strategies (AsyncStorage, MMKV, WatermelonDB), optimistic updates, infinite queries, cache persistence, error handling, type-safe fetching, and anti-patterns.