Module 07 — Networking & API

🎯 MỤC TIÊU HỌC TẬP

• Hiểu sự khác biệt giữa Fetch API và Axios, biết khi nào dùng cái nào
• Tạo Axios instance với interceptors cho request/response
• Implement token refresh flow hoàn chỉnh, xử lý concurrent 401 đúng cách
• Sử dụng TanStack Query (React Query) cho data fetching, caching, invalidation
• Implement infinite scroll với useInfiniteQuery + FlatList
• Nắm vững REST conventions: HTTP methods, status codes, pagination
• Hiểu cơ bản GraphQL và so sánh Apollo vs urql
• Phân biệt WebSocket, SSE, Long Polling và biết khi nào dùng
• Xử lý error handling patterns chuyên nghiệp trong production
• Handle rate limiting (429) và retry strategies

📖 HƯỚNG DẪN HỌC

⚡ ÔN NHANH

🧭 Vòng lặp học module này

📚 LÝ THUYẾT CHI TIẾT

1. Fetch API — Gotchas quan trọng

Ví dụ sai — code này KHÔNG catch được lỗi 404:

try {
  const response = await fetch('https://api.example.com/users/999');
  const data = await response.json();
  console.log(data);
} catch (error) {
  console.log('Lỗi này KHÔNG BAO GIỜ chạy cho 404');
}

Ví dụ đúng — luôn check response.ok:

const response = await fetch('https://api.example.com/users/999');

if (!response.ok) {
  throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}

const data = await response.json();

Abort request với timeout sử dụng AbortController:

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 10000);

try {
  const response = await fetch('https://api.example.com/data', {
    signal: controller.signal,
  });
  clearTimeout(timeoutId);
  const data = await response.json();
  return data;
} catch (error) {
  if (error.name === 'AbortError') {
    console.log('Request timed out');
  }
  throw error;
}

2. Axios — Instance, Interceptors, Cancel Tokens

2.1 Tạo Axios Instance

Thay vì dùng axios.get() trực tiếp, luôn tạo instance riêng. Điều này cho phép config base URL, headers, timeout một lần duy nhất và reuse khắp app.

import axios from 'axios';
import type { AxiosInstance, AxiosRequestConfig } from 'axios';

const API_BASE_URL = 'https://api.example.com/v1';

const apiClient: AxiosInstance = axios.create({
  baseURL: API_BASE_URL,
  timeout: 15000,
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
  },
});

2.2 Request Interceptor

Request interceptor chạy TRƯỚC mỗi request được gửi đi. Dùng để attach token, add tracking headers, log requests.

