React Native Academy · Pelajaran

Mengekalkan Cache Pertanyaan dengan AsyncStorage

Pasang pemalam pengekalan React Query, simpan keseluruhan cache pertanyaan dalam AsyncStorage, dan pulihkannya ketika aplikasi dimulakan supaya data tersedia serta-merta di luar talian.

Pelajaran 3 daripada 413 langkah

Mengekalkan Cache Pertanyaan dengan AsyncStorage ialah pelajaran React Native Academy percuma di CoddyKit. Ini ialah pelajaran 3 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.

Mengapakah Cache Query Perlu Dikekalkan?

Secara lalai, cache React Query hanya wujud dalam memori. Apabila aplikasi ditutup dan dibuka semula, semua data yang dicache hilang — pengguna akan melihat penunjuk pemuatan sementara data diambil semula daripada rangkaian. Pada sambungan yang perlahan atau tiada sambungan, keadaan ini menyebabkan skrin kosong.

Pengekalan cache menyimpan cache React Query pada cakera (AsyncStorage dalam React Native) supaya data tersedia serta-merta apabila aplikasi dilancarkan seterusnya, sebelum sebarang permintaan rangkaian selesai. Inilah asas aplikasi mudah alih yang mengutamakan luar talian.

Pakej Diperlukan

Pengekalan cache memerlukan tiga pakej: @tanstack/react-query (teras), @tanstack/react-query-persist-client (penyesuai pengekalan) dan pelaksanaan penyimpan. Untuk React Native, kita menggunakan @tanstack/async-storage-persister yang membungkus AsyncStorage sebagai bahagian belakang pengekalan.

AsyncStorage ialah stor nilai-kunci standard untuk React Native, yang disediakan oleh @react-native-async-storage/async-storage. Penyimpan mengekodkan keseluruhan cache query kepada JSON dan menulisnya ke satu kunci AsyncStorage.

// Install all required packages:
// 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 { createAsyncStoragePersister } from '@tanstack/async-storage-persister';
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
import AsyncStorage from '@react-native-async-storage/async-storage';

Mencipta Penyimpan

Cipta tika penyimpan dengan createAsyncStoragePersister, sambil menghantar tika AsyncStorage dan nama kunci storan. Penyimpan mengekodkan cache React Query kepada JSON dan menulisnya ke kunci tersebut setiap kali cache berubah.

Penyimpan juga mempunyai pilihan throttleTime (lalai 1000ms) yang menghalang penulisan ke AsyncStorage terlalu kerap semasa perubahan keadaan berlaku dengan pantas. Tingkatkan nilainya jika anda menyedari operasi input/output atau penggunaan bateri yang berlebihan.

import { createAsyncStoragePersister } from '@tanstack/async-storage-persister';
import AsyncStorage from '@react-native-async-storage/async-storage';

const asyncStoragePersister = createAsyncStoragePersister({
  storage: AsyncStorage,
  key: 'react-query-cache', // AsyncStorage key to use
  throttleTime: 1000,        // ms between writes (default)
  serialize: JSON.stringify, // custom serializer (optional)
  deserialize: JSON.parse,   // custom deserializer (optional)
});

PersistQueryClientProvider

Gantikan QueryClientProvider standard dengan PersistQueryClientProvider. Hantar kedua-dua client (QueryClient anda) dan persistOptions (yang mengandungi penyimpan). Penyedia ini mengendalikan pemulihan cache ketika permulaan dan penyimpanannya apabila berlaku perubahan secara automatik.

Semasa pemulihan, pepohon komponen dipaparkan dengan data yang dicache serta-merta — tiada keadaan pemuatan pada paparan pertama. React Query juga menjadualkan pengambilan semula di latar belakang untuk mendapatkan data terkini daripada pelayan.

import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';

export default function App() {
  return (
    <PersistQueryClientProvider
      client={queryClient}
      persistOptions={{ persister: asyncStoragePersister }}
    >
      <NavigationContainer>
        <RootNavigator />
      </NavigationContainer>
    </PersistQueryClientProvider>
  );
}

maxAge: Tempoh Luput Cache

Cache yang dikekalkan boleh menjadi lapuk dari semasa ke semasa. Konfigurasikan maxAge dalam persistOptions untuk menetapkan tempoh data yang dikekalkan dianggap sah. Data yang lebih lama akan dibuang dan data baharu akan diambil daripada rangkaian ketika pelancaran seterusnya. Nilai maxAge lalai ialah 24 jam.

