create-react-starter-kit 1.0.5 → 1.0.7

package/templates/__when_apiLayer_axios__/src/services/http/client.ts.ejs

@@ -0,0 +1,174 @@
+import axios<% if (isTypeScript) { %>, {
+  type AxiosError,
+  type AxiosInstance,
+  type AxiosRequestConfig,
+  type InternalAxiosRequestConfig,
+}<% } %> from 'axios';
+import { env } from '@/config/env';
+import { ApiError, mapStatusToCode } from './errors';
+
+const REQUEST_ID_HEADER = 'X-Request-Id';
+
+/**
+ * Swap this for your real auth storage (cookie, memory store, secure storage).
+ * Keep token reads out of React components — the HTTP layer owns them.
+ */
+function getAccessToken()<% if (isTypeScript) { %>: string | null<% } %> {
+  if (typeof window === 'undefined') return null;
+  return window.localStorage.getItem('access_token');
+}
+
+function createRequestId()<% if (isTypeScript) { %>: string<% } %> {
+  if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) {
+    return crypto.randomUUID();
+  }
+  return `req_${Date.now()}_${Math.random().toString(16).slice(2)}`;
+}
+
+function toApiError(error<% if (isTypeScript) { %>: unknown<% } %>)<% if (isTypeScript) { %>: ApiError<% } %> {
+  if (error instanceof ApiError) return error;
+
+  if (axios.isAxiosError(error)) {
+    const axiosError = error<% if (isTypeScript) { %> as AxiosError<{ message?: string; errors?: unknown }><% } %>;
+    const status = axiosError.response?.status;
+    const requestId =
+      (axiosError.config?.headers?.[REQUEST_ID_HEADER]<% if (isTypeScript) { %> as string | undefined<% } %>) ??
+      undefined;
+
+    if (axiosError.code === 'ECONNABORTED') {
+      return new ApiError({
+        message: 'Request timed out. Please try again.',
+        code: 'TIMEOUT',
+        requestId,
+        cause: error,
+      });
+    }
+
+    if (!axiosError.response) {
+      return new ApiError({
+        message: 'Network error. Check your connection and try again.',
+        code: 'NETWORK',
+        requestId,
+        cause: error,
+      });
+    }
+
+    const message =
+      axiosError.response.data?.message ||
+      axiosError.message ||
+      `Request failed with status ${status}`;
+
+    return new ApiError({
+      message,
+      status,
+      code: mapStatusToCode(status),
+      details: axiosError.response.data?.errors ?? axiosError.response.data,
+      requestId,
+      cause: error,
+    });
+  }
+
+  return new ApiError({
+    message: error instanceof Error ? error.message : 'Unexpected API error',
+    cause: error,
+  });
+}
+
+export const apiClient<% if (isTypeScript) { %>: AxiosInstance<% } %> = axios.create({
+  baseURL: env.apiBaseUrl,
+  timeout: 15_000,
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'application/json',
+  },
+  // Enable when your API uses cookie sessions across origins:
+  // withCredentials: true,
+});
+
+apiClient.interceptors.request.use((config<% if (isTypeScript) { %>: InternalAxiosRequestConfig<% } %>) => {
+  const headers = config.headers ?? {};
+  const requestId = createRequestId();
+  headers[REQUEST_ID_HEADER] = requestId;
+
+  const token = getAccessToken();
+  if (token) {
+    headers.Authorization = `Bearer ${token}`;
+  }
+
+  config.headers = headers;
+  return config;
+});
+
+apiClient.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    const apiError = toApiError(error);
+
+    // Central place to react to auth expiry (redirect, toast, refresh flow).
+    if (apiError.isUnauthorized && typeof window !== 'undefined') {
+      window.dispatchEvent(new CustomEvent('auth:unauthorized', { detail: apiError }));
+    }
+
+    if (import.meta.env.MODE !== 'production') {
+      console.error('[api]', {
+        message: apiError.message,
+        status: apiError.status,
+        code: apiError.code,
+        requestId: apiError.requestId,
+      });
+    }
+
+    return Promise.reject(apiError);
+  },
+);
+
+<% if (isTypeScript) { -%>
+export type RequestOptions = AxiosRequestConfig & {
+  signal?: AbortSignal;
+};
+<% } -%>
+
+export async function apiGet<% if (isTypeScript) { %><T = unknown><% } %>(
+  path<% if (isTypeScript) { %>: string<% } %>,
+  options<% if (isTypeScript) { %>?: RequestOptions<% } %>,
+)<% if (isTypeScript) { %>: Promise<T><% } %> {
+  const { data } = await apiClient.get<% if (isTypeScript) { %><T><% } %>(path, options);
+  return data;
+}
+
+export async function apiPost<% if (isTypeScript) { %><T = unknown, B = unknown><% } %>(
+  path<% if (isTypeScript) { %>: string<% } %>,
+  body<% if (isTypeScript) { %>?: B<% } %>,
+  options<% if (isTypeScript) { %>?: RequestOptions<% } %>,
+)<% if (isTypeScript) { %>: Promise<T><% } %> {
+  const { data } = await apiClient.post<% if (isTypeScript) { %><T><% } %>(path, body, options);
+  return data;
+}
+
+export async function apiPut<% if (isTypeScript) { %><T = unknown, B = unknown><% } %>(
+  path<% if (isTypeScript) { %>: string<% } %>,
+  body<% if (isTypeScript) { %>?: B<% } %>,
+  options<% if (isTypeScript) { %>?: RequestOptions<% } %>,
+)<% if (isTypeScript) { %>: Promise<T><% } %> {
+  const { data } = await apiClient.put<% if (isTypeScript) { %><T><% } %>(path, body, options);
+  return data;
+}
+
+export async function apiPatch<% if (isTypeScript) { %><T = unknown, B = unknown><% } %>(
+  path<% if (isTypeScript) { %>: string<% } %>,
+  body<% if (isTypeScript) { %>?: B<% } %>,
+  options<% if (isTypeScript) { %>?: RequestOptions<% } %>,
+)<% if (isTypeScript) { %>: Promise<T><% } %> {
+  const { data } = await apiClient.patch<% if (isTypeScript) { %><T><% } %>(path, body, options);
+  return data;
+}
+
+export async function apiDelete<% if (isTypeScript) { %><T = unknown><% } %>(
+  path<% if (isTypeScript) { %>: string<% } %>,
+  options<% if (isTypeScript) { %>?: RequestOptions<% } %>,
+)<% if (isTypeScript) { %>: Promise<T><% } %> {
+  const { data } = await apiClient.delete<% if (isTypeScript) { %><T><% } %>(path, options);
+  return data;
+}
+
+export { ApiError };