apiClient.interceptors.request.use(
  async (config) => {
    const token = await getAccessToken();
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    config.headers['X-Request-ID'] = generateUUID();
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

2.3 Response Interceptor

Response interceptor xử lý response TRƯỚC khi trả về cho caller. Dùng để transform data, handle errors globally, refresh token.

apiClient.interceptors.response.use(
  (response) => {
    return response.data;
  },
  async (error) => {
    if (error.response) {
      switch (error.response.status) {
        case 401:
          break;
        case 403:
          break;
        case 429:
          break;
        case 500:
          break;
      }
    }
    return Promise.reject(error);
  }
);

2.4 Cancel Requests

Trong React Native, cancel request khi user rời screen để tránh memory leak và state update trên unmounted component. Từ Axios v0.22+, dùng AbortController thay cho CancelToken (đã deprecated).

const controller = new AbortController();

apiClient.get('/users', {
  signal: controller.signal,
});

controller.abort();

Trong React component, cleanup khi unmount:

useEffect(() => {
  const controller = new AbortController();

  const fetchData = async () => {
    try {
      const data = await apiClient.get('/users', {
        signal: controller.signal,
      });
      setUsers(data);
    } catch (error) {
      if (!axios.isCancel(error)) {
        setError(error);
      }
    }
  };

  fetchData();

  return () => controller.abort();
}, []);

3. Token Refresh Flow — Chi tiết step by step

3.1 Flow cơ bản

1. Client gửi request với access token trong header Authorization
2. Server trả về 401 Unauthorized (token hết hạn)
3. Client gửi refresh token lên endpoint /auth/refresh
4. Server trả về access token mới + refresh token mới
5. Client lưu tokens mới vào storage
6. Client retry request ban đầu với access token mới

3.2 Vấn đề: Concurrent 401s

3.3 Giải pháp: Queue Mechanism

Dùng một biến flag isRefreshing và một queue chứa các requests đang chờ. Chỉ request đầu tiên nhận 401 mới thực sự gọi refresh. Các requests sau sẽ chờ trong queue và được retry sau khi refresh thành công.

Implementation đầy đủ:

import axios from 'axios';
import type {
  AxiosInstance,
  AxiosError,
  InternalAxiosRequestConfig,
} from 'axios';

const apiClient: AxiosInstance = axios.create({
  baseURL: 'https://api.example.com/v1',
  timeout: 15000,
});

let isRefreshing = false;
let failedQueue: Array<{
  resolve: (token: string) => void;
  reject: (error: AxiosError) => void;
}> = [];

const processQueue = (
  error: AxiosError | null,
  token: string | null
): void => {
  failedQueue.forEach(({ resolve, reject }) => {
    if (error) {
      reject(error);
    } else {
      resolve(token!);
    }
  });
  failedQueue = [];
};

apiClient.interceptors.request.use(async (config) => {
  const token = await TokenStorage.getAccessToken();
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

apiClient.interceptors.response.use(
  (response) => response,
  async (error: AxiosError) => {
    const originalRequest = error.config as InternalAxiosRequestConfig & {
      _retry?: boolean;
    };

    if (error.response?.status !== 401 || originalRequest._retry) {
      return Promise.reject(error);
    }

    if (isRefreshing) {
      return new Promise<string>((resolve, reject) => {
        failedQueue.push({ resolve, reject });
      }).then((token) => {
        originalRequest.headers.Authorization = `Bearer ${token}`;
        return apiClient(originalRequest);
      });
    }

    originalRequest._retry = true;
    isRefreshing = true;

    try {
      const refreshToken = await TokenStorage.getRefreshToken();

      if (!refreshToken) {
        throw new Error('No refresh token available');
      }

      const { data } = await axios.post(
        'https://api.example.com/v1/auth/refresh',
        { refreshToken }
      );

      const { accessToken, refreshToken: newRefreshToken } = data;

      await TokenStorage.setTokens(accessToken, newRefreshToken);

      processQueue(null, accessToken);

      originalRequest.headers.Authorization = `Bearer ${accessToken}`;
      return apiClient(originalRequest);
    } catch (refreshError) {
      processQueue(refreshError as AxiosError, null);

      await TokenStorage.clearTokens();
      navigateToLogin();

      return Promise.reject(refreshError);
    } finally {
      isRefreshing = false;
    }
  }
);

3.4 TokenStorage helper

Sử dụng react-native-keychain hoặc expo-secure-store cho production. KHÔNG dùng AsyncStorage cho tokens vì không được encrypt.

import * as SecureStore from 'expo-secure-store';

const TokenStorage = {
  async getAccessToken(): Promise<string | null> {
    return SecureStore.getItemAsync('access_token');
  },

  async getRefreshToken(): Promise<string | null> {
    return SecureStore.getItemAsync('refresh_token');
  },

  async setTokens(
    accessToken: string,
    refreshToken: string
  ): Promise<void> {
    await Promise.all([
      SecureStore.setItemAsync('access_token', accessToken),
      SecureStore.setItemAsync('refresh_token', refreshToken),
    ]);
  },

  async clearTokens(): Promise<void> {
    await Promise.all([
      SecureStore.deleteItemAsync('access_token'),
      SecureStore.deleteItemAsync('refresh_token'),
    ]);
  },
};

4. React Query (TanStack Query)

4.1 Setup

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000,
      gcTime: 10 * 60 * 1000,
      retry: 3,
      retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
      refetchOnWindowFocus: false,
    },
  },
});

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Navigation />
    </QueryClientProvider>
  );
}

4.2 useQuery

useQuery dùng cho GET requests — đọc data. Nó tự động handle loading, error, caching, refetching.

import { useQuery } from '@tanstack/react-query';

interface User {
  id: number;
  name: string;
  email: string;
}

const useUser = (userId: number) => {
  return useQuery<User>({
    queryKey: ['users', userId],
    queryFn: () => apiClient.get(`/users/${userId}`),
    enabled: userId > 0,
    staleTime: 30 * 1000,
  });
};

function UserProfile({ userId }: { userId: number }) {
  const { data, isLoading, isError, error, refetch } = useUser(userId);

  if (isLoading) return <ActivityIndicator />;
  if (isError) return <ErrorView error={error} onRetry={refetch} />;

  return <Text>{data.name}</Text>;
}

