React Native Academy · Pelajaran

QueryClient, QueryClientProvider, dan useQuery

Siapkan TanStack Query dengan QueryClient, bungkus aplikasi dalam QueryClientProvider, lalu ambil data dengan useQuery sebagai pengganti pengambilan data manual berbasis useEffect.

QueryClient, QueryClientProvider, dan useQuery adalah pelajaran React Native Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar React Native Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Native Academy mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

What Is TanStack React Query?

TanStack React Query (formerly React Query) is a data-fetching and caching library that manages server state in your React Native app. Instead of managing loading, error, and data state manually with useState and useEffect, React Query provides smart caching, background refetching, and automatic retry — all with a simple hook API.

Server state is inherently different from UI state: it lives on a remote server, can be stale, needs refetching, and multiple components might need the same data. React Query solves all of this in a battle-tested, production-proven way.

// 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

Installing TanStack Query

Install TanStack Query (v5) and the React Native specific persistence plugin. The core package is @tanstack/react-query. For Expo projects you may also want the devtools, though they require a web environment to view.

React Query v5 uses object syntax for hook options (breaking change from v4). If you see tutorials using positional arguments for useQuery, they are using v4. This lesson covers the modern v5 API.

// 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';

Setting Up QueryClient

QueryClient is the core object that manages all caches, queries, and mutations. You create one instance and share it across the entire app. Configure global defaults in the QueryClient constructor — these apply to all queries unless overridden at the individual query level.

Create the QueryClient outside your component tree (or in a useState initializer) so it is not recreated on every render. A recreated QueryClient loses all cached data.

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: Making the Client Available

Wrap your app's root in QueryClientProvider, passing the QueryClient instance as the client prop. Every component inside the provider can then access the QueryClient and use the React Query hooks. This is similar to React Redux's Provider or React Navigation's NavigationContainer.

Place QueryClientProvider at the root of your app, wrapping navigation and other providers. The order with other providers (like Redux Provider or AuthProvider) typically doesn't matter unless they depend on each other.

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: Fetching Data

useQuery is the primary hook for fetching and caching server data. It takes a config object with two required fields: queryKey (a unique identifier for this data) and queryFn (the async function that fetches the data). React Query calls queryFn automatically and caches the result.

The hook returns data, isLoading, isFetching, error, and many other state values. isLoading is true on the first load; isFetching is true any time a fetch is happening (including background refetches).

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={...} />;
}

Query Keys: The Cache Identity

The queryKey is how React Query identifies and reuses cached data. Use an array that includes the data type and any variables the fetch depends on. Queries with the same key share cached data — multiple components using ['posts'] only fetch once and share the same data object.

Include dynamic parameters in the key array so different parameter combinations get separate cache entries. For example, ['user', userId] caches each user's data separately. Keys are compared by value (deep equality), not by reference.

// 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 and cacheTime

staleTime determines how long cached data is considered fresh before React Query fetches fresh data in the background. During this time, the cached value is returned immediately without any network request. After staleTime the data is considered stale and a background refetch is triggered on the next mount or focus.

gcTime (formerly cacheTime) determines how long unused (no observers) cache entries are kept in memory before being garbage collected. The cache exists even after all components using it unmount, until gcTime expires.

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,
});

Dependent Queries

Some queries depend on data from another query. Use the enabled option to disable a query until its dependency is ready. React Query won't call the queryFn when enabled is false, and it will start fetching automatically once enabled becomes true.

This replaces nested useEffect chains where you'd wait for one fetch to complete before starting another. The dependent query pattern is declarative and easier to reason about.

// 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
});

Retry Behavior and Error Handling

React Query automatically retries failed queries with exponential backoff. The default is 3 retries. Configure retry (number) and retryDelay (ms or function) per query. After all retries fail, the error field is populated and isError becomes true.

The queryFn must throw an error to signal failure — returning null or a special error object won't trigger retry. Always throw in the query function when the response indicates an error (check HTTP status codes explicitly).

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),
});

Manual Query Invalidation

When you know data has changed on the server (after a mutation, for example), invalidate the relevant queries using queryClient.invalidateQueries({ queryKey: ['posts'] }). This marks the cached data as stale and triggers a background refetch for any components currently observing the query.

Query invalidation is one of the most powerful patterns in React Query — after posting a new comment, invalidate the comments query and the list refreshes automatically. No manual state update needed.

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'] });
  }
}

Background Refetch on App Focus

React Query can automatically refetch stale data when the user returns to the app from the background. On web this uses window focus; on React Native you need to configure it using the focusManager with AppState. This keeps data fresh automatically without the user manually refreshing.

Setup the focus manager once at app startup. After the setup, any stale query will automatically refetch when the user switches back to the app, keeping the UI current without any additional code in individual components.

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

Quick Check

Test your understanding of React Native Mobile Development concepts from this lesson.

Lesson Recap

In this lesson you learned: QueryClient holds the cache and is provided to the component tree via QueryClientProvider, useQuery fetches and caches server data identified by queryKey and calls queryFn automatically, and staleTime controls how long cached data is considered fresh before a background refetch is triggered. Next up we use useMutation to modify server data and automatically refresh related queries.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “QueryClient, QueryClientProvider, dan useQuery” gratis?

Ya — teks lengkap “QueryClient, QueryClientProvider, dan useQuery” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Native Academy, upgrade ke CoddyKit PRO. Kursus React Native Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “QueryClient, QueryClientProvider, dan useQuery”?

Siapkan TanStack Query dengan QueryClient, bungkus aplikasi dalam QueryClientProvider, lalu ambil data dengan useQuery sebagai pengganti pengambilan data manual berbasis useEffect. Kamu berlatih React Native Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai React Native Academy?

Tidak diperlukan pengalaman sebelumnya. React Native Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “QueryClient, QueryClientProvider, dan useQuery” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran React Native Academy ini?

Ya. Setiap pelajaran React Native Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

QueryClient, QueryClientProvider, dan useQuery
Mutasi dengan useMutation dan Pembatalan Cache
Menyimpan Cache Kueri dengan AsyncStorage
Pengambilan Ulang di Latar Belakang dan Konfigurasi Waktu Kedaluwarsa

← Kembali ke React Native Academy