package/templates/__when_apiLayer_axios__/src/services/http/errors.ts.ejs

@@ -0,0 +1,81 @@
+<% if (isTypeScript) { -%>
+export type ApiErrorCode =
+  | 'NETWORK'
+  | 'TIMEOUT'
+  | 'UNAUTHORIZED'
+  | 'FORBIDDEN'
+  | 'NOT_FOUND'
+  | 'VALIDATION'
+  | 'SERVER'
+  | 'UNKNOWN';
+
+export class ApiError extends Error {
+  readonly status?: number;
+  readonly code: ApiErrorCode;
+  readonly details?: unknown;
+  readonly requestId?: string;
+
+  constructor(options: {
+    message: string;
+    status?: number;
+    code?: ApiErrorCode;
+    details?: unknown;
+    requestId?: string;
+    cause?: unknown;
+  }) {
+    super(options.message, options.cause ? { cause: options.cause } : undefined);
+    this.name = 'ApiError';
+    this.status = options.status;
+    this.code = options.code ?? 'UNKNOWN';
+    this.details = options.details;
+    this.requestId = options.requestId;
+  }
+
+  get isUnauthorized() {
+    return this.status === 401 || this.code === 'UNAUTHORIZED';
+  }
+
+  get isRetryable() {
+    return this.code === 'NETWORK' || this.code === 'TIMEOUT' || this.code === 'SERVER';
+  }
+}
+
+export function mapStatusToCode(status?: number): ApiErrorCode {
+  if (!status) return 'NETWORK';
+  if (status === 401) return 'UNAUTHORIZED';
+  if (status === 403) return 'FORBIDDEN';
+  if (status === 404) return 'NOT_FOUND';
+  if (status === 422 || status === 400) return 'VALIDATION';
+  if (status >= 500) return 'SERVER';
+  return 'UNKNOWN';
+}
+<% } else { -%>
+export class ApiError extends Error {
+  constructor(options) {
+    super(options.message, options.cause ? { cause: options.cause } : undefined);
+    this.name = 'ApiError';
+    this.status = options.status;
+    this.code = options.code ?? 'UNKNOWN';
+    this.details = options.details;
+    this.requestId = options.requestId;
+  }
+
+  get isUnauthorized() {
+    return this.status === 401 || this.code === 'UNAUTHORIZED';
+  }
+
+  get isRetryable() {
+    return this.code === 'NETWORK' || this.code === 'TIMEOUT' || this.code === 'SERVER';
+  }
+}
+
+export function mapStatusToCode(status) {
+  if (!status) return 'NETWORK';
+  if (status === 401) return 'UNAUTHORIZED';
+  if (status === 403) return 'FORBIDDEN';
+  if (status === 404) return 'NOT_FOUND';
+  if (status === 422 || status === 400) return 'VALIDATION';
+  if (status >= 500) return 'SERVER';
+  return 'UNKNOWN';
+}
+<% } -%>

