Hook useQuery dan useMutation

Tag templat gql dari @apollo/client mengurai string kueri GraphQL menjadi DocumentNode saat modul dimuat. Definisikan kueri di luar komponen: const GET_USERS = gql`query GetUsers { users { id name email } }`.

Perhatikan: dalam kode produksi, gunakan string bertanda kutip tunggal yang dibungkus oleh gql sebagai templat bertanda. Tag gql menerima sintaks literal templat dalam sumber JavaScript.

useQuery(GET_USERS) mengembalikan { loading, error, data, refetch, fetchMore, networkStatus }. loading bernilai true selama pengambilan awal. error berisi kesalahan GraphQL atau jaringan apa pun. data berisi hasil kueri yang sesuai dengan bentuk kueri.

Periksa loading dan error terlebih dahulu sebelum mengakses data agar tidak merender nilai null.

Render komponen kerangka selama loading bernilai true. Render pesan kesalahan jika error ditetapkan (akses error.message untuk teks kesalahan). Hanya render konten sebenarnya ketika data ditetapkan dan loading bernilai false.

Pola tiga keadaan ini (loading / error / data) adalah struktur komponen Apollo Client standar.

Objek data mencerminkan struktur kueri GraphQL. Untuk query { users { id name } }, akses data.users yang merupakan array objek {id, name}. Tipe TypeScript akan sesuai jika Anda menggunakan graphql-codegen untuk menghasilkan hook bertipe.

Tanpa pembuatan kode, data diketik sebagai any. Dengan pembuatan kode, useQuery otomatis mengembalikan data dengan tipe lengkap.

Teruskan variabel sebagai argumen kedua: useQuery(GET_USER, { variables: { id: userId } }). Kueri otomatis dijalankan ulang ketika userId berubah, seperti array dependensi useEffect.

Apollo Client menyimpan setiap kombinasi unik kueri + variabel secara terpisah, sehingga GET_USER dengan id: "1" dan GET_USER dengan id: "2" memiliki entri cache yang independen.

Teruskan skip: true dalam opsi untuk mencegah kueri dijalankan: useQuery(GET_USER, { skip: !userId }). Apollo tidak mengirimkan permintaan ketika skip bernilai true, dan loading bernilai false serta data bernilai undefined.

Ini adalah padanan Apollo untuk kunci null milik SWR dan opsi enabled: false milik React Query.

Fungsi refetch yang dikembalikan oleh useQuery memicu permintaan jaringan terlepas dari kebijakan pengambilan. Panggil refetch() setelah tindakan pengguna yang mungkin mengubah data server, misalnya refetch() setelah mengirimkan formulir.

Teruskan variabel baru ke refetch: refetch({ id: newId }) untuk mengambil ulang dengan parameter yang berbeda.

Teruskan notifyOnNetworkStatusChange: true dalam opsi untuk menerima pembaruan saat status jaringan berubah (mengambil data, mengambil ulang, pemeriksaan berkala, dan sebagainya). Kolom networkStatus berisi kode numerik dari enum NetworkStatus.

Ini memungkinkan Anda menampilkan indikator halus "menyegarkan" saat pengambilan ulang di latar belakang sedang berlangsung tanpa menyembunyikan data saat ini.

useMutation(CREATE_USER) mengembalikan [mutateFunction, { loading, error, data, reset }]. Fungsi mutasi dipanggil ketika pengguna mengirimkan formulir. Fungsi ini mengembalikan hasil asinkron berupa { data, errors }.

Panggil mutate({ variables: { name: 'Alice', email: 'alice@example.com' } }) untuk meneruskan masukan ke mutasi.

Teruskan onCompleted: (data) => navigate('/dashboard') dan onError: (error) => showToast(error.message) ke opsi useMutation. Panggilan balik ini dijalankan setelah mutasi selesai atau ditolak.

onCompleted menerima data hasil mutasi, yang berguna untuk memicu navigasi, menampilkan pesan keberhasilan, atau mengatur ulang formulir.

Opsi optimisticResponse dalam pemanggilan mutate segera menulis hasil sintetis ke cache sebelum server memberikan respons. Apollo langsung merender data optimistis, lalu menggantinya dengan respons server yang sebenarnya saat respons tersebut tiba.

Jika mutasi gagal, Apollo secara otomatis mengembalikan cache ke keadaan sebelum optimisme, sehingga antarmuka tetap konsisten.

Apa yang terjadi pada useQuery saat skip: true diteruskan?

Definisikan kueri dengan tag gql, panggil useQuery(QUERY, { variables, skip }), lalu tangani keadaan loading/error/data. useMutation mengembalikan fungsi pemicu dan objek status; panggil fungsi tersebut dengan variabel, lalu tangani hasilnya melalui onCompleted dan onError. Respons optimistis segera memperbarui cache dan secara otomatis membatalkan perubahan jika terjadi kegagalan.

Opsi skip dan pengambilan ulang yang digerakkan oleh variabel menangani pemuatan data bersyarat dan berparameter.