Belajar GraphQL - URQL, Relay, dan React Query

#Pendahuluan

Apollo Client bukan satu-satunya pilihan. Episode 26 membahas tiga alternatif populer — URQL, Relay, dan React Query — agar kalian bisa memilih client yang tepat untuk kebutuhan masing-masing project.

Kita akan membedah filosofi dan setup URQL dengan sistem exchanges-nya, pendekatan compiler dan fragment colocation Relay, kombinasi React Query dengan graphql-request, lalu menutup dengan perbandingan menyeluruh.

#URQL

#Filosofi dan Setup

URQL dibangun di atas filosofi "sekecil mungkin tapi bisa dikembangkan". Bundle size-nya kecil dan hampir semua perilaku bisa dimodifikasi lewat exchanges — middleware terstruktur yang memproses setiap operasi. Install dengan npm install urql graphql:

Setup URQL client

import { Client, cacheExchange, fetchExchange, Provider } from "urql";
 
const client = new Client({
  url: "http://localhost:4000",
  exchanges: [cacheExchange, fetchExchange],
});
 
function App() {
  return <Provider value={client}>{/* komponen */}</Provider>;
}

#Exchanges dan Hook

Setiap exchange menangani satu tanggung jawab: cacheExchange untuk cache, fetchExchange untuk jaringan, dedupExchange untuk menghapus duplikasi. Kalian bisa menyusun urutan sendiri, bahkan menulis exchange kustom:

Query dengan hook URQL

import { useQuery, gql } from "urql";
 
const GET_USER = gql`
  query GetUser($id: ID!) {
    user(id: $id) { id username }
  }
`;
 
function Profile({ id }) {
  const [result] = useQuery({ query: GET_USER, variables: { id } });
  if (result.fetching) return <p>Memuat...</p>;
  return <p>{result.data?.user.username}</p>;
}

URQL menawarkan dua cache: document cache (sederhana, cocok untuk UI kecil) dan normalized cache (mirip Apollo, dengan type policies). Pilih sesuai kompleksitas data kalian.

#Relay

#Compiler dan Fragment Colocation

Relay adalah client paling disiplin. Setiap komponen mendeklarasikan fragment-nya sendiri di samping data yang dipakai — ini disebut fragment colocation — lalu Relay compiler mengubah query menjadi artefak yang dioptimasi:

npm install relay-runtime react-relay
npm install -D relay-compiler

fragment UserCard_user on User {
  id
  username
  avatar
}

Komponen dengan fragment

import { graphql, useFragment } from "react-relay";
 
function UserCard({ userRef }) {
  const user = useFragment(
    graphql`
      fragment UserCard_user on User {
        id
        username
      }
    `,
    userRef
  );
  return <div>{user.username}</div>;
}

#Kapan Memakai Relay

Relay unggul untuk aplikasi besar dengan data sangat terhubung — feed kompleks, React Native berskala besar — karena compiler menjamin query selalu konsisten dan pagination dengan Relay spec (episode 12) sangat matang. Trade-off-nya: learning curve tinggi dan kerja sama dengan server (harus memakai Relay spec) membuat Relay kurang fleksibel untuk API generik.

#React Query + GraphQL

#graphql-request dan Custom Hooks

Pendekatan minimalis: pakai React Query untuk state server dan graphql-request sebagai client GraphQL tipis:

npm install @tanstack/react-query graphql-request

Custom hook dengan React Query

import { useQuery } from "@tanstack/react-query";
import { GraphQLClient, gql } from "graphql-request";
 
const client = new GraphQLClient("http://localhost:4000");
 
function useUser(id) {
  return useQuery({
    queryKey: ["user", id],
    queryFn: () =>
      client.request(
        gql`
          query GetUser($id: ID!) {
            user(id: $id) { id username }
          }
        `,
        { id }
      ),
  });
}

React Query menangani caching, retry, dan stale time dengan cara yang agnostik transport — tidak terikat ekosistem GraphQL. Kelebihannya: fleksibel, mudah dipakai juga untuk REST. Kekurangannya: tanpa normalisasi cache, data duplikat antar query tidak otomatis disinkronkan.

#Perbandingan dan Panduan Memilih

#Apollo vs URQL vs Relay

#Rekomendasi Penggunaan

• Apollo Client: default terbaik untuk sebagian besar aplikasi — ekosistem lengkap, dokumentasi luas, integrasi mulus dengan tooling Apollo.
• URQL: untuk aplikasi yang membutuhkan bundle kecil atau kontrol penuh atas perilaku lewat exchanges.
• Relay: untuk aplikasi besar dengan data sangat terhubung dan tim yang bersedia mengikuti disiplin compiler-nya.
• React Query + graphql-request: untuk project yang memakai GraphQL sekaligus REST, atau tim yang sudah familiar React Query.

Tidak ada pilihan yang salah mutlak — yang penting sesuaikan dengan ukuran tim, kompleksitas data, dan kebutuhan bundle size.

#Penutup

Inti yang harus dibawa pulang:

• URQL memakai exchanges yang bisa disusun dan ditulis kustom.
• Relay memakai compiler dan fragment colocation untuk query yang dijamin konsisten.
• React Query plus graphql-request adalah kombinasi ringan yang fleksibel lintas transport.
• Apollo cocok untuk sebagian besar aplikasi; URQL untuk bundle kecil; Relay untuk aplikasi besar terhubung.
• Pilihan client memengaruhi bundle size, learning curve, dan cara cache bekerja.

Di episode 27 selanjutnya kalian akan mempelajari integrasi GraphQL dengan Next.js — API routes untuk Apollo Server, SSR dengan getServerSideProps dan hydration, SSG dengan getStaticProps dan ISR, App Router dengan Server Components, autentikasi dengan cookies, hingga deployment ke Vercel. Full-stack GraphQL dengan Next.js akan kalian kuasai!