package/templates/__when_apiLayer_axios__/src/services/http/index.ts.ejs

@@ -0,0 +1,5 @@
+export { apiClient, apiGet, apiPost, apiPut, apiPatch, apiDelete, ApiError } from './client';
+<% if (isTypeScript) { -%>
+export type { ApiErrorCode } from './errors';
+export type { RequestOptions } from './client';
+<% } -%>

package/templates/__when_apiLayer_fetch__/src/services/api.ts.ejs

@@ -0,0 +1,22 @@
+import { apiGet, apiPost } from '@/services/http';
+<% if (isTypeScript) { -%>
+import type { FeedbackPayload, Post } from '@/types/models';
+<% } -%>
+
+/**
+ * Domain API methods — keep React components free of raw URLs and HTTP details.
+ */
+export async function fetchPosts(signal<% if (isTypeScript) { %>?: AbortSignal<% } %>) {
+  return apiGet<% if (isTypeScript) { %><Post[]><% } %>('/posts?_limit=5', { signal });
+}
+
+export async function createFeedback(
+  payload<% if (isTypeScript) { %>: FeedbackPayload<% } %>,
+  signal<% if (isTypeScript) { %>?: AbortSignal<% } %>,
+) {
+  return apiPost('/posts', payload, { signal });
+}
+
+<% if (isTypeScript) { -%>
+export type { FeedbackPayload, Post } from '@/types/models';
+<% } -%>

package/templates/__when_apiLayer_fetch__/src/services/http/client.ts.ejs

