TanStack React Query ile İstek Tekilleştirme ve API Önbellekleme

// Network tab without deduplication:
GET /api/user/profile      (Header component)
GET /api/user/profile      (NotificationBell component)
GET /api/accounts           (BalanceCard component)
GET /api/accounts           (TransactionList component)
GET /api/transactions       (TransactionList component)
GET /api/notifications      (NotificationBell component)
GET /api/user/profile      (Greeting component)  // 3rd call!

// queryClient.ts
import { QueryClient } from '@tanstack/react-query';

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000,        // 5 minutes
      gcTime: 10 * 60 * 1000,           // 10 minutes (formerly cacheTime)
      retry: 2,
      retryDelay: (attemptIndex) =>
        Math.min(1000 * 2 ** attemptIndex, 10000),
      refetchOnWindowFocus: false,       // Mobile doesn't have "window focus"
      refetchOnReconnect: true,          // But it does lose connectivity
      networkMode: 'offlineFirst',
    },
    mutations: {
      retry: 0,                          // Never retry mutations in banking
    },
  },
});

// hooks/useAccountData.ts
export function useAccountData(accountId: string) {
  return useQuery({
    queryKey: ['account', accountId],
    queryFn: () => accountApi.getAccount(accountId),
    staleTime: 5 * 60 * 1000,
  });
}

// Used in BalanceCard.tsx
const { data: account } = useAccountData('ACC-001');

// Used in TransactionList.tsx — SAME query key, NO duplicate request
const { data: account } = useAccountData('ACC-001');

// queryKeys.ts
export const queryKeys = {
  user: {
    all: ['user'] as const,
    profile: () => [...queryKeys.user.all, 'profile'] as const,
    preferences: () => [...queryKeys.user.all, 'preferences'] as const,
  },
  accounts: {
    all: ['accounts'] as const,
    list: () => [...queryKeys.accounts.all, 'list'] as const,
    detail: (id: string) => [...queryKeys.accounts.all, 'detail', id] as const,
    balance: (id: string) => [...queryKeys.accounts.all, 'balance', id] as const,
  },
  transactions: {
    all: ['transactions'] as const,
    list: (accountId: string, filters?: TransactionFilters) =>
      [...queryKeys.transactions.all, 'list', accountId, filters] as const,
    detail: (id: string) =>
      [...queryKeys.transactions.all, 'detail', id] as const,
  },
  notifications: {
    all: ['notifications'] as const,
    unread: () => [...queryKeys.notifications.all, 'unread'] as const,
  },
};

// After a successful transfer
await queryClient.invalidateQueries({
  queryKey: queryKeys.accounts.balance(fromAccountId),
});
await queryClient.invalidateQueries({
  queryKey: queryKeys.accounts.balance(toAccountId),
});
await queryClient.invalidateQueries({
  queryKey: queryKeys.transactions.list(fromAccountId),
});

export function useMarkNotificationRead() {
  return useMutation({
    mutationFn: (notificationId: string) =>
      notificationApi.markRead(notificationId),

    onMutate: async (notificationId) => {
      // Cancel outgoing refetches
      await queryClient.cancelQueries({
        queryKey: queryKeys.notifications.all,
      });

      // Snapshot previous value
      const previousNotifications = queryClient.getQueryData(
        queryKeys.notifications.unread()
      );

      // Optimistically update
      queryClient.setQueryData(
        queryKeys.notifications.unread(),
        (old: Notification[]) =>
          old?.filter((n) => n.id !== notificationId) ?? []
      );

      return { previousNotifications };
    },

    onError: (_err, _id, context) => {
      // Rollback on error
      queryClient.setQueryData(
        queryKeys.notifications.unread(),
        context?.previousNotifications
      );
    },

    onSettled: () => {
      queryClient.invalidateQueries({
        queryKey: queryKeys.notifications.all,
      });
    },
  });
}

// In the account list screen
function AccountListItem({ account }: { account: Account }) {
  const queryClient = useQueryClient();

  const handlePressIn = () => {
    // Prefetch when the user starts pressing, not when they navigate
    queryClient.prefetchQuery({
      queryKey: queryKeys.transactions.list(account.id),
      queryFn: () => transactionApi.getRecent(account.id),
      staleTime: 5 * 60 * 1000,
    });
  };

  return (
    <Pressable onPressIn={handlePressIn} onPress={() => navigate(account.id)}>
      <AccountCard account={account} />
    </Pressable>
  );
}