React Native Academy · Pelajaran

QueryClient, QueryClientProvider dan useQuery

Sediakan TanStack Query dengan QueryClient, bungkus aplikasi dalam QueryClientProvider, dan dapatkan data dengan useQuery — menggantikan pengambilan data manual berasaskan useEffect.

Pelajaran 1 daripada 413 langkah

QueryClient, QueryClientProvider dan useQuery ialah pelajaran React Native Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran React Native Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.

Apakah TanStack React Query?

TanStack React Query (dahulunya React Query) ialah pustaka pengambilan data dan cache yang mengurus keadaan pelayan dalam aplikasi React Native anda. Daripada mengurus keadaan pemuatan, ralat dan data secara manual menggunakan useState dan useEffect, React Query menyediakan cache pintar, pengambilan semula di latar belakang dan percubaan semula automatik — semuanya melalui API cangkuk yang mudah.

Keadaan pelayan sememangnya berbeza daripada keadaan antara muka pengguna: keadaan ini berada pada pelayan jauh, boleh menjadi lapuk, memerlukan pengambilan semula dan mungkin diperlukan oleh beberapa komponen. React Query menyelesaikan semua ini dengan cara yang telah diuji dengan baik dan terbukti dalam aplikasi pengeluaran.

// Traditional approach (before React Query):
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

// With React Query:
const { data, isLoading, error } = useQuery({
  queryKey: ['posts'],
  queryFn: fetchPosts,
});
// Same result — dramatically less code

Memasang TanStack Query

Pasang TanStack Query (v5) dan pemalam pengekalan khusus React Native. Pakej teras ialah @tanstack/react-query. Untuk projek Expo, anda juga mungkin mahu menggunakan alat pembangun, walaupun alat tersebut memerlukan persekitaran web untuk dilihat.

React Query v5 menggunakan sintaks objek untuk pilihan cangkuk (perubahan yang memecahkan keserasian daripada v4). Jika anda melihat tutorial yang menggunakan argumen kedudukan untuk useQuery, tutorial itu menggunakan v4. Pelajaran ini merangkumi API v5 moden.

// Install:
// npx expo install @tanstack/react-query
// npx expo install @tanstack/react-query-persist-client
// npx expo install @tanstack/async-storage-persister
// npx expo install @react-native-async-storage/async-storage

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

Menyediakan QueryClient

QueryClient ialah objek teras yang mengurus semua cache, pertanyaan dan mutasi. Cipta satu tika dan kongsikannya di seluruh aplikasi. Konfigurasikan lalai global dalam pembina QueryClient — lalai ini digunakan untuk semua pertanyaan melainkan ditimpa pada peringkat pertanyaan individu.

Cipta QueryClient di luar pepohon komponen anda (atau dalam pemula useState) supaya ia tidak dicipta semula pada setiap pemaparan. QueryClient yang dicipta semula akan kehilangan semua data yang dicache.

import { QueryClient } from '@tanstack/react-query';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000,  // 5 minutes before considered stale
      gcTime: 10 * 60 * 1000,    // 10 minutes before garbage collected
      retry: 2,                   // retry failed requests twice
      refetchOnWindowFocus: false, // disable for mobile
    },
  },
});

QueryClientProvider: Menyediakan Akses kepada Klien

Bungkus akar aplikasi anda dengan QueryClientProvider, dengan menghantar tika QueryClient sebagai prop client. Setiap komponen di dalam penyedia itu kemudiannya boleh mengakses QueryClient dan menggunakan cangkuk React Query. Ini serupa dengan Provider React Redux atau NavigationContainer React Navigation.

Letakkan QueryClientProvider pada akar aplikasi anda, dengan membungkus navigasi dan penyedia lain. Susunan dengan penyedia lain (seperti Redux Provider atau AuthProvider) biasanya tidak penting melainkan penyedia tersebut bergantung antara satu sama lain.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient({
  defaultOptions: { queries: { staleTime: 5 * 60 * 1000 } },
});

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <NavigationContainer>
        <RootNavigator />
      </NavigationContainer>
    </QueryClientProvider>
  );
}

useQuery: Mengambil Data

useQuery ialah cangkuk utama untuk mengambil dan mencache data pelayan. Ia menerima objek konfigurasi dengan dua medan yang diperlukan: queryKey (pengecam unik untuk data ini) dan queryFn (fungsi tak segerak yang mengambil data). React Query memanggil queryFn secara automatik dan mencache hasilnya.

