Cache Apollo: Normalisasi dan Pembaruan

InMemoryCache menyimpan setiap objek berdasarkan kunci cache yang tersusun dari __typename dan id: User:1, Post:42. Saat kueri mengembalikan User dengan id "1", objek tersebut disimpan satu kali di bawah kunci ini, terlepas dari berapa banyak kueri berbeda yang menyertakannya.

Kueri berikutnya yang mengambil User:1 akan membaca satu entri cache tersebut, sehingga semua komponen melihat data yang sama.

Saat mutasi mengembalikan objek User:1 yang telah diperbarui, Apollo menulisnya ke entri cache User:1. Setiap kueri aktif yang menyertakan User:1 akan otomatis menampilkan bidang yang diperbarui di UI tanpa kode tambahan.

Propagasi otomatis ini merupakan keunggulan utama cache ternormalisasi dibandingkan cache dokumen (berbasis kueri).

Baca hasil kueri yang saat ini tersimpan dalam cache: cache.readQuery({ query: GET_USERS }) mengembalikan objek data seolah-olah useQuery telah mengembalikannya. Mengembalikan null jika kueri tidak ada dalam cache.

Gunakan readQuery di dalam fungsi pembaruan mutasi untuk membaca daftar terkini sebelum mengubahnya.

cache.writeQuery({ query: GET_USERS, data: { users: updatedUsers } }) menulis langsung ke cache, sehingga memicu render ulang pada semua komponen yang membaca GET_USERS. Tidak ada permintaan jaringan yang dibuat.

Gabungkan readQuery dan writeQuery untuk menerapkan pembaruan cache tanpa mutasi: baca, buat array baru, lalu tulis kembali.

cache.modify({ id: cache.identify(user), fields: { name: () => 'New Name' } }) secara langsung mengubah bidang entitas tertentu yang tersimpan dalam cache. Anda tidak perlu membaca kueri terlebih dahulu jika sudah mengetahui ID cache entitas tersebut.

Objek fields memetakan nama bidang ke fungsi pengubah yang menerima nilai saat ini dan mengembalikan nilai baru.

Teruskan fungsi update ke useMutation: useMutation(ADD_POST, { update(cache, { data: { addPost } }) { cache.modify({ id: cache.identify(user), fields: { posts: existingPosts => [...existingPosts, addPost] } }); } }).

Ini menambahkan postingan baru ke array postingan pengguna yang tersimpan dalam cache, sehingga memperbarui semua komponen yang menampilkan daftar postingan pengguna.

cache.evict({ id: 'User:1' }) menghapus entri User:1 dari cache. Kueri aktif apa pun yang menyertakan User:1 akan dirender ulang tanpa entitas tersebut dalam hasilnya.

Setelah mengeluarkan entri, panggil cache.gc() untuk menghapus objek yang kini tidak lagi dapat dijangkau dari kueri akar. Ini mencegah kebocoran memori dalam aplikasi yang berjalan lama.

cache.gc() menelusuri graf cache mulai dari semua kueri aktif dan menghapus entitas yang tidak lagi dapat dijangkau. Fungsi ini aman dipanggil secara berkala atau setelah mutasi berkelompok yang menghapus banyak entitas.

Entitas yang dirujuk oleh hook useQuery aktif tidak pernah dikumpulkan sampahnya; hanya entitas yatim yang tidak lagi menjadi bagian dari hasil kueri mana pun yang akan dihapus.

Jika Anda mengkueri satu entitas (GET_USER berdasarkan id) yang sudah tersimpan sebagai bagian dari kueri daftar, Apollo dapat membacanya dari cache tanpa perjalanan bolak-balik jaringan menggunakan kebijakan bidang: keyArgs dan fungsi read dalam kebijakan tipe.

Fungsi read mengembalikan referensi cache: return toReference({ __typename: 'User', id: args.id }), yang memberi tahu Apollo untuk membaca dari entri cache User:id yang sudah ada.

Jika entitas Anda menggunakan bidang selain id sebagai kunci uniknya, misalnya slug atau uuid, konfigurasikan bidang tersebut dalam kebijakan tipe: new InMemoryCache({ typePolicies: { Post: { keyFields: ['slug'] } } }).

Apollo kemudian menggunakan Post:my-post-slug sebagai kunci cache, bukan mengharuskan adanya bidang id, sehingga normalisasi tetap berjalan untuk skema nonstandar.

refetchQueries: [{ query: GET_USERS }] dalam opsi useMutation memicu pengambilan ulang melalui jaringan setelah mutasi selesai. Cara ini lebih sederhana, tetapi selalu membuat permintaan jaringan.

Fungsi pembaruan mengubah cache secara lokal dan menghindari perjalanan bolak-balik jaringan. Gunakan refetchQueries jika logika pembaruan cache terlalu rumit untuk ditulis atau jika bidang yang dihitung server membuat pembaruan cache lokal tidak dapat diandalkan.

Apa format kunci cache bawaan yang digunakan InMemoryCache untuk menyimpan entitas?

InMemoryCache menormalisasi entitas berdasarkan __typename+id, sehingga memungkinkan pembaruan otomatis lintas kueri. Baca dan tulis cache dengan cache.readQuery, cache.writeQuery, dan cache.modify. Hapus entitas dengan cache.evict, lalu cache.gc. Konfigurasikan bidang kunci khusus melalui typePolicies untuk kunci utama yang bukan id.

Gunakan fungsi pembaruan mutasi agar cache lokal lebih efisien; gunakan refetchQueries jika bidang yang dihitung server membuat pembaruan lokal tidak dapat diandalkan.