# Rtk Query

> Use when building Redux Toolkit & RTK Query API slices, tag invalidation, caching, and server state management.

- Skill: `sahilkhan30/rtk-query` (Agent Skill)
- Install (CLI): `npx skillmds@latest add sahilkhan30/rtk-query`
- Raw SKILL.md: https://api.skillmd.com/api/skills/sahilkhan30/rtk-query/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: SahilKhan30 (https://skillmd.com/u/sahilkhan30)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/sahilkhan30/rtk-query

---


# RTK Query & Server State Management Skill

## Purpose
Standardize server state management, caching, tag invalidation, and request header generation using RTK Query (`createApi`).

---

## 1. Rules of Engagement

### MANDATORY
- Use RTK Query (`createApi`) exclusively for server state data fetching and mutations.
- **Tag Ownership & Circular Dependency Prevention**: Define tag constants in dedicated tag registry modules (e.g., `src/services/tags/transactionTags.ts`) rather than importing API slice files into each other.
- **Idempotency Header Generation**: For state-mutating requests (`POST`, `PUT`, `DELETE`), pass `X-Idempotency-Key` headers generated per logical operation (`crypto.randomUUID()`).

---

## 2. Shared Tag Registry & API Slice Pattern

```typescript
// src/services/tags/transactionTags.ts
export const TRANSACTION_TAGS = {
  LIST: 'TransactionList' as const,
  DETAIL: 'TransactionDetail' as const,
};

// src/services/api/transactionApi.ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { TRANSACTION_TAGS } from '../tags/transactionTags';

export const transactionApi = createApi({
  reducerPath: 'transactionApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/api/v1' }),
  tagTypes: Object.values(TRANSACTION_TAGS),
  endpoints: (builder) => ({
    getTransactions: builder.query({
      query: (params) => `/transactions?page=${params.page}&size=${params.size}`,
      providesTags: [TRANSACTION_TAGS.LIST],
    }),
    createTransaction: builder.mutation({
      query: ({ body, idempotencyKey }) => ({
        url: '/transactions',
        method: 'POST',
        headers: { 'X-Idempotency-Key': idempotencyKey },
        body,
      }),
      invalidatesTags: [TRANSACTION_TAGS.LIST],
    }),
  }),
});
```