Cangkuk ini mengembalikan data, isLoading, isFetching, error dan banyak nilai keadaan lain. isLoading bernilai benar semasa pemuatan pertama; isFetching bernilai benar setiap kali pengambilan sedang berlaku (termasuk pengambilan semula di latar belakang).

import { useQuery } from '@tanstack/react-query';

async function fetchPosts() {
  const response = await fetch('https://api.example.com/posts');
  if (!response.ok) throw new Error('Network error');
  return response.json();
}

function PostsScreen() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['posts'],
    queryFn: fetchPosts,
  });

  if (isLoading) return <ActivityIndicator />;
  if (error) return <Text>Error: {error.message}</Text>;
  return <FlatList data={data} renderItem={...} />;
}

Kunci Pertanyaan: Identiti Cache

queryKey ialah cara React Query mengenal pasti dan menggunakan semula data yang dicache. Gunakan tatasusunan yang mengandungi jenis data dan sebarang pemboleh ubah yang menjadi kebergantungan pengambilan. Pertanyaan dengan kunci yang sama berkongsi data yang dicache — beberapa komponen yang menggunakan ['posts'] hanya melakukan pengambilan sekali dan berkongsi objek data yang sama.

Sertakan parameter dinamik dalam tatasusunan kunci supaya gabungan parameter yang berbeza mendapat entri cache yang berasingan. Contohnya, ['user', userId] mencache data setiap pengguna secara berasingan. Kunci dibandingkan mengikut nilai (kesamaan mendalam), bukan mengikut rujukan.

// Static key:
const { data: posts } = useQuery({
  queryKey: ['posts'],
  queryFn: fetchAllPosts,
});

// Dynamic key — separate cache per user:
const { data: user } = useQuery({
  queryKey: ['user', userId],
  queryFn: () => fetchUser(userId),
});

// Compound key with filters:
const { data: filteredPosts } = useQuery({
  queryKey: ['posts', { status: 'published', category: 'tech' }],
  queryFn: () => fetchPosts({ status: 'published', category: 'tech' }),
});

staleTime dan cacheTime

staleTime menentukan tempoh data yang dicache dianggap segar sebelum React Query mengambil data baharu di latar belakang. Dalam tempoh ini, nilai yang dicache dikembalikan serta-merta tanpa sebarang permintaan rangkaian. Selepas staleTime, data dianggap lapuk dan pengambilan semula di latar belakang dicetuskan apabila pemasangan atau fokus seterusnya berlaku.

gcTime (dahulunya cacheTime) menentukan tempoh entri cache yang tidak digunakan (tiada pemerhati) disimpan dalam memori sebelum dikutip oleh pengutip sampah. Cache wujud walaupun selepas semua komponen yang menggunakannya dinyahpasang, sehingga gcTime tamat.

const { data } = useQuery({
  queryKey: ['settings'],
  queryFn: fetchUserSettings,
  staleTime: 10 * 60 * 1000,  // fresh for 10 min, no background refetch
  gcTime: 30 * 60 * 1000,     // kept in cache for 30 min after unmount
});

// Infinity means never stale (manual invalidation only):
const { data: config } = useQuery({
  queryKey: ['app-config'],
  queryFn: fetchAppConfig,
  staleTime: Infinity,
});

Pertanyaan Bersandar

Sesetengah pertanyaan bergantung pada data daripada pertanyaan lain. Gunakan pilihan enabled untuk melumpuhkan pertanyaan sehingga kebergantungannya tersedia. React Query tidak akan memanggil queryFn apabila enabled bernilai false dan akan mula mengambil data secara automatik sebaik sahaja enabled menjadi true.

Ini menggantikan rantaian useEffect bersarang yang menunggu satu pengambilan selesai sebelum memulakan pengambilan yang lain. Corak pertanyaan bersandar bersifat deklaratif dan lebih mudah difahami.

// Fetch user first:
const { data: user } = useQuery({
  queryKey: ['user', userId],
  queryFn: () => fetchUser(userId),
});

// Then fetch user's posts when user is available:
const { data: userPosts } = useQuery({
  queryKey: ['posts', user?.id],
  queryFn: () => fetchUserPosts(user.id),
  enabled: !!user, // only runs after user is fetched
});

Tingkah Laku Percubaan Semula dan Pengendalian Ralat

React Query mencuba semula query yang gagal secara automatik dengan kelewatan eksponen. Nilai lalai ialah 3 percubaan semula. Konfigurasikan retry (nombor) dan retryDelay (milisaat atau fungsi) bagi setiap query. Selepas semua percubaan semula gagal, medan error akan diisi dan isError menjadi true.

