Menyiapkan Apollo Client di React

Instal @apollo/client dan graphql. Paket graphql adalah dependensi rekan yang diperlukan Apollo Client untuk mengurai dokumen kueri dengan tag templat gql.

Untuk proyek TypeScript, kedua paket menyediakan definisi tipenya sendiri, jadi paket @types tidak diperlukan.

Buat instans ApolloClient dengan cache dan tautan. Penyiapan paling sederhana: new ApolloClient({ cache: new InMemoryCache(), uri: '/graphql' }). Pintasan uri membuat HttpLink secara internal.

Untuk kontrol lebih besar, susun rantai tautan secara manual dan teruskan ke opsi link, bukan uri.

Bungkus aplikasi React Anda dengan ApolloProvider menggunakan prop client: ApolloProvider client={client}. Ini membuat instans Apollo Client tersedia bagi semua komponen turunan melalui konteks React.

Setiap pemanggilan useQuery dan useMutation dalam hierarki komponen otomatis menggunakan klien ini tanpa perlu meneruskan prop dari komponen ke komponen.

InMemoryCache adalah cache bawaan Apollo Client. Cache ini menormalisasi data yang diambil berdasarkan tipe dan ID, lalu menyimpan setiap entitas di bawah kunci cache unik (misalnya, User:1). Saat kueri apa pun mengambil User:1, semua pembacaan berikutnya terhadap entitas tersebut menerima data yang diperbarui.

Normalisasi ini berarti memperbarui pengguna dalam satu mutasi secara otomatis memperbarui setiap hasil kueri yang menyertakan pengguna tersebut, tanpa kode tambahan.

HttpLink menangani transportasi HTTP dari Apollo Client ke server GraphQL Anda. Konfigurasikan dengan uri dan, secara opsional, fetch, headers, serta credentials.

Untuk kasus penggunaan tingkat lanjut, tautan terpisah merutekan operasi yang berbeda ke titik akhir yang berbeda: langganan melalui WebSocket (WebSocketLink), sedangkan kueri dan mutasi melalui HTTP (HttpLink).

Impor setContext dari @apollo/client/link/context. Buat tautan autentikasi: const authLink = setContext((_, { headers }) => ({ headers: { ...headers, authorization: 'Bearer ' + getToken() } })). Rangkai sebelum HttpLink: authLink.concat(httpLink).

Tautan setContext dijalankan sebelum setiap permintaan, lalu menambahkan header autentikasi secara dinamis ke setiap operasi.

Komposisikan tautan menggunakan ApolloLink.from([authLink, errorLink, httpLink]) atau authLink.concat(httpLink). Tautan adalah perangkat perantara: setiap tautan memproses operasi dan meneruskannya ke next(). Tautan terakhir mengirimkan permintaan HTTP yang sebenarnya.

Rantai umum: tautan autentikasi (menambahkan header) + tautan kesalahan (menangani kesalahan) + tautan HTTP (mengirimkan permintaan).

Impor onError dari @apollo/client/link/error. Tautan kesalahan mencegat kesalahan GraphQL dan kesalahan jaringan secara global. Gunakan tautan ini untuk mengarahkan pengguna ke halaman masuk saat terjadi kesalahan UNAUTHENTICATED atau menampilkan notifikasi kesalahan global saat terjadi kegagalan jaringan.

Tautan kesalahan harus ditempatkan sebelum tautan HTTP dalam rantai, tetapi dapat memanggil forward(operation) untuk mencoba kembali permintaan.

cache-first (bawaan): segera kembalikan data yang tersimpan di cache; ambil ulang di latar belakang jika sudah usang. network-only: selalu ambil dari server, lalu perbarui cache. cache-and-network: segera kembalikan cache AND ambil data, lalu perbarui antarmuka saat respons tiba. cache-only: hanya baca dari cache, dan tampilkan kesalahan jika data tidak tersimpan di cache. no-cache: selalu ambil data, jangan pernah menulis ke cache.

Pilih berdasarkan kebutuhan kesegaran data: dasbor sering menggunakan cache-and-network; formulir profil pengguna menggunakan network-only.

Tetapkan fetchPolicy bawaan di defaultOptions InMemoryCache: new ApolloClient({ defaultOptions: { watchQuery: { fetchPolicy: 'cache-and-network' } } }). Pemanggilan useQuery individual dapat menimpa pengaturan ini untuk setiap kueri.

Menetapkan bawaan global yang masuk akal mengurangi kode berulang karena fetchPolicy tidak perlu ditentukan pada setiap pemanggilan hook.

Ekstensi peramban Apollo Client DevTools menambahkan panel Apollo ke Chrome DevTools. Ekstensi ini menampilkan semua kueri yang tersimpan di cache beserta datanya saat ini, memungkinkan Anda menjelajahi cache ternormalisasi, dan memungkinkan kueri dijalankan ulang dari panel DevTools.

Pasang ekstensi ini dari Chrome Web Store dan inisialisasi klien dengan devtools: { enabled: true } (bawaan dalam mode pengembangan).

Dalam rantai tautan Apollo Client, di mana errorLink harus ditempatkan relatif terhadap httpLink?

Instal @apollo/client dan graphql, buat ApolloClient dengan InMemoryCache dan rantai tautan, lalu bungkus aplikasi dalam ApolloProvider. Rantai tautan menyusun authLink (menambahkan token), errorLink (penanganan kesalahan global), dan httpLink (transportasi HTTP). Kebijakan pengambilan mengatur prioritas cache dibandingkan jaringan; InMemoryCache menormalisasi entitas berdasarkan tipe+id.

Ekstensi peramban Apollo DevTools memudahkan pemeriksaan cache dan penelusuran kesalahan.