0Pricing
Next.js 15 Fullstack Web Apps · Урок

React Query для состояния сервера

Управляйте получением, кэшированием и синхронизацией данных на стороне сервера с помощью React Query (TanStack Query).

«React Query для состояния сервера» — бесплатный урок Next.js 15 Fullstack Web Apps на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Next.js 15 Fullstack Web Apps, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Next.js 15 Fullstack Web Apps содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

Meet React Query

React Query, now known as TanStack Query, is a powerful library for managing server-side state in your applications.

It helps you fetch, cache, synchronize, and update data in your React and Next.js apps effortlessly. Think of it as your data layer, handling the complexities of server data so you don't have to.

Benefits of TanStack Query

React Query solves many common data fetching challenges, making your app feel faster and more responsive:

  • Caching: Stores fetched data to prevent unnecessary requests.
  • Revalidation: Automatically refreshes stale data in the background.
  • Loading States: Provides clear indicators for data fetching status.
  • Error Handling: Simplifies managing and displaying fetch errors.
  • Performance: Reduces network requests and improves user experience.

Initial Setup: Provider

To use React Query, you first need to set up a QueryClient and provide it to your app. This is typically done at the root of your application, wrapping your components with QueryClientProvider.

Here's how you might set up the client and provider in a Next.js app:

/* app/providers.jsx (or similar) */
"use client";
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import React from 'react';

const queryClient = new QueryClient();

export default function AppProviders({ children }) {
  return (
    <QueryClientProvider client={queryClient}>
      {children}
    </QueryClientProvider>
  );
}

Your First Data Fetch

The useQuery hook is the core for fetching data. It takes two main arguments: a unique query key and an async query function.

The query key identifies your data in the cache. The query function actually fetches it. Try running this simple example fetching a user:

"use client";
import { useQuery } from '@tanstack/react-query';
import React from 'react';

async function fetchUser() {
  const res = await fetch(
    'https://jsonplaceholder.typicode.com/users/1'
  );
  if (!res.ok) throw new Error('Failed to fetch');
  return res.json();
}

export default function UserProfile() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['user', 1],
    queryFn: fetchUser,
  });

  if (isLoading) return <p>Loading user...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h3>User: {data.name}</h3>
      <p>Email: {data.email}</p>
    </div>
  );
}

Power of Query Keys

Query keys are crucial! They are like unique IDs for your cached data. React Query uses them to identify, refetch, and invalidate specific queries.

  • Keys can be simple strings (e.g., 'todos') or arrays.
  • Arrays are great for passing dependencies or parameters, like ['todos', { status: 'active' }].
  • When a key's array elements change, React Query knows to refetch the data.

UI Feedback for Users

useQuery returns several useful states to manage your UI and provide feedback to users:

  • isLoading: true when the query is first fetching data.
  • isError: true if the query failed to fetch data.
  • data: The successfully fetched data, or undefined.
  • error: The error object if isError is true.

These allow you to show loading spinners or error messages.

"use client";
import { useQuery } from '@tanstack/react-query';
import React from 'react';

