OkulUp React Query Hooks Pattern

Proje: OkulUp · Hub: OkulUp — Conventions

React Query Hooks Pattern

Query Key Factory

export const resourceKeys = {
  all: ['resources'] as const,
  lists: () => [...resourceKeys.all, 'list'] as const,
  list: (filters?: Filters) => [...resourceKeys.lists(), filters] as const,
  detail: (id: number) => [...resourceKeys.all, 'detail', id] as const,
};

Hook Yapıları

List Hook

export function useResources(filters?: Filters) {
  return useQuery({
    queryKey: resourceKeys.list(filters),
    queryFn: () => getResources(filters),
  });
}

Detail Hook

export function useResource(id: number) {
  return useQuery({
    queryKey: resourceKeys.detail(id),
    queryFn: () => getResource(id),
    enabled: !!id,  // id yoksa fetch etme
  });
}

Mutation Hook

export function useCreateResource() {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: createResource,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: resourceKeys.lists() });
    },
  });
}

Dosya Lokasyonu

src/hooks/use{Resource}s.ts — çoğul

Hooks Index

Tüm hooklar src/hooks/index.ts’ten barrel export ediliyor. Yeni hook eklenince mutlaka index’e eklenmeli.

Önemli Notlar

• staleTime genellikle default (0) — sık değişen data
• mobileConfig: 30 dakika stale (sık değişmiyor)
• Mutation sonrası invalidateQueries ile cache sıfırlanıyor

Related

• service-layer-pattern — queryFn’de kullanılan servis fonksiyonları
• component-architecture — hooks hook’u kullanan component’ler