Pilih maxAge berdasarkan kadar perubahan data anda. Untuk data profil pengguna yang jarang berubah, 7 hari mungkin sesuai. Untuk suapan berita yang sentiasa berubah, 30 minit memastikan cache kekal berguna tanpa memaparkan kandungan yang terlalu lapuk.

<PersistQueryClientProvider
  client={queryClient}
  persistOptions={{
    persister: asyncStoragePersister,
    maxAge: 7 * 24 * 60 * 60 * 1000, // 7 days in ms
    // Cache older than 7 days is discarded on launch
  }}
>

buster: Membatalkan Versi Cache Lama

Apabila Anda mengeluarkan versi apl baharu dengan struktur data yang berubah, format cache lama mungkin tidak serasi. Pilihan buster dalam persistOptions ialah rentetan versi — apabila nilainya berubah, cache lama yang disimpan akan dibuang dan proses mendapatkan data baharu bermula.

Kemas kini rentetan buster setiap kali Anda membuat perubahan yang tidak serasi pada respons API atau struktur kunci pertanyaan. Corak yang biasa digunakan ialah nombor versi apl daripada expo-constants atau rentetan versi yang diurus secara manual.

import Constants from 'expo-constants';

<PersistQueryClientProvider
  client={queryClient}
  persistOptions={{
    persister: asyncStoragePersister,
    maxAge: 24 * 60 * 60 * 1000,
    buster: Constants.expoConfig.version, // bust cache on app update
  }}
>

// Or use a manual API version:
// buster: 'api-v3', // update when API structure changes

Mengendalikan Keadaan Pemuatan Semula

Pemulihan cache daripada AsyncStorage berlaku secara tak segerak. Dalam tempoh singkat ini, biasanya hanya beberapa milisaat, apl mungkin memaparkan data kosong seketika sebelum cache dipulihkan. PersistQueryClientProvider menyediakan panggilan balik onSuccess yang dicetuskan apabila pemuatan semula selesai.

Paparkan skrin percikan atau UI rangka sehingga pemuatan semula selesai, kemudian paparkan apl. Ini mengelakkan peralihan mendadak daripada kosong kepada penuh yang berlaku jika Anda memaparkan kandungan sebelum cache tersedia.

const [isRestored, setIsRestored] = React.useState(false);

<PersistQueryClientProvider
  client={queryClient}
  persistOptions={{ persister: asyncStoragePersister }}
  onSuccess={() => setIsRestored(true)}
>
  {isRestored ? (
    <NavigationContainer>
      <RootNavigator />
    </NavigationContainer>
  ) : (
    <SplashScreen />
  )}
</PersistQueryClientProvider>

Penyimpanan Terpilih dengan Meta

Bukan semua pertanyaan patut disimpan. Data sensitif (maklumat pembayaran pengguna), data khusus sesi atau set data yang sangat besar mungkin tidak sesuai disimpan dalam storan setempat. Gunakan pilihan gcTime: 0 untuk mengecualikan pertanyaan tertentu daripada penyimpanan — pertanyaan tersebut dikutip sebagai sampah serta-merta apabila dinyahlekap dan tidak akan ditulis ke cakera.

Sebagai alternatif, konfigurasikan fungsi dehydrateState tersuai dalam persistOptions untuk menapis pertanyaan yang disertakan dalam petikan yang disimpan.

// This query is excluded from persistence (never cached to disk):
const { data: paymentInfo } = useQuery({
  queryKey: ['payment-info'],
  queryFn: fetchPaymentInfo,
  gcTime: 0,        // no memory cache either
  staleTime: 0,     // always refetch
});

// This query is persisted normally:
const { data: userProfile } = useQuery({
  queryKey: ['profile'],
  queryFn: fetchProfile,
  staleTime: 5 * 60 * 1000,
});

Tingkah Laku Luar Talian dengan Cache Tersimpan

Apabila penyimpanan cache didayakan, pengguna yang membuka apl semasa luar talian akan melihat data cache serta-merta — tanpa keadaan pemuatan dan tanpa senarai kosong. React Query mengetahui bahawa data tersebut mungkin sudah lapuk lalu menjadualkan pengambilan semula melalui rangkaian, tetapi memaparkan cache sementara menunggu sambungan.

