Belajar GraphQL - React Native & Mobile Integration

#Pendahuluan

Mobile adalah alasan utama GraphQL diciptakan — Facebook membangunnya demi aplikasi iOS yang hemat bandwidth. Episode 28 membawa GraphQL ke dunia mobile dengan React Native dan Flutter.

Kita akan membangun Apollo Client di React Native, mempersist cache ke AsyncStorage, merancang arsitektur offline-first dengan antrean mutation, mengoptimalkan performa untuk jaringan mobile, dan menutup dengan integrasi Flutter.

#React Native Setup

#Apollo Client dalam React Native

Apollo Client berjalan di React Native hampir sama dengan di web. Bedanya, pengaturan jaringan dan penyimpanan disesuaikan platform. Install dengan npm install @apollo/client graphql @react-native-async-storage/async-storage:

Apollo Client dengan persistensi

import { ApolloClient, InMemoryCache, createHttpLink } from "@apollo/client";
import { AsyncStorageWrapper, persistCache } from "apollo3-cache-persist";
import AsyncStorage from "@react-native-async-storage/async-storage";
 
const cache = new InMemoryCache();
 
persistCache({
  cache,
  storage: new AsyncStorageWrapper(AsyncStorage),
});
 
export const client = new ApolloClient({
  link: createHttpLink({ uri: "https://api.kalian.com/graphql" }),
  cache,
});

AsyncStorage mempersist cache ke penyimpanan lokal perangkat. Akibatnya: data yang pernah dimuat tetap tersedia saat aplikasi dibuka kembali, dan pengguna tidak perlu menunggu network untuk melihat data yang sudah pernah dimuat.

#Network Configuration

Gunakan URL API yang bisa diakses dari perangkat — localhost di emulator tidak menunjuk ke mesin pengembang. Untuk development, perhatikan konfigurasi Android emulator dan iOS simulator. Hindari menyimpan token di AsyncStorage tanpa enkripsi; gunakan secure storage seperti react-native-keychain untuk token refresh.

#Offline-First Architecture

#Antrean Mutation Offline

Arsitektur offline-first berarti aplikasi tetap berfungsi tanpa koneksi. Konsep intinya: mutation yang gagal karena offline dimasukkan ke antrean, dan diproses saat koneksi kembali:

Antrean mutation offline

import { from, Observable } from "rxjs";
 
function createOfflineQueueLink() {
  const queue = [];
  return from(new Observable((observer) => {
    if (navigator.onLine) {
      return forward(operation).subscribe(observer);
    }
    queue.push(operation);
    observer.complete();
  }));
}

Setelah koneksi pulih, jalankan ulang seluruh antrean secara berurutan (mutation dieksekusi serial, episode 5). Tambahkan idempotency key pada mutation agar operasi yang dikirim ulang tidak menimbulkan data ganda.

#Optimistic UI dan Sync

Optimistic UI menjadi lebih penting di mobile: saat offline, tampilkan perubahan segera berdasarkan optimisticResponse, lalu sinkronkan saat response asli tiba. Untuk conflict resolution saat dua perangkat mengubah data yang sama, terapkan strategi seperti last-write-wins atau versi per field — detailnya dibahas di episode 38.

#Performance Optimization

#Query Batching dan Bundle Size

Jaringan mobile mahal dan tidak stabil. Optimasi yang wajib:

Query batching: gabungkan beberapa operasi dalam satu request HTTP untuk mengurangi round-trip.
APQ: pakai Automatic Persisted Queries (episode 19) agar payload mengecil di jaringan lambat.
Fragment dan caching: kurangi pengambilan ulang dengan fragment yang memanfaatkan cache (episode 4).

Reduce bundle dengan import selektif

import { ApolloClient, InMemoryCache } from "@apollo/client";

Hindari meng-import seluruh library; gunakan import selektif dan code splitting agar bundle React Native tetap kecil. Untuk gambar, sajikan lewat CDN dengan ukuran yang sesuai perangkat.

#Network-Aware Queries

Sesuaikan perilaku dengan kondisi jaringan: kurangi polling saat aplikasi di background, naikkan ukuran cache saat di Wi-Fi, dan tampilkan data cache dulu (cache-first) di jaringan lambat. Deteksi koneksi dengan @react-native-community/netinfo dan ubah fetchPolicy secara dinamis.

#Flutter Integration

#graphql_flutter

Untuk Flutter, package resmi dari komunitas adalah graphql_flutter:

pubspec.yaml

dependencies:
  graphql_flutter: ^5.1.0

Setup graphql_flutter

import 'package:graphql_flutter/graphql_flutter.dart';
 
final client = GraphQLClient(
  link: HttpLink('https://api.kalian.com/graphql'),
  cache: GraphQLCache(store: HiveStore()),
);

Query dan mutation dilakukan lewat widget atau ekstensi:

Query di Flutter

Query(
  options: QueryOptions(
    document: gql('''
      query GetUser(\$id: ID!) {
        user(id: \$id) { id username }
      }
    '''),
    variables: {'id': userId},
  ),
  builder: (result, {fetchMore, refetch}) {
    if (result.isLoading) return Text('Memuat...');
    return Text(result.data!['user']['username']);
  },
)

graphql_flutter juga mendukung subscriptions dan cache persistence dengan Hive — cukup untuk membangun aplikasi Flutter full-stack GraphQL dengan pola yang sama seperti React Native.

#Penutup

Inti yang harus dibawa pulang:

Apollo Client di React Native memakai AsyncStorage untuk persistensi cache.
Arsitektur offline-first mengantre mutation saat offline dan memprosesnya saat online.
Optimistic UI dan idempotency key menjaga sinkronisasi di jaringan tidak stabil.
Batching, APQ, dan code splitting menghemat bandwidth dan bundle mobile.
graphql_flutter membawa GraphQL lengkap ke Flutter dengan cache Hive.

Di episode 29 selanjutnya kalian akan mempelajari ekosistem tooling GraphQL — tools visualisasi dan desain schema, alat testing API seperti Apollo Studio Explorer dan Insomnia, manajemen schema dengan GraphQL Inspector, ekstensi IDE, CLI tools, hingga mock servers. Workflow pengembangan GraphQL kalian akan jauh lebih produktif!