4.3 Query Keys — Thiết kế đúng

Query key là identity của cache entry. React Query dùng nó để determine khi nào refetch và cache data ở đâu. Thiết kế key tốt rất quan trọng cho cache invalidation.

const queryKeys = {
  users: {
    all: ['users'] as const,
    lists: () => [...queryKeys.users.all, 'list'] as const,
    list: (filters: UserFilters) =>
      [...queryKeys.users.lists(), filters] as const,
    details: () => [...queryKeys.users.all, 'detail'] as const,
    detail: (id: number) =>
      [...queryKeys.users.details(), id] as const,
  },

  posts: {
    all: ['posts'] as const,
    byUser: (userId: number) =>
      [...queryKeys.posts.all, 'user', userId] as const,
  },
};

4.4 useMutation

useMutation dùng cho POST/PUT/PATCH/DELETE — thay đổi data. Sau khi mutation thành công, dùng invalidateQueries hoặc setQueryData để update cache.

import { useMutation, useQueryClient } from '@tanstack/react-query';

interface CreateUserInput {
  name: string;
  email: string;
}

const useCreateUser = () => {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (input: CreateUserInput) =>
      apiClient.post('/users', input),

    onSuccess: (newUser) => {
      queryClient.invalidateQueries({
        queryKey: queryKeys.users.lists(),
      });

      queryClient.setQueryData(
        queryKeys.users.detail(newUser.id),
        newUser
      );
    },

    onError: (error) => {
      showToast('Tạo user thất bại');
    },
  });
};

4.5 Optimistic Updates

Update UI ngay lập tức trước khi server confirm, rollback nếu fail. Tạo UX mượt mà hơn.

const useUpdateUser = () => {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: ({ id, ...data }: UpdateUserInput) =>
      apiClient.patch(`/users/${id}`, data),

    onMutate: async (updatedUser) => {
      await queryClient.cancelQueries({
        queryKey: queryKeys.users.detail(updatedUser.id),
      });

      const previousUser = queryClient.getQueryData<User>(
        queryKeys.users.detail(updatedUser.id)
      );

      queryClient.setQueryData(
        queryKeys.users.detail(updatedUser.id),
        (old: User | undefined) => (old ? { ...old, ...updatedUser } : old)
      );

      return { previousUser };
    },

    onError: (_error, updatedUser, context) => {
      if (context?.previousUser) {
        queryClient.setQueryData(
          queryKeys.users.detail(updatedUser.id),
          context.previousUser
        );
      }
    },

    onSettled: (_data, _error, updatedUser) => {
      queryClient.invalidateQueries({
        queryKey: queryKeys.users.detail(updatedUser.id),
      });
    },
  });
};

5. Infinite Scroll — useInfiniteQuery + FlatList

Pattern phổ biến trong mobile: load thêm data khi user scroll tới cuối list.

import { useInfiniteQuery } from '@tanstack/react-query';
import { FlatList, ActivityIndicator } from 'react-native';

interface PaginatedResponse<T> {
  data: T[];
  nextCursor: string | null;
  hasMore: boolean;
}

const useInfiniteUsers = () => {
  return useInfiniteQuery<PaginatedResponse<User>>({
    queryKey: ['users', 'infinite'],
    queryFn: ({ pageParam }) =>
      apiClient.get('/users', {
        params: { cursor: pageParam, limit: 20 },
      }),
    initialPageParam: undefined as string | undefined,
    getNextPageParam: (lastPage) =>
      lastPage.hasMore ? lastPage.nextCursor : undefined,
  });
};

function UserList() {
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    isLoading,
    isError,
    refetch,
  } = useInfiniteUsers();

  const allUsers = data?.pages.flatMap((page) => page.data) ?? [];

  const handleEndReached = () => {
    if (hasNextPage && !isFetchingNextPage) {
      fetchNextPage();
    }
  };

  if (isLoading) return <ActivityIndicator size="large" />;

  return (
    <FlatList
      data={allUsers}
      keyExtractor={(item) => item.id.toString()}
      renderItem={({ item }) => <UserCard user={item} />}
      onEndReached={handleEndReached}
      onEndReachedThreshold={0.5}
      refreshing={isLoading}
      onRefresh={refetch}
      ListFooterComponent={
        isFetchingNextPage ? <ActivityIndicator /> : null
      }
    />
  );
}

6. Error Handling Patterns

6.1 Typed Error Response

interface ApiError {
  status: number;
  code: string;
  message: string;
  details?: Record<string, string[]>;
}