async function fetchPost(id) {
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${id}`
  );
  if (!res.ok) throw new Error('Fetch failed');
  return res.json();
}

export default function PostDetail() {
  const postId = 2; // Example ID
  const { data, isLoading, isError, error } = useQuery({
    queryKey: ['post', postId],
    queryFn: () => fetchPost(postId),
  });

  if (isLoading) return <p>Loading post {postId}...</p>;
  if (isError) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h4>Post {data.id}</h4>
      <p>{data.title}</p>
    </div>
  );
}

Smart Caching Behavior

React Query automatically caches data after a successful fetch. By default, data is considered "stale" immediately after fetching, meaning it might be refetched in the background when the component mounts or the window regains focus.

This "stale-while-revalidate" approach provides instant UI feedback with fresh data updates. You can configure staleTime to keep data "fresh" for longer, preventing unnecessary refetches.

Updating Server Data

While useQuery is for fetching, useMutation is for creating, updating, or deleting data on the server (e.g., POST, PUT, DELETE requests).

It provides a mutate function to trigger the server call, and also returns isPending (similar to isLoading), isError, and data for the mutation itself. Let's see an example of creating a new todo:

"use client";
import { useMutation } from '@tanstack/react-query';
import React from 'react';

async function addTodo(newTodo) {
  const res = await fetch(
    'https://jsonplaceholder.typicode.com/todos',
    {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(newTodo),
    }
  );
  if (!res.ok) throw new Error('Failed to add');
  return res.json();
}

export default function AddTodo() {
  const mutation = useMutation({
    mutationFn: addTodo,
    onSuccess: (data) => alert('Added: ' + data.title),
    onError: (error) => alert('Error: ' + error.message),
  });

  const handleAdd = () => {
    mutation.mutate({ title: 'New task', completed: false });
  };

  return (
    <div>
      <button onClick={handleAdd} disabled={mutation.isPending}>
        {mutation.isPending ? 'Adding...' : 'Add Todo'}
      </button>
    </div>
  );
}

Keeping Cache Fresh

After a mutation (e.g., adding a new item), your cached list of items might be outdated. You can use queryClient.invalidateQueries() to mark relevant queries as stale, which triggers a refetch for those queries.

This ensures your UI always reflects the latest server data. You typically call invalidateQueries in the onSuccess callback of useMutation.

"use client";
import { useMutation, useQueryClient } from '@tanstack/react-query';
import React from 'react';

async function createItem(newItem) {
  const res = await fetch(
    'https://jsonplaceholder.typicode.com/posts',
    {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(newItem),
    }
  );
  if (!res.ok) throw new Error('Failed to create');
  return res.json();
}

export default function CreateItemButton() {
  const queryClient = useQueryClient();
  const mutation = useMutation({
    mutationFn: createItem,
    onSuccess: () => {
      // Invalidate 'items' query to refetch the list
      queryClient.invalidateQueries({ queryKey: ['items'] });
      alert('Item created and list will refetch!');
    },
  });

  const handleClick = () => {
    mutation.mutate({ title: 'New Item', body: '...' });
  };

  return (
    <button onClick={handleClick} disabled={mutation.isPending}>
      {mutation.isPending ? 'Creating...' : 'Create Item'}
    </button>
  );
}

Beyond the Basics

React Query offers many more advanced features to build highly performant and user-friendly data experiences:

  • Optimistic Updates: Update UI before server response for instant feedback.
  • Pagination/Infinite Queries: Efficiently load large datasets.
  • Dependent Queries: Fetch data based on results of another query.
  • Query Devtools: A browser extension for inspecting cache and queries.

Query Hook Check

You've learned about useQuery and useMutation.

Which of the following statements about React Query hooks are TRUE?

Lesson Summary

In this lesson, we explored React Query (TanStack Query), a powerful library for managing server state. You learned how to:

  • Set up the QueryClientProvider.
  • Fetch data using the useQuery hook with query keys.
  • Handle loading and error states for a better UX.
  • Mutate data on the server with useMutation.
  • Keep your cache fresh by invalidating queries after mutations.

React Query significantly simplifies data fetching and synchronization, making your Next.js apps faster and more robust!

Часто задаваемые вопросы

Урок «React Query для состояния сервера» бесплатный?

Да — полный текст урока «React Query для состояния сервера» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Next.js 15 Fullstack Web Apps, подпишись на CoddyKit PRO. Курс Next.js 15 Fullstack Web Apps содержит 4 уроков всего.

Чему я научусь в уроке «React Query для состояния сервера»?

Управляйте получением, кэшированием и синхронизацией данных на стороне сервера с помощью React Query (TanStack Query). Ты практикуешь Next.js 15 Fullstack Web Apps с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Next.js 15 Fullstack Web Apps?

Предыдущий опыт не требуется. Next.js 15 Fullstack Web Apps на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «React Query для состояния сервера»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Next.js 15 Fullstack Web Apps?

Да. Каждый урок Next.js 15 Fullstack Web Apps включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. React Query для состояния сервера
  2. Состояние на стороне клиента с Zustand/Jotai
  3. Стратегии кэширования на стороне сервера
  4. Оптимистичные обновления и аннулирование кэша
← Назад к Next.js 15 Fullstack Web Apps