0Pricing
Next.js 15 Fullstack Web Apps · Pelajaran

React Query untuk State Server

Kelola pengambilan data di sisi server, caching, dan sinkronisasi dengan React Query (TanStack Query).

React Query untuk State Server adalah pelajaran Next.js 15 Fullstack Web Apps 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 Next.js 15 Fullstack Web Apps, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Next.js 15 Fullstack Web Apps mencakup 4 pelajaran total.

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

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!

Pertanyaan yang Sering Diajukan

Apakah pelajaran “React Query untuk State Server” gratis?

Ya — teks lengkap “React Query untuk State Server” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Next.js 15 Fullstack Web Apps, upgrade ke CoddyKit PRO. Kursus Next.js 15 Fullstack Web Apps mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “React Query untuk State Server”?

Kelola pengambilan data di sisi server, caching, dan sinkronisasi dengan React Query (TanStack Query). Kamu berlatih Next.js 15 Fullstack Web Apps 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 Next.js 15 Fullstack Web Apps?

Tidak diperlukan pengalaman sebelumnya. Next.js 15 Fullstack Web Apps 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 “React Query untuk State Server” 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 Next.js 15 Fullstack Web Apps ini?

Ya. Setiap pelajaran Next.js 15 Fullstack Web Apps 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

  1. React Query untuk State Server
  2. State Sisi Klien dengan Zustand/Jotai
  3. Strategi Caching Sisi Server
  4. Pembaruan Optimistis dan Invalidasi Cache
← Kembali ke Next.js 15 Fullstack Web Apps