class ApiException extends Error {
  status: number;
  code: string;
  details?: Record<string, string[]>;

  constructor(error: ApiError) {
    super(error.message);
    this.name = 'ApiException';
    this.status = error.status;
    this.code = error.code;
    this.details = error.details;
  }

  get isUnauthorized(): boolean {
    return this.status === 401;
  }

  get isValidationError(): boolean {
    return this.status === 422;
  }

  get isServerError(): boolean {
    return this.status >= 500;
  }

  get isNetworkError(): boolean {
    return this.status === 0;
  }
}

6.2 Response Interceptor với Error Transform

apiClient.interceptors.response.use(
  (response) => response.data,
  (error: AxiosError<ApiError>) => {
    if (!error.response) {
      return Promise.reject(
        new ApiException({
          status: 0,
          code: 'NETWORK_ERROR',
          message: 'Không có kết nối mạng',
        })
      );
    }

    return Promise.reject(
      new ApiException({
        status: error.response.status,
        code: error.response.data?.code ?? 'UNKNOWN',
        message:
          error.response.data?.message ?? 'Đã có lỗi xảy ra',
        details: error.response.data?.details,
      })
    );
  }
);

6.3 Retry Strategy với Exponential Backoff

const retryableStatusCodes = new Set([408, 429, 500, 502, 503, 504]);

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: (failureCount, error) => {
        if (failureCount >= 3) return false;
        if (error instanceof ApiException) {
          return retryableStatusCodes.has(error.status);
        }
        return false;
      },
      retryDelay: (attemptIndex) =>
        Math.min(1000 * 2 ** attemptIndex, 30000),
    },
  },
});

7. REST — HTTP Methods, Status Codes, Pagination

7.1 HTTP Methods

Method	Mục đích	Idempotent?	Request Body?	Ví dụ
GET	Đọc resource	✅	❌	GET /users/123
POST	Tạo resource	❌	✅	POST /users
PUT	Replace toàn bộ resource	✅	✅	PUT /users/123
PATCH	Update một phần resource	❌*	✅	PATCH /users/123
DELETE	Xóa resource	✅	❌	DELETE /users/123

*PATCH có thể idempotent hoặc không, tùy implementation. Ví dụ {"name": "John"} là idempotent, nhưng {"$inc": {"views": 1}} thì không.

7.2 HTTP Status Codes

Code	Tên	Khi nào dùng
200	OK	GET/PUT/PATCH thành công
201	Created	POST tạo resource thành công
204	No Content	DELETE thành công, không có body
400	Bad Request	Request sai format, thiếu field
401	Unauthorized	Chưa authenticate (token missing/invalid/expired)
403	Forbidden	Đã authenticate nhưng không có quyền
404	Not Found	Resource không tồn tại
409	Conflict	Duplicate resource (email đã tồn tại)
422	Unprocessable Entity	Validation errors
429	Too Many Requests	Rate limited
500	Internal Server Error	Server gặp lỗi không xác định
502	Bad Gateway	Server trung gian nhận response lỗi
503	Service Unavailable	Server tạm thời không available

7.3 Pagination — Cursor vs Offset

Tiêu chí	Offset-based	Cursor-based
Cách dùng	?page=2&limit=20	?cursor=abc123&limit=20
Jump to page	✅ Được	❌ Không được
Performance lớn	❌ Chậm (OFFSET SQL)	✅ Nhanh (WHERE id > cursor)
Data thay đổi	❌ Bị trùng/thiếu items	✅ Ổn định
Phù hợp cho	Admin panels, search results	Social feeds, infinite scroll

📖 ĐỌC SÂU KHI DỰ ÁN CẦN

8. GraphQL Basics

8.1 Query và Mutation

GraphQL cho phép client request chính xác data cần thiết, giảm over-fetching và under-fetching.

query GetUser($id: ID!) {
  user(id: $id) {
    id
    name
    email
    posts(first: 5) {
      title
      createdAt
    }
  }
}

mutation CreatePost($input: CreatePostInput!) {
  createPost(input: $input) {
    id
    title
    author {
      name
    }
  }
}

8.2 Apollo Client vs urql

Tiêu chí	Apollo Client	urql
Bundle size	~40KB	~12KB
Cache	Normalized (mạnh, phức tạp)	Document cache (đơn giản)
DevTools	Rất tốt	Tốt
Learning curve	Cao	Thấp
Ecosystem	Lớn nhất	Đang phát triển
Khi nào dùng	App lớn, cần normalized cache	App nhỏ-trung, muốn lightweight