queryFn mesti melontarkan ralat untuk menandakan kegagalan — mengembalikan null atau objek ralat khas tidak akan mencetuskan percubaan semula. Sentiasa lontarkan ralat dalam fungsi query apabila respons menunjukkan ralat (semak kod status HTTP secara eksplisit).

const { data, isError, error } = useQuery({
  queryKey: ['data'],
  queryFn: async () => {
    const res = await fetch('https://api.example.com/data');
    if (!res.ok) {
      throw new Error('Request failed: ' + res.status); // must throw!
    }
    return res.json();
  },
  retry: 3,
  retryDelay: (attempt) => Math.min(1000 * 2 ** attempt, 30000),
});

Pembatalan Query Secara Manual

Apabila anda mengetahui bahawa data pada pelayan telah berubah (contohnya selepas mutasi), gunakan queryClient.invalidateQueries({ queryKey: ['posts'] }) untuk membatalkan query yang berkaitan. Tindakan ini menandakan data yang dicache sebagai lapuk dan mencetuskan pengambilan semula di latar belakang bagi mana-mana komponen yang sedang memerhati query tersebut.

Pembatalan query ialah salah satu corak paling berkuasa dalam React Query — selepas menghantar komen baharu, batalkan query komen dan senarai akan dimuat semula secara automatik. Tiada kemas kini keadaan secara manual diperlukan.

import { useQueryClient } from '@tanstack/react-query';

function PostButton() {
  const queryClient = useQueryClient();

  async function handlePost() {
    await submitPost(newPostData);
    // Invalidate posts list — triggers background refetch:
    await queryClient.invalidateQueries({ queryKey: ['posts'] });
  }
}

Pengambilan Semula di Latar Belakang Apabila Aplikasi Aktif

React Query boleh mengambil semula data lapuk secara automatik apabila pengguna kembali ke aplikasi selepas aplikasi berada di latar belakang. Di web, ciri ini menggunakan window focus; dalam React Native, anda perlu mengkonfigurasikannya menggunakan focusManager bersama AppState. Dengan ini, data sentiasa dikemas kini secara automatik tanpa pengguna perlu memuat semula secara manual.

Sediakan pengurus fokus sekali sahaja ketika aplikasi dimulakan. Selepas persediaan selesai, mana-mana query lapuk akan diambil semula secara automatik apabila pengguna kembali ke aplikasi, sekali gus memastikan antara muka pengguna terkini tanpa kod tambahan dalam komponen individu.

import { focusManager } from '@tanstack/react-query';
import { AppState } from 'react-native';

// At app startup (App.js or index.js):
AppState.addEventListener('change', (state) => {
  focusManager.setFocused(state === 'active');
});

// Queries with staleTime < Infinity will refetch
// automatically when app comes to foreground

Semakan Pantas

Uji pemahaman anda tentang konsep Pembangunan Aplikasi Mudah Alih React Native daripada pelajaran ini.

Jawab dalam pelajaran interaktif

Ulang Kaji Pelajaran

Dalam pelajaran ini, anda telah mempelajari bahawa: QueryClient menyimpan cache dan disediakan kepada pepohon komponen melalui QueryClientProvider, useQuery mengambil dan mencache data pelayan yang dikenal pasti oleh queryKey serta memanggil queryFn secara automatik, dan staleTime mengawal tempoh data yang dicache dianggap masih baharu sebelum pengambilan semula di latar belakang dicetuskan. Seterusnya, kita akan menggunakan useMutation untuk mengubah data pelayan dan memuat semula query berkaitan secara automatik.

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 30
Pelajaran: 120

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “QueryClient, QueryClientProvider dan useQuery” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran React Native Academy, termasuk “QueryClient, QueryClientProvider dan useQuery”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “QueryClient, QueryClientProvider dan useQuery”?

Sediakan TanStack Query dengan QueryClient, bungkus aplikasi dalam QueryClientProvider, dan dapatkan data dengan useQuery — menggantikan pengambilan data manual berasaskan useEffect. Anda berlatih React Native Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan React Native Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran React Native Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “QueryClient, QueryClientProvider dan useQuery” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran React Native Academy ini?

Ya. Setiap pelajaran React Native Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

QueryClient, QueryClientProvider dan useQuery
Mutasi dengan useMutation dan Pembatalan Cache
Mengekalkan Cache Pertanyaan dengan AsyncStorage
Konfigurasi Pengambilan Semula Latar Belakang dan Masa Lapuk

← Kembali ke React Native Academy