API Integration di React Native

Mengambil data dari API di React Native sangat mirip dengan web. fetch tersedia built-in, dan library populer seperti Axios dan TanStack Query bekerja tanpa modifikasi.

Fetch API (Built-in)

import { useEffect, useState } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://api.example.com/users')
      .then(res => res.json())
      .then(data => {
        setUsers(data);
        setLoading(false);
      })
      .catch(err => {
        console.error(err);
        setLoading(false);
      });
  }, []);

  if (loading) return <ActivityIndicator size="large" />;

  return (
    <FlatList
      data={users}
      keyExtractor={(u) => u.id.toString()}
      renderItem={({ item }) => <Text>{item.name}</Text>}
    />
  );
}

TanStack Query (Recommended)

import { useQuery, useMutation, QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

// Wrap app
<QueryClientProvider client={queryClient}>
  <App />
</QueryClientProvider>

// Fetching
function UserList() {
  const { data, isLoading, error, refetch } = useQuery({
    queryKey: ['users'],
    queryFn: () => fetch('/api/users').then(r => r.json()),
    staleTime: 5 * 60 * 1000, // cache 5 menit
  });

  if (isLoading) return <ActivityIndicator />;
  if (error) return <Text>Error: {error.message}</Text>;

  return (
    <FlatList
      data={data}
      renderItem={({ item }) => <Text>{item.name}</Text>}
      onRefresh={refetch}
      refreshing={isLoading}
    />
  );
}

Mutation (POST/PUT/DELETE)

function CreatePost() {
  const mutation = useMutation({
    mutationFn: (newPost) =>
      fetch('/api/posts', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(newPost),
      }).then(r => r.json()),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['posts'] });
    },
  });

  return (
    <Pressable onPress={() => mutation.mutate({ title: 'New Post' })}>
      <Text>{mutation.isPending ? 'Saving...' : 'Create Post'}</Text>
    </Pressable>
  );
}

Mobile-Specific Considerations

• Pull-to-refresh — FlatList punya prop onRefresh built-in
• Offline handling — TanStack Query bisa pause queries saat offline
• Network detection — @react-native-community/netinfo untuk cek koneksi
• Token storage — Simpan auth token di SecureStore, bukan AsyncStorage
• Base URL — Jangan pakai localhost dari device fisik, pakai IP LAN atau tunneling