React Native Academy · Lección

QueryClient, QueryClientProvider y useQuery

Configure TanStack Query con un QueryClient, envuelva la aplicación en QueryClientProvider y obtenga datos con useQuery, sustituyendo la obtención manual basada en useEffect.

QueryClient, QueryClientProvider y useQuery es una lección gratuita de React Native Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Native Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Native Academy incluye 4 lecciones en total.

Partes de esta lección aún no han sido traducidas y se muestran en inglés.

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.

Preguntas frecuentes

¿La lección «QueryClient, QueryClientProvider y useQuery» es gratis?

Sí — el texto completo de «QueryClient, QueryClientProvider y useQuery» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Native Academy, actualiza a CoddyKit PRO. El curso de React Native Academy incluye 4 lecciones en total.

¿Qué aprenderé en «QueryClient, QueryClientProvider y useQuery»?

Configure TanStack Query con un QueryClient, envuelva la aplicación en QueryClientProvider y obtenga datos con useQuery, sustituyendo la obtención manual basada en useEffect. Practicas React Native Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Native Academy?

No se requiere experiencia previa. React Native Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «QueryClient, QueryClientProvider y useQuery»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Native Academy?

Sí. Cada lección de React Native Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

QueryClient, QueryClientProvider y useQuery
Mutaciones con useMutation e invalidación de caché
Persistencia de la caché de consultas con AsyncStorage
Configuración de actualización en segundo plano y tiempo de obsolescencia

← Volver a React Native Academy