Belajar React Native - Networking & Data Fetching

#Pendahuluan

Hampir setiap aplikasi mobile membutuhkan data dari server: daftar produk, profil pengguna, atau umpan berita. Di episode 6 kalian sudah bisa berpindah antar layar; sekarang saatnya menghubungkan layar itu dengan dunia luar lewat API.

Episode 7 membahas pola data fetching yang benar di React Native: fetch bawaan dan Axios untuk request HTTP dengan error handling, base URL per environment, lalu TanStack Query untuk caching dan optimistic updates, plus Zustand sebagai state management global. Pola-pola ini akan kalian pakai terus di episode 9, 13, dan 15.

#Fetch dan Axios untuk Request API

#Fetch Bawaan dengan async/await

React Native menyediakan fetch yang sama dengan web. Untuk panggilan sederhana, tulis dengan async/await dan selalu tangani error:

Fetch dengan error handling

async function ambilPostingan() {
  try {
    const res = await fetch(`${API_URL}/posts`);
    if (!res.ok) {
      throw new Error(`HTTP ${res.status}`);
    }
    return await res.json();
  } catch (error) {
    console.error("Gagal mengambil data", error);
    return [];
  }
}

Perhatikan dua hal penting: cek res.ok sebelum membaca body, dan bungkus semuanya dalam try/catch. Jaringan di mobile sering gagal — sinyal lemah, timeout, dan koneksi yang hilang saat aplikasi dipindah ke background.

#Axios untuk Produksi

Untuk kebutuhan produksi seperti interceptor, timeout, dan pembatalan request, Axios lebih nyaman. Install dulu:

npm install axios

Buat satu instance yang dipakai di seluruh aplikasi:

Instance Axios dengan interceptor

import axios from "axios";
 
const api = axios.create({
  baseURL: API_URL,
  timeout: 15000,
  headers: { "Content-Type": "application/json" },
});
 
api.interceptors.request.use((config) => {
  const token = getToken();
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});

Dengan axios.create({ baseURL, timeout }), semua request memakai base URL dan timeout yang sama. Interceptor menambahkan header Authorization secara otomatis — cukup satu tempat untuk semua request.

#Base URL per Environment

#Konfigurasi dengan .env

URL server tidak boleh hardcoded di dalam kode. Pakai library react-native-config agar nilainya dibaca dari file .env:

npm install react-native-config

File .env diletakkan di root project, berisi pasangan key-value seperti API_URL=https://api.example.com dan ENV=development.

#Membaca Konfigurasi di Kode

react-native-config memetakan nilai .env ke object global saat build:

Membaca nilai environment

import Config from "react-native-config";
 
export const API_URL = Config.API_URL;
export const IS_PRODUCTION = Config.ENV === "production";

Dengan pola ini kalian bisa punya .env.staging dan .env.production, lalu memilih file mana yang dipakai saat build. Ingat: secret di .env jangan pernah di-commit — episode 13 akan membahas keamanannya lebih dalam.

#TanStack Query untuk Caching dan Sinkronisasi

#Query Dasar

Fetch manual mengharuskan kalian menulis loading, error, dan caching sendiri. TanStack Query mengotomasi semua itu:

npm install @tanstack/react-query

Query hook untuk posts

import { useQuery } from "@tanstack/react-query";
 
function usePosts() {
  return useQuery({
    queryKey: ["posts"],
    queryFn: ambilPostingan,
    staleTime: 5 * 60 * 1000,
  });
}

queryKey: ["posts"] mengidentifikasi data di cache, dan staleTime mengontrol berapa lama data dianggap segar. Komponen tinggal membaca isLoading, isError, dan data dari hasil hook.

#Optimistic Updates

#Mutation dengan Rollback

Untuk aksi seperti menambah postingan, perbarui UI dulu lalu sinkronkan ke server. Jika gagal, kembalikan state lama:

Optimistic update dengan rollback

const queryClient = useQueryClient();
 
const mutation = useMutation({
  mutationFn: simpanPostingan,
  onMutate: async (baru) => {
    await queryClient.cancelQueries({ queryKey: ["posts"] });
    const sebelumnya = queryClient.getQueryData(["posts"]);
    queryClient.setQueryData(["posts"], (lama) => [baru, ...lama]);
    return { sebelumnya };
  },
  onError: (_err, _baru, konteks) => {
    queryClient.setQueryData(["posts"], konteks.sebelumnya);
  },
});

Pola onMutate menulis data baru ke cache sebelum server merespons, sehingga UI terasa instan. onError memulihkan data lama dari konteks yang dikembalikan onMutate.

#State Management dengan Zustand

#Store Global yang Ringan

Untuk data yang dipakai lintas layar seperti token dan profil, Zustand menyediakan store global dengan API yang sangat kecil:

npm install zustand

Auth store dengan Zustand

import { create } from "zustand";
 
export const useAuthStore = create((set) => ({
  token: null,
  user: null,
  setLogin: (token, user) => set({ token, user }),
  logout: () => set({ token: null, user: null }),
}));

Komponen memakai hook useAuthStore langsung, misalnya useAuthStore((state) => state.token) untuk membaca token. Memilih hanya field yang dibutuhkan membuat komponen hanya re-render saat token berubah.

Redux tetap relevan untuk aplikasi besar dengan banyak developer, tapi untuk mayoritas kasus Zustand jauh lebih ringan.

#Penutup

Episode 7 menghubungkan aplikasi dengan server: fetch dan Axios dengan error handling yang benar, base URL per environment via react-native-config, TanStack Query untuk caching dan optimistic updates, serta Zustand untuk state global yang ringan.

Inti yang harus dibawa pulang:

• fetch dan Axios sama-sama valid; Axios unggul untuk interceptor dan timeout.
• Selalu cek res.ok dan tangani error jaringan di mobile.
• Base URL disimpan di .env per environment, bukan hardcoded.
• TanStack Query mengelola loading, error, dan caching secara otomatis.
• Optimistic update menulis cache dulu dan rollback lewat onError.
• Zustand untuk state global; data server tetap milik TanStack Query.

Di episode 8 selanjutnya kita akan membahas list, scroll, dan performa dasar: FlatList dan SectionList dengan keyExtractor dan getItemLayout, windowing, onEndReached untuk infinite scroll, serta optimasi render dengan memo dan key yang stabil.