Tutorial Lengkap GraphQL dengan Apollo Server dan React Client

Setup Apollo Server

Install: npm install @apollo/server graphql. Definisikan type definitions (schema) dan resolvers. Jalankan server dan akses Apollo Sandbox di http://localhost:4000 untuk eksplorasi interaktif.

Mendefinisikan Schema

Schema adalah fondasi GraphQL: definisikan types, queries, mutations, dan subscriptions. Gunakan SDL (Schema Definition Language) yang readable dan self-documenting.

Resolvers

Resolver adalah fungsi yang mengambil data untuk setiap field. Resolver chain memungkinkan lazy loading – data hanya diambil jika di-request klien. Gunakan DataLoader untuk mengatasi N+1 problem.

Setup Apollo Client di React

Install @apollo/client graphql. Buat ApolloClient dengan URI endpoint, wrap app dengan ApolloProvider. Gunakan hooks: useQuery, useMutation, useSubscription.

Real-time dengan Subscriptions

GraphQL subscriptions menggunakan WebSocket. Setup WebSocketLink di client, definisikan Subscription type di server, dan implementasikan dengan PubSub. Ideal untuk notifikasi real-time dan live updates.

Optimistic UI

Apollo Client mendukung optimistic response – update UI sebelum server response tiba, lalu reconcile saat response datang. Ini memberikan UX yang terasa instant meski ada network latency.