8.3 Apollo Client Setup trong React Native

import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider,
  createHttpLink,
} from '@apollo/client';
import { setContext } from '@apollo/client/link/context';

const httpLink = createHttpLink({
  uri: 'https://api.example.com/graphql',
});

const authLink = setContext(async (_, { headers }) => {
  const token = await TokenStorage.getAccessToken();
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : '',
    },
  };
});

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
});

function App() {
  return (
    <ApolloProvider client={client}>
      <Navigation />
    </ApolloProvider>
  );
}

9. WebSocket vs SSE vs Long Polling

Tiêu chí	WebSocket	SSE (Server-Sent Events)	Long Polling
Direction	Bidirectional (full-duplex)	Server → Client only	Simulated bidirectional
Protocol	ws:// hoặc wss://	HTTP	HTTP
Connection	Persistent	Persistent	Repeated requests
Binary data	✅	❌ (text only)	✅
Auto reconnect	❌ (tự implement)	✅ (built-in)	✅ (tự implement)
Overhead	Thấp sau handshake	Thấp	Cao (mỗi lần new request)
Use cases	Chat, gaming, real-time collab	Notifications, feeds, stock prices	Legacy systems, fallback
RN support	Tốt (built-in WebSocket API)	Hạn chế (cần polyfill)	Tốt (dùng fetch/axios)

WebSocket cơ bản trong React Native:

const useWebSocket = (url: string) => {
  const wsRef = useRef<WebSocket | null>(null);
  const [messages, setMessages] = useState<string[]>([]);
  const [isConnected, setIsConnected] = useState(false);
  const reconnectAttempts = useRef(0);
  const maxReconnectAttempts = 5;

  const connect = useCallback(() => {
    const ws = new WebSocket(url);

    ws.onopen = () => {
      setIsConnected(true);
      reconnectAttempts.current = 0;
    };

    ws.onmessage = (event) => {
      setMessages((prev) => [...prev, event.data]);
    };

    ws.onclose = () => {
      setIsConnected(false);
      if (reconnectAttempts.current < maxReconnectAttempts) {
        const delay = Math.min(
          1000 * 2 ** reconnectAttempts.current,
          30000
        );
        reconnectAttempts.current += 1;
        setTimeout(connect, delay);
      }
    };

    ws.onerror = () => {
      ws.close();
    };

    wsRef.current = ws;
  }, [url]);

  const send = useCallback((data: string) => {
    if (wsRef.current?.readyState === WebSocket.OPEN) {
      wsRef.current.send(data);
    }
  }, []);

  useEffect(() => {
    connect();
    return () => wsRef.current?.close();
  }, [connect]);

  return { messages, send, isConnected };
};

10. Rate Limiting (429)

apiClient.interceptors.response.use(
  (response) => response,
  async (error: AxiosError) => {
    if (error.response?.status === 429) {
      const retryAfter = error.response.headers['retry-after'];
      const delayMs = retryAfter
        ? parseInt(retryAfter, 10) * 1000
        : 5000;

      await new Promise((resolve) => setTimeout(resolve, delayMs));

      return apiClient(error.config!);
    }
    return Promise.reject(error);
  }
);

❓ CÂU HỎI PHỎNG VẤN + ĐÁP ÁN

🛠️ Debug playbook: API bug

Triệu chứng	Kiểm tra	Fix thường gặp
Nhiều refresh token request cùng lúc	Log 401 time, isRefreshing flag, failedQueue length	Một refresh request duy nhất, request còn lại chờ queue
Loading không bao giờ tắt	Timeout, abort, finally, query error state	Config timeout, handle error/finally, cancel khi unmount
List duplicate item khi load more	onEndReached fire nhiều lần, cursor, hasNextPage	Guard isFetchingNextPage, cursor pagination, stable key
Retry spam backend	Status code nào đang retry, retryDelay, jitter	Chỉ retry network/5xx/429 phù hợp, không retry 400/401/422

🏋️ BÀI TẬP

🧩 MINI EXERCISE THỰC TẾ REACT NATIVE

⚠️ LỖI THƯỜNG GẶP

🏢 CASE ĐI LÀM THẬT

🧠 GHI NHỚ NHANH

❔ CÂU HỎI TỰ KIỂM TRA

✅ CHECKLIST TỰ ĐÁNH GIÁ

📎 TÀI NGUYÊN