@@ -0,0 +1,195 @@
+import { env } from '@/config/env';
+import { ApiError, mapStatusToCode } from './errors';
+
+const REQUEST_ID_HEADER = 'X-Request-Id';
+const DEFAULT_TIMEOUT_MS = 15_000;
+
+<% if (isTypeScript) { -%>
+export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
+
+export interface RequestOptions extends Omit<RequestInit, 'method' | 'body'> {
+  method?: HttpMethod;
+  body?: unknown;
+  timeoutMs?: number;
+  /** Skip JSON Content-Type / body serialization when sending FormData, etc. */
+  rawBody?: boolean;
+}
+<% } -%>
+
+/**
+ * Swap this for your real auth storage (cookie, memory store, secure storage).
+ */
+function getAccessToken()<% if (isTypeScript) { %>: string | null<% } %> {
+  if (typeof window === 'undefined') return null;
+  return window.localStorage.getItem('access_token');
+}
+
+function createRequestId()<% if (isTypeScript) { %>: string<% } %> {
+  if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) {
+    return crypto.randomUUID();
+  }
+  return `req_${Date.now()}_${Math.random().toString(16).slice(2)}`;
+}
+
+async function parseErrorBody(response<% if (isTypeScript) { %>: Response<% } %>)<% if (isTypeScript) { %>: Promise<unknown><% } %> {
+  const contentType = response.headers.get('content-type') ?? '';
+  if (contentType.includes('application/json')) {
+    try {
+      return await response.json();
+    } catch {
+      return undefined;
+    }
+  }
+  try {
+    return await response.text();
+  } catch {
+    return undefined;
+  }
+}
+
+/**
+ * Shared fetch wrapper with auth header, request IDs, timeout, and normalized errors.
+ * Prefer domain helpers in `services/api` over calling this from components.
+ */
+export async function request<% if (isTypeScript) { %><T = unknown><% } %>(
+  path<% if (isTypeScript) { %>: string<% } %>,
+  options<% if (isTypeScript) { %>: RequestOptions = {}<% } else { %> = {}<% } %>,
+)<% if (isTypeScript) { %>: Promise<T><% } %> {
+  const {
+    method = 'GET',
+    body,
+    headers: initHeaders,
+    timeoutMs = DEFAULT_TIMEOUT_MS,
+    rawBody = false,
+    signal: userSignal,
+    ...rest
+  } = options;
+
+  const requestId = createRequestId();
+  const headers = new Headers(initHeaders);
+  headers.set(REQUEST_ID_HEADER, requestId);
+  headers.set('Accept', 'application/json');
+
+  const token = getAccessToken();
+  if (token) {
+    headers.set('Authorization', `Bearer ${token}`);
+  }
+
+  let payload<% if (isTypeScript) { %>: BodyInit | undefined<% } %>;
+  if (body !== undefined && body !== null) {
+    if (rawBody) {
+      payload = body<% if (isTypeScript) { %> as BodyInit<% } %>;
+    } else {
+      headers.set('Content-Type', 'application/json');
+      payload = JSON.stringify(body);
+    }
+  }
+
+  const controller = new AbortController();
+  const onAbort = () => controller.abort();
+  if (userSignal) {
+    if (userSignal.aborted) controller.abort();
+    else userSignal.addEventListener('abort', onAbort, { once: true });
+  }
+  const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
+
+  try {
+    const response = await fetch(`${env.apiBaseUrl}${path}`, {
+      ...rest,
+      method,
+      headers,
+      body: payload,
+      signal: controller.signal,
+    });
+
+    if (!response.ok) {
+      const details = await parseErrorBody(response);
+      const message =
+        details && typeof details === 'object' && 'message' in details && typeof details.message === 'string'
+          ? details.message
+          : `Request failed with status ${response.status}`;
+
+      const apiError = new ApiError({
+        message,
+        status: response.status,
+        code: mapStatusToCode(response.status),
+        details,
+        requestId,
+      });
+
+      if (apiError.isUnauthorized && typeof window !== 'undefined') {
+        window.dispatchEvent(new CustomEvent('auth:unauthorized', { detail: apiError }));
+      }
+
+      throw apiError;
+    }
+
+    if (response.status === 204) {
+      return undefined<% if (isTypeScript) { %> as T<% } %>;
+    }
+
+    return (await response.json())<% if (isTypeScript) { %> as T<% } %>;
+  } catch (error) {
+    if (error instanceof ApiError) throw error;
+
+    if (error instanceof DOMException && error.name === 'AbortError') {
+      const timedOut = !userSignal?.aborted;
+      throw new ApiError({
+        message: timedOut ? 'Request timed out. Please try again.' : 'Request was cancelled.',
+        code: timedOut ? 'TIMEOUT' : 'NETWORK',
+        requestId,
+        cause: error,
+      });
+    }
+
+    throw new ApiError({
+      message: error instanceof Error ? error.message : 'Network error. Check your connection and try again.',
+      code: 'NETWORK',
+      requestId,
+      cause: error,
+    });
+  } finally {
+    clearTimeout(timeoutId);
+    userSignal?.removeEventListener('abort', onAbort);
+  }
+}
+
+export async function apiGet<% if (isTypeScript) { %><T = unknown><% } %>(
+  path<% if (isTypeScript) { %>: string<% } %>,
+  options<% if (isTypeScript) { %>?: Omit<RequestOptions, 'method' | 'body'><% } %>,
+)<% if (isTypeScript) { %>: Promise<T><% } %> {
+  return request<% if (isTypeScript) { %><T><% } %>(path, { ...options, method: 'GET' });
+}
+
+export async function apiPost<% if (isTypeScript) { %><T = unknown, B = unknown><% } %>(
+  path<% if (isTypeScript) { %>: string<% } %>,
+  body<% if (isTypeScript) { %>?: B<% } %>,
+  options<% if (isTypeScript) { %>?: Omit<RequestOptions, 'method' | 'body'><% } %>,
+)<% if (isTypeScript) { %>: Promise<T><% } %> {
+  return request<% if (isTypeScript) { %><T><% } %>(path, { ...options, method: 'POST', body });
+}
+
+export async function apiPut<% if (isTypeScript) { %><T = unknown, B = unknown><% } %>(
+  path<% if (isTypeScript) { %>: string<% } %>,
+  body<% if (isTypeScript) { %>?: B<% } %>,
+  options<% if (isTypeScript) { %>?: Omit<RequestOptions, 'method' | 'body'><% } %>,
+)<% if (isTypeScript) { %>: Promise<T><% } %> {
+  return request<% if (isTypeScript) { %><T><% } %>(path, { ...options, method: 'PUT', body });
+}
+
+export async function apiPatch<% if (isTypeScript) { %><T = unknown, B = unknown><% } %>(
+  path<% if (isTypeScript) { %>: string<% } %>,
+  body<% if (isTypeScript) { %>?: B<% } %>,
+  options<% if (isTypeScript) { %>?: Omit<RequestOptions, 'method' | 'body'><% } %>,
+)<% if (isTypeScript) { %>: Promise<T><% } %> {
+  return request<% if (isTypeScript) { %><T><% } %>(path, { ...options, method: 'PATCH', body });
+}
+
+export async function apiDelete<% if (isTypeScript) { %><T = unknown><% } %>(
+  path<% if (isTypeScript) { %>: string<% } %>,
+  options<% if (isTypeScript) { %>?: Omit<RequestOptions, 'method' | 'body'><% } %>,
+)<% if (isTypeScript) { %>: Promise<T><% } %> {
+  return request<% if (isTypeScript) { %><T><% } %>(path, { ...options, method: 'DELETE' });
+}
+
+export { ApiError };

