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

// 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],
    }),
  }),
});