Setup Dự Án React Native Với React Query

React Native là một framework phổ biến để phát triển ứng dụng di động đa nền tảng, còn React Query là một thư viện mạnh mẽ giúp quản lý và xử lý dữ liệu từ các API một cách hiệu quả. Kết hợp hai công cụ này, bạn có thể xây dựng ứng dụng di động nhanh chóng và tối ưu hóa trải nghiệm người dùng. Bài viết này sẽ hướng dẫn bạn từng bước setup dự án React Native với React Query.

Bước 1: Tạo dự án React Native mới

Đầu tiên, bạn cần tạo một dự án React Native mới. Sử dụng lệnh sau để tạo dự án:

npx react-native init MyReactNativeApp

Chuyển đến thư mục dự án:

cd MyReactNativeApp

Bước 2: Cài đặt React Query

Tiếp theo, cài đặt React Query và các dependencies cần thiết:

npm install @tanstack/react-query
npm install @tanstack/react-query-devtools

Bước 3: Cấu hình React Query trong dự án

Tạo một file QueryClient.ts trong thư mục src để cấu hình Query Client:

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

const queryClient = new QueryClient();

export default queryClient;

Trong file App.tsx, sử dụng QueryClientProvider để cung cấp Query Client cho toàn bộ ứng dụng:

import React from 'react';
import { QueryClientProvider } from '@tanstack/react-query';
import queryClient from './src/QueryClient';
import { Text, View } from 'react-native';

const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <View>
        <Text>Hello, React Query with React Native!</Text>
      </View>
    </QueryClientProvider>
  );
};

export default App;

Bước 4: Tạo và sử dụng hooks để lấy dữ liệu

Tạo một file usePosts.ts trong thư mục src/hooks để tạo custom hook sử dụng React Query:

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

const fetchPosts = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  return response.json();
};

const usePosts = () => {
  return useQuery(['posts'], fetchPosts);
};

export default usePosts;

Sau đó, bạn có thể sử dụng custom hook này trong component của mình để lấy dữ liệu:

import React from 'react';
import { Text, View, FlatList } from 'react-native';
import usePosts from './src/hooks/usePosts';

const Posts = () => {
  const { data, error, isLoading } = usePosts();

  if (isLoading) {
    return <Text>Loading...</Text>;
  }

  if (error) {
    return <Text>Error: {error.message}</Text>;
  }

  return (
    <FlatList
      data={data}
      keyExtractor={(item) => item.id.toString()}
      renderItem={({ item }) => (
        <View>
          <Text>{item.title}</Text>
        </View>
      )}
    />
  );
};

export default Posts;

Bước 5: Tích hợp React Query Devtools

Để dễ dàng theo dõi và debug các query, bạn có thể tích hợp React Query Devtools vào dự án của mình. Cài đặt Devtools bằng lệnh sau:

npm install @tanstack/react-query-devtools

Sau đó, thêm Devtools vào file App.tsx:

import React from 'react';
import { QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import queryClient from './src/QueryClient';
import Posts from './Posts';
import { View } from 'react-native';

const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <View>
        <Posts />
      </View>
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
};

export default App;

Kết luận

Với hướng dẫn trên, bạn đã biết cách setup dự án React Native và tích hợp React Query để quản lý và xử lý dữ liệu từ API một cách hiệu quả. Sử dụng React Query sẽ giúp bạn tối ưu hóa hiệu suất của ứng dụng, cải thiện trải nghiệm người dùng và dễ dàng quản lý trạng thái dữ liệu phức tạp. Chúc bạn thành công trong việc xây dựng ứng dụng của mình!