package/templates/__when_apiLayer_fetch__/src/services/http/errors.ts.ejs

@@ -0,0 +1,81 @@
+<% if (isTypeScript) { -%>
+export type ApiErrorCode =
+  | 'NETWORK'
+  | 'TIMEOUT'
+  | 'UNAUTHORIZED'
+  | 'FORBIDDEN'
+  | 'NOT_FOUND'
+  | 'VALIDATION'
+  | 'SERVER'
+  | 'UNKNOWN';
+
+export class ApiError extends Error {
+  readonly status?: number;
+  readonly code: ApiErrorCode;
+  readonly details?: unknown;
+  readonly requestId?: string;
+
+  constructor(options: {
+    message: string;
+    status?: number;
+    code?: ApiErrorCode;
+    details?: unknown;
+    requestId?: string;
+    cause?: unknown;
+  }) {
+    super(options.message, options.cause ? { cause: options.cause } : undefined);
+    this.name = 'ApiError';
+    this.status = options.status;
+    this.code = options.code ?? 'UNKNOWN';
+    this.details = options.details;
+    this.requestId = options.requestId;
+  }
+
+  get isUnauthorized() {
+    return this.status === 401 || this.code === 'UNAUTHORIZED';
+  }
+
+  get isRetryable() {
+    return this.code === 'NETWORK' || this.code === 'TIMEOUT' || this.code === 'SERVER';
+  }
+}
+
+export function mapStatusToCode(status?: number): ApiErrorCode {
+  if (!status) return 'NETWORK';
+  if (status === 401) return 'UNAUTHORIZED';
+  if (status === 403) return 'FORBIDDEN';
+  if (status === 404) return 'NOT_FOUND';
+  if (status === 422 || status === 400) return 'VALIDATION';
+  if (status >= 500) return 'SERVER';
+  return 'UNKNOWN';
+}
+<% } else { -%>
+export class ApiError extends Error {
+  constructor(options) {
+    super(options.message, options.cause ? { cause: options.cause } : undefined);
+    this.name = 'ApiError';
+    this.status = options.status;
+    this.code = options.code ?? 'UNKNOWN';
+    this.details = options.details;
+    this.requestId = options.requestId;
+  }
+
+  get isUnauthorized() {
+    return this.status === 401 || this.code === 'UNAUTHORIZED';
+  }
+
+  get isRetryable() {
+    return this.code === 'NETWORK' || this.code === 'TIMEOUT' || this.code === 'SERVER';
+  }
+}
+
+export function mapStatusToCode(status) {
+  if (!status) return 'NETWORK';
+  if (status === 401) return 'UNAUTHORIZED';
+  if (status === 403) return 'FORBIDDEN';
+  if (status === 404) return 'NOT_FOUND';
+  if (status === 422 || status === 400) return 'VALIDATION';
+  if (status >= 500) return 'SERVER';
+  return 'UNKNOWN';
+}
+<% } -%>

