query-create

Create TanStack Query

Create query options, mutations, and hooks following the factory pattern.

Instructions

1. Gather Information (if not provided via args):

   • Ask for the feature name (e.g., posts, users)
   • Ask for the query type: query, mutation, or infinite query
   • Ask for the operation (e.g., list, detail, create, update, delete)

2. Create Feature Directory Structure (if new feature):

   src/features/{feature}/
   ├── api/
   │   └── {feature}Api.ts
   ├── queries/
   │   ├── {feature}Queries.ts
   │   └── index.ts
   ├── hooks/
   │   ├── use{Operation}{Feature}.ts
   │   └── index.ts
   ├── types.ts
   └── index.ts
   

3. Create/Update Query Keys in src/lib/query-keys.ts:

   export const queryKeys = {
     {feature}: {
       all: () => ['{feature}'] as const,
       lists: () => [...queryKeys.{feature}.all(), 'list'] as const,
       list: (filters: {Feature}Filters) => [...queryKeys.{feature}.lists(), filters] as const,
       details: () => [...queryKeys.{feature}.all(), 'detail'] as const,
       detail: (id: string) => [...queryKeys.{feature}.details(), id] as const,
     },
   } as const
   

4. Create API Functions in src/features/{feature}/api/{feature}Api.ts:

   import { apiClient } from '@/lib/api-client'
   import type { {Feature}, Create{Feature}Input, Update{Feature}Input, {Feature}Filters } from '../types'
   
   export const {feature}Api = {
     get{Feature}s: async (filters?: {Feature}Filters): Promise<{Feature}[]> => {
       const response = await apiClient.get('/{feature}', { params: filters })
       return response.data
     },
   
     get{Feature}: async (id: string): Promise<{Feature}> => {
       const response = await apiClient.get(`/{feature}/${id}`)
       return response.data
     },
   
     create{Feature}: async (input: Create{Feature}Input): Promise<{Feature}> => {
       const response = await apiClient.post('/{feature}', input)
       return response.data
     },
   
     update{Feature}: async ({ id, ...input }: Update{Feature}Input): Promise<{Feature}> => {
       const response = await apiClient.patch(`/{feature}/${id}`, input)
       return response.data
     },
   
     delete{Feature}: async (id: string): Promise<void> => {
       await apiClient.delete(`/{feature}/${id}`)
     },
   }