RTK Query și alternativele

Ce este RTK Query

RTK Query e partea din Redux Toolkit care se ocupă de server state: aduce date de la API, le ține în cache, deduplică request-urile, gestionează loading/error și reîmprospătează automat după mutații. E echivalentul lui TanStack Query, dar construit peste Redux.

Ideea: nu mai scrii useEffect + fetch + useState pentru loading + reducer pentru date. Descrii endpoint-urile o singură dată, iar RTK Query generează hook-urile.

Un API complet

// shared/api/base-api.ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  tagTypes: ['Post'],
  endpoints: build => ({
    getPosts: build.query<Post[], { page: number }>({
      query: ({ page }) => `posts?page=${page}`,
      providesTags: result => [
        ...(result ?? []).map(p => ({ type: 'Post' as const, id: p.id })),
        { type: 'Post', id: 'LIST' },
      ],
    }),
    addPost: build.mutation<Post, NewPost>({
      query: body => ({ url: 'posts', method: 'POST', body }),
      invalidatesTags: [{ type: 'Post', id: 'LIST' }],
    }),
  }),
})

export const { useGetPostsQuery, useAddPostMutation } = api

'use client'
const { data, isLoading, error } = useGetPostsQuery({ page })
const [addPost, { isLoading: saving }] = useAddPostMutation()

Tag-urile — cum știe ce să reîmprospăteze

{ type: 'Post' } fără id invalidează toate postările; { type: 'Post', id: 1 } doar postarea 1. E același principiu ca cacheTag / updateTag din Next și queryKey / invalidateQueries din TanStack Query.

Alternativele — comparație

Recomandarea practică:

1. În Next.js App Router, începe cu Server Components pentru date afișate și Server Actions pentru mutații.
2. Ai nevoie de date vii pe client (polling, infinite scroll, dashboard) → TanStack Query.
3. Proiectul folosește deja Redux → RTK Query, ca să nu ai două sisteme.
4. API GraphQL → Apollo sau urql.

Greșeli frecvente

• Să copiezi rezultatul unui query într-un slice Redux sau în useState — două surse de adevăr.
• Tag-uri lipsă → după o mutație, lista nu se actualizează.
• Un singur createApi per aplicație; endpoint-urile se adaugă cu injectEndpoints din fiecare feature.

Pe scurt

• RTK Query = server state peste Redux; endpoint-uri → hook-uri generate.
• providesTags + invalidatesTags = reîmprospătare automată după mutații.
• Alternative: TanStack Query (implicit pe client), SWR (simplu), Apollo (GraphQL), Server Components (Next).

Surse oficiale

• RTK Query — Overview
• RTK Query — Automated Re-fetching
• RTK Query — Comparison with Other Tools
• SWR