package/templates/__when_apiLayer_fetch__/src/services/http/index.ts.ejs

@@ -0,0 +1,5 @@
+export { request, apiGet, apiPost, apiPut, apiPatch, apiDelete, ApiError } from './client';
+<% if (isTypeScript) { -%>
+export type { ApiErrorCode } from './errors';
+export type { HttpMethod, RequestOptions } from './client';
+<% } -%>

package/templates/__when_buildTool_vite__/vite.config.ts.ejs

@@ -28,7 +28,15 @@ export default mergeConfig(
       globals: true,
       environment: 'jsdom',
       setupFiles: './tests/setup.<%= ext %>',
-      exclude: ['**/node_modules/**', '**/dist/**', '**/e2e/**', '**/*.e2e.*'],
+      include: ['tests/**/*.{test,spec}.{<%= isTypeScript ? 'ts,tsx' : 'js,jsx' %>}'],
+      exclude: [
+        '**/node_modules/**',
+        '**/dist/**',
+        '**/build/**',
+        '**/tests/e2e/**',
+        '**/e2e/**',
+        '**/*.e2e.*',
+      ],
     },
   }),
 );

package/templates/__when_buildTool_webpack__/webpack.config.js.ejs

@@ -105,7 +105,7 @@ export default (_env, argv) => {
       }),
     ],
     devServer: {
-      port: 5173,
+      port: 3000,
       historyApiFallback: true,
       hot: true,
       open: false,

package/templates/__when_e2eTesting_cypress__/cypress.config.ts.ejs

@@ -1,8 +1,9 @@
 import { defineConfig } from 'cypress';
 
+<% const e2ePort = buildTool === 'webpack' ? 3000 : 5173; -%>
 export default defineConfig({
   e2e: {
-    baseUrl: 'http://127.0.0.1:5173',
+    baseUrl: 'http://127.0.0.1:<%= e2ePort %>',
     supportFile: false,
   },
 });

package/templates/__when_e2eTesting_playwright__/playwright.config.ts.ejs

@@ -3,6 +3,7 @@ import { defineConfig, devices } from '@playwright/test';
 /**
  * Run once before first e2e: `<%= packageManager === 'npm' ? 'npm run' : packageManager %> test:e2e:install`
  */
+<% const e2ePort = buildTool === 'webpack' ? 3000 : 5173; -%>
 export default defineConfig({
   testDir: './tests/e2e',
   fullyParallel: true,
@@ -10,7 +11,7 @@ export default defineConfig({
   retries: process.env.CI ? 1 : 0,
   reporter: process.env.CI ? 'github' : 'list',
   use: {
-    baseURL: 'http://127.0.0.1:5173',
+    baseURL: 'http://127.0.0.1:<%= e2ePort %>',
     trace: 'on-first-retry',
     screenshot: 'only-on-failure',
   },
@@ -19,13 +20,13 @@ export default defineConfig({
       '<%= buildTool === 'vite'
         ? 'npx vite --host 127.0.0.1 --port 5173'
         : buildTool === 'webpack'
-          ? 'npx webpack serve --mode development --port 5173'
+          ? 'npx webpack serve --mode development --port 3000'
           : packageManager === 'npm'
             ? 'npm run dev'
             : packageManager === 'yarn'
               ? 'yarn dev'
               : 'pnpm dev' %>',
-    url: 'http://127.0.0.1:5173',
+    url: 'http://127.0.0.1:<%= e2ePort %>',
     reuseExistingServer: !process.env.CI,
     timeout: 120_000,
   },

package/templates/__when_serverState_rtk-query__/src/store/postsApi.ts.ejs

@@ -1,19 +1,42 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 <% if (isTypeScript) { -%>
-import type { Post } from '@/services/api';
+import type { FeedbackPayload, Post } from '@/types/models';
 <% } -%>
 import { env } from '@/config/env';
 
-const baseUrl = env.apiBaseUrl;
-
+/**
+ * RTK Query owns HTTP for this stack — no separate Axios/Fetch client is generated.
+ * Use `prepareHeaders` for auth and `tagTypes` for cache invalidation.
+ */
 export const postsApi = createApi({
   reducerPath: 'postsApi',
-  baseQuery: fetchBaseQuery({ baseUrl }),
+  baseQuery: fetchBaseQuery({
+    baseUrl: env.apiBaseUrl,
+    prepareHeaders: (headers) => {
+      const token =
+        typeof window !== 'undefined' ? window.localStorage.getItem('access_token') : null;
+      if (token) {
+        headers.set('Authorization', `Bearer ${token}`);
+      }
+      headers.set('Accept', 'application/json');
+      return headers;
+    },
+  }),
+  tagTypes: ['Posts'],
   endpoints: (builder) => ({
     getPosts: builder.query<% if (isTypeScript) { %><Post[], void><% } %>({
       query: () => '/posts?_limit=5',
+      providesTags: ['Posts'],
+    }),
+    createFeedback: builder.mutation<% if (isTypeScript) { %><{ id: number }, FeedbackPayload><% } %>({
+      query: (body) => ({
+        url: '/posts',
+        method: 'POST',
+        body,
+      }),
+      invalidatesTags: ['Posts'],
     }),
   }),
 });
 
-export const { useGetPostsQuery } = postsApi;
+export const { useGetPostsQuery, useCreateFeedbackMutation } = postsApi;