Konfigurasikan networkMode: 'offlineFirst' pada pertanyaan yang perlu berfungsi ketika luar talian. Mod lalai akan menjeda pertanyaan apabila luar talian; offlineFirst mengembalikan data cache walaupun luar talian tanpa menghasilkan ralat.

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      networkMode: 'offlineFirst', // serve cache even when offline
      staleTime: 5 * 60 * 1000,
      retry: false, // don't retry when offline
    },
  },
});

// Individual query override:
const { data } = useQuery({
  queryKey: ['articles'],
  queryFn: fetchArticles,
  networkMode: 'always', // always try network
});

Saiz Cache dan Had Storan

AsyncStorage mempunyai had saiz, biasanya 6 MB bagi setiap kunci pada iOS, manakala had pada Android berbeza mengikut peranti. Menyimpan cache React Query yang besar dengan banyak pertanyaan boleh menghampiri had ini. Pantau saiz cache menggunakan panjang bersiri: JSON.stringify(dehydratedState).length.

Strategi untuk mengurus saiz cache: kurangkan gcTime supaya pertanyaan yang tidak digunakan dikutip sebagai sampah dengan cepat sebelum proses bersiri, hadkan bilangan item cache bagi setiap senarai (gunakan pages dalam pertanyaan tak terhingga), dan kecualikan data binari atau imej yang besar daripada cache.

// Check cache size in development:
AsyncStorage.getItem('react-query-cache').then((data) => {
  if (data) {
    const sizeKB = data.length / 1024;
    console.log('Cache size:', sizeKB.toFixed(1), 'KB');
    if (sizeKB > 4000) {
      console.warn('Cache approaching AsyncStorage limit!');
    }
  }
});

// Manually clear the cache if needed:
queryClient.clear();
await AsyncStorage.removeItem('react-query-cache');

Menggabungkan Penyimpanan dengan Status Rangkaian

Persediaan luar talian yang lengkap menggabungkan penyimpanan cache dengan pengesanan status rangkaian. Gunakan cangkuk status rangkaian untuk mengesan perubahan sambungan, dan gunakan onlineManager React Query untuk memaklumkan pustaka apabila peranti kembali dalam talian atau menjadi luar talian. Ini menghalang pengambilan semula latar belakang ketika luar talian dan mencetuskannya apabila sambungan kembali.

Gabungan ini memberikan pengalaman yang lancar kepada pengguna: apl dibuka dengan data cache, memaparkan penunjuk luar talian yang halus apabila terputus, dan menyegarkan data secara senyap apabila sambungan kembali.

import NetInfo from '@react-native-community/netinfo';
import { onlineManager } from '@tanstack/react-query';

// At app startup:
NetInfo.addEventListener((state) => {
  onlineManager.setOnline(state.isConnected);
});

// Queries will automatically:
// - Pause when offline
// - Resume and refetch when online
// - Serve cache while waiting

Semakan Pantas

Uji pemahaman Anda tentang konsep Pembangunan Apl Mudah Alih React Native daripada pelajaran ini.

Jawab dalam pelajaran interaktif

Ulang Kaji Pelajaran

Dalam pelajaran ini Anda telah mempelajari bahawa: PersistQueryClientProvider dengan createAsyncStoragePersister menyimpan keseluruhan cache React Query ke AsyncStorage untuk tingkah laku luar talian dahulu, buster membatalkan format cache lapuk apabila Anda mengeluarkan perubahan API, dan gcTime: 0 pada pertanyaan individu mengecualikan data sensitif daripada disimpan ke storan setempat. Seterusnya, kita akan mengkonfigurasi staleTime, pengambilan semula latar belakang dan tingkah laku penyambungan semula rangkaian untuk pengalaman luar talian yang lebih baik.

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 “Mengekalkan Cache Pertanyaan dengan AsyncStorage” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran React Native Academy, termasuk “Mengekalkan Cache Pertanyaan dengan AsyncStorage”, 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 “Mengekalkan Cache Pertanyaan dengan AsyncStorage”?

Pasang pemalam pengekalan React Query, simpan keseluruhan cache pertanyaan dalam AsyncStorage, dan pulihkannya ketika aplikasi dimulakan supaya data tersedia serta-merta di luar talian. 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 3 daripada 4.

Berapa lamakah pelajaran “Mengekalkan Cache Pertanyaan dengan AsyncStorage” 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