native-data-fetching

Tổng quan về skill native-data-fetching

native-data-fetching thực sự giúp gì

native-data-fetching là hướng dẫn tập trung vào Expo để triển khai và gỡ lỗi các request mạng trong ứng dụng React Native và Expo. Skill này đặc biệt hữu ích khi bạn cần nhiều hơn một prompt kiểu “viết một lệnh fetch”: gọi API, thêm auth header, quyết định chiến lược cache, xử lý offline, base URL theo môi trường, và data loader của Expo Router đều nằm trong phạm vi mà skill này hỗ trợ.

Khi nào phù hợp nhất cho đội Frontend Development

native-data-fetching for Frontend Development rất phù hợp nếu bạn đang xây dựng tính năng mobile hoặc Expo web phụ thuộc vào dữ liệu từ xa và muốn áp dụng các quy ước sát với hệ sinh thái Expo. Skill này đặc biệt đáng dùng khi bạn đang cân nhắc giữa fetch thuần, thư viện dữ liệu như React Query hoặc SWR, và loader ở cấp route trong Expo Router.

Bài toán thực tế mà người dùng thường cần giải quyết

Người dùng thường muốn làm một trong bốn việc sau:

• phát hành một tích hợp API ổn định
• sửa một luồng network đang lỗi hoặc chập chờn
• chọn mô hình fetch hợp lý cho một màn hình hoặc route
• tránh các lỗi thường gặp trong Expo liên quan đến config, auth và loader

Đây là điểm mà native-data-fetching hữu ích hơn việc chỉ lướt repo qua loa: skill này đặt vấn đề networking như một quyết định triển khai, không chỉ là một đoạn mã mẫu.

Điểm khác biệt chính và các giới hạn cần biết

Điểm khác biệt lớn nhất là định hướng rõ ràng theo Expo. Tài liệu gốc ưu tiên expo/fetch thay vì axios, đồng thời mở rộng vượt ra ngoài request cơ bản để bao gồm cache, hỗ trợ offline, xử lý token và loader của Expo Router. Nó cũng có phần tham chiếu tập trung vào useLoaderData và mô hình thực thi server/static cho Expo web trong SDK 55+.

Giới hạn chính: đây không phải một framework networking hoàn chỉnh. Đây là tài liệu skill kèm hướng dẫn và ví dụ, nên chất lượng kết quả phụ thuộc nhiều vào prompt của bạn và việc kiến trúc ứng dụng đã được xác định rõ hay chưa.

Cách dùng skill native-data-fetching

Bối cảnh cài đặt native-data-fetching

Cài skill từ repository Expo skills:

npx skills add https://github.com/expo/skills --skill native-data-fetching

Sau khi cài, hãy đọc hai file này trước:

• SKILL.md
• references/expo-router-loaders.md

Thứ tự đọc này giúp bạn nắm được hướng dẫn networking tổng quát trước, rồi mới đến mô hình loader đặc thù cho ứng dụng web dùng Expo Router.

Khi nào nên gọi native-data-fetching

Dùng native-data-fetching skill bất cứ khi nào tác vụ có liên quan đến:

• gọi API bên ngoài
• gửi form hoặc dữ liệu JSON
• thêm auth header hoặc logic refresh token
• debug timeout, lỗi HTTP hoặc response sai định dạng
• chọn giữa fetch thuần, React Query, SWR hoặc loader
• xử lý hành vi offline/cache
• cấu hình URL API theo môi trường
• triển khai data loading ở cấp route với Expo Router

Nếu tác vụ đụng đến network state, vòng đời request hoặc kiến trúc dữ liệu từ xa, hãy gọi skill này sớm thay vì đợi đến lúc phát sinh bug mới xử lý.

native-data-fetching cần bạn cung cấp những gì

Bạn sẽ nhận được đầu ra tốt hơn nếu cung cấp:

• màn hình, route hoặc tính năng đang xây
• runtime mục tiêu: iOS, Android, web hoặc cả ba
• loại request: GET, POST, mutation flow, polling, preload, v.v.
• chi tiết API: dạng endpoint, mô hình auth, response mong đợi, quy ước lỗi
• dữ liệu có cần cache, refresh, retry hoặc chạy được khi offline hay không
• bạn đang dùng Expo Router, React Query, SWR hay state React thuần
• mọi quy tắc config môi trường hoặc base URL đã có sẵn trong app

Nếu thiếu ngữ cảnh đó, skill vẫn có thể sinh mã, nhưng rất dễ chọn sai mô hình fetch.

Biến một yêu cầu sơ sài thành prompt chất lượng

Prompt yếu:

Fetch user data for my screen.

Prompt tốt hơn:

Use native-data-fetching to implement a profile screen in an Expo app.
Target platforms: iOS and Android.
Need: authenticated GET /me request with Bearer token, loading state, 401 handling, retry on network failure, and stale data shown while refetching.
Current stack: Expo Router + React Query.
Return: recommended pattern, code, and where to place config for the API base URL.

Phiên bản mạnh hơn hiệu quả hơn vì nó cho skill đủ thông tin để chọn giữa logic fetch trực tiếp, thư viện query và các mô hình theo route.

Chọn đúng mô hình fetch với native-data-fetching

Một lộ trình ra quyết định thực tế:

• Dùng fetch thuần hoặc expo/fetch cho các request đơn lẻ và luồng đơn giản.
• Dùng React Query hoặc SWR khi việc invalidation cache, refresh nền và chống trùng request là quan trọng.
• Dùng loader của Expo Router khi route cần nạp dữ liệu trước khi render trên Expo web, đặc biệt từ SDK 55+.

Đây là một trong những cách dùng có giá trị nhất của native-data-fetching guide: yêu cầu nó đề xuất mô hình phù hợp trước khi bắt tay vào triển khai.

Lưu ý khi dùng loader của Expo Router

Phần tham chiếu đi kèm rất quan trọng nếu bạn đang dùng useLoaderData. Loader trong Expo Router web có mô hình thực thi kép:

• ở lần tải trang đầu tiên, chúng có thể chạy phía server
• khi điều hướng phía client, trình duyệt sẽ lấy dữ liệu loader qua HTTP

Điều đó có nghĩa là ngữ cảnh request, cách host và cấu hình sẽ khác nhau giữa chế độ output "server" và "static". Nếu bài toán của bạn có nhắc đến loader, hãy kèm theo:

• phiên bản Expo SDK
• chế độ web output
• bạn có cần truy cập headers/cookies/request hay không
• mô hình hosting

Nếu không, lời giải được sinh ra có thể mặc định những khả năng mà setup của bạn thực tế không có.

Lộ trình đọc repo giúp tiết kiệm thời gian

Để review nhanh cách native-data-fetching hoạt động, đừng duyệt repo một cách ngẫu nhiên. Hãy đi theo thứ tự này:

1. SKILL.md để nắm phạm vi và các ưu tiên
2. references/expo-router-loaders.md nếu app của bạn dùng data loading với Expo Router
3. API client, utility auth và các file config môi trường trong chính app của bạn

Skill upstream đủ ngắn để việc đọc nó thường không phải nút thắt; vấn đề thường nằm ở chỗ ánh xạ nó đúng vào kiến trúc app hiện tại.

Quy trình triển khai thực tế

Một workflow hợp lý là:

1. xin đề xuất mô hình phù hợp
2. yêu cầu lớp request hoặc hook cụ thể
3. thêm các trạng thái error/loading/empty
4. thêm xử lý auth và môi trường
5. test các tình huống lỗi
6. chỉ sau đó mới bổ sung cache/offline nếu thực sự cần

Cách này giúp tránh overengineering. Nhiều đội lao thẳng vào cache nâng cao trước khi xác nhận endpoint, auth và hành vi base URL đã chạy đúng.

Các ưu tiên ảnh hưởng đến mã được sinh ra

Tài liệu gốc nói rất rõ: tránh axios và ưu tiên expo/fetch. Nếu bạn vẫn yêu cầu axios, bạn đang đi ngược lại ưu tiên đã nêu của skill. Nếu codebase của bạn đã chuẩn hóa trên axios, hãy nói rõ điều đó để đầu ra có thể thích nghi thay vì “đánh nhau” với stack hiện tại.

Những chi tiết request nên nêu rõ ngay từ đầu

Để có bản nháp đầu tiên đủ dùng, hãy nêu rõ các chi tiết triển khai sau:

• JSON hay multipart/form-data
• các header bắt buộc
• nguồn token và cách refresh token
• kỳ vọng về timeout hoặc retry
• response non-2xx có trả về JSON lỗi hay không
• UI nên chặn, stream hay render dữ liệu cũ trước

Những chi tiết này thường quan trọng hơn cả đường dẫn endpoint.

Câu hỏi thường gặp về skill native-data-fetching

native-data-fetching chỉ dành cho ứng dụng Expo?

Skill này phát huy giá trị nhất trong bối cảnh Expo và React Native, đặc biệt vì nó ưu tiên expo/fetch và có tài liệu tham chiếu cho loader của Expo Router. Một số mô hình fetch là kiến thức chung của web, nhưng rõ ràng skill này được tinh chỉnh cho hệ sinh thái Expo.

native-data-fetching có thân thiện với người mới không?

Có, miễn là mục tiêu của bạn đủ cụ thể. Người mới vẫn có thể dùng native-data-fetching skill hiệu quả nếu mô tả rõ màn hình, endpoint và hành vi mong muốn. Skill này kém hữu ích hơn cho việc học hoàn toàn mở, vì nó giả định rằng bạn đang chủ động triển khai hoặc debug một vấn đề cụ thể.

Khác gì so với một prompt code thông thường?

Một prompt chung chung có thể trả về đoạn mã fetch chạy được, nhưng lại bỏ qua các quyết định đặc thù của hệ sinh thái, chẳng hạn ưu tiên expo/fetch, chọn đúng mô hình data loading hoặc tính đến hành vi loader của Expo Router. native-data-fetching guide phù hợp hơn khi kiến trúc và độ khớp với framework quan trọng không kém cú pháp.

Khi nào không nên dùng native-data-fetching?

Đừng dùng skill này nếu tác vụ của bạn không liên quan đến dữ liệu từ xa, chẳng hạn state chỉ nằm cục bộ, styling UI, animation hoặc navigation không hề fetch dữ liệu. Ngoài ra, nếu bạn cần thiết kế backend API hoàn chỉnh hoặc lập kế hoạch hạ tầng server nâng cao, skill này quá hẹp cho nhu cầu đó.

Có nên dùng khi dự án đã có React Query hoặc SWR?

Có. Thực tế đây còn là một use case rất mạnh. Hãy cho skill biết bạn đang dùng thư viện nào và liệu bạn có muốn giữ nguyên query key, chiến lược invalidation và quy tắc cache hiện tại hay không. Hướng dẫn sẽ hữu ích hơn khi nó mở rộng lớp dữ liệu đang có, thay vì thay thế toàn bộ.

native-data-fetching có bao quát đầy đủ Expo Router loader không?

Skill này bao quát tốt các điểm quyết định quan trọng khi áp dụng và liên kết tới một tài liệu tham chiếu tập trung, nhưng không xử lý mọi edge case. Nếu loader là phần cốt lõi của app, hãy xem trực tiếp references/expo-router-loaders.md để nắm cấu hình và chi tiết thực thi trước khi triển khai cho production.

Cách cải thiện việc dùng skill native-data-fetching

Cung cấp ngữ cảnh kiến trúc cho native-data-fetching, không chỉ mỗi endpoint

Bước nhảy lớn nhất về chất lượng đến từ việc cho skill biết request sẽ nằm ở đâu trong app:

• component
• custom hook
• query layer
• route loader
• shared API client

Nhờ vậy, nó có thể sinh ra mã khớp với cấu trúc của bạn thay vì một snippet rời rạc.

Hỏi về quyết định trước khi yêu cầu code

Một mẫu làm việc hiệu quả là:

Use native-data-fetching to choose the best approach for this feature.
Compare plain fetch vs React Query vs Expo Router loader for my constraints.
Then implement the winning option.

Cách này giảm làm lại vì đầu ra đầu tiên đóng vai trò quyết định thiết kế, chứ không chỉ là mã sinh tự động.

Nêu rõ các failure mode mà bạn thực sự quan tâm

Nếu bạn không nhắc đến xử lý lỗi, bạn thường chỉ nhận được các ví dụ quá lạc quan. Hãy cải thiện kết quả bằng cách nêu các mối quan tâm thực tế:

• token hết hạn với lỗi 401
• thiết bị offline
• kết nối chậm
• request bị lặp khi màn hình focus
• payload JSON lỗi
• lỗi server 500 có kèm thông báo

Những ràng buộc này sẽ đẩy skill theo hướng đầu ra sát production hơn.

Failure mode phổ biến: giả định nền tảng quá mơ hồ

Rất nhiều lời khuyên networking kém chất lượng xuất phát từ việc trộn lẫn giả định của native và web. Hãy nói rõ:

• chỉ native
• chỉ web
• ứng dụng universal
• Expo Router web với loader
• static export hay server rendering

Điều này quan trọng vì hành vi loader, ngữ cảnh request và ràng buộc hosting sẽ thay đổi theo từng setup.

Failure mode phổ biến: không rõ cách xử lý config và base URL

Nếu bạn bỏ qua chi tiết môi trường, mã được sinh ra có thể hardcode URL hoặc đặt config sai tầng. Hãy cung cấp:

• quy tắc base URL cho dev/staging/prod
• env vars đã tồn tại hay chưa
• hiện tại config đang nằm ở đâu
• request có khác nhau theo nền tảng hay không

Như vậy quá trình cài đặt và áp dụng native-data-fetching vào app thực tế sẽ trơn tru hơn nhiều.

Nâng chất lượng đầu ra bằng response contract thực tế

Tốt hơn là chỉ nói “trả về dữ liệu người dùng”:

GET /me returns 200 { id, name, avatarUrl }.
401 returns { error: "token_expired" }.
500 may return HTML from an upstream proxy.

Điều này giúp skill tạo ra phần parse và xử lý lỗi an toàn hơn, đặc biệt hữu ích khi debug các API không ổn định.

Lặp tiếp sau câu trả lời đầu tiên

Sau đầu ra ban đầu, hãy hỏi tiếp theo các hướng như:

• convert this to React Query
• adapt this to Expo Router loader usage
• add optimistic mutation handling
• refactor into a reusable API client
• harden error states for offline mode

Câu trả lời đầu tiên nên chốt được mô hình; các lượt sau nên tinh chỉnh để khớp với ràng buộc thực tế của app.

Đọc tài liệu loader khi việc render trên web là quan trọng

Nếu dự án của bạn dùng data loading ở cấp route, cách cải thiện nhanh nhất là đọc references/expo-router-loaders.md rồi prompt lại bằng chính thuật ngữ trong đó: useLoaderData, "server" vs "static", request access và hosting model. Cách này cho ra đầu ra native-data-fetching usage sắc nét hơn nhiều so với một yêu cầu chung chung như “load data before render”.

Giữ native-data-fetching tập trung vào công việc networking

Skill này hoạt động tốt nhất khi prompt giữ trọng tâm vào các vấn đề dữ liệu từ xa. Nếu bạn gộp networking, state management, thiết kế lại UI và tái cấu trúc navigation vào cùng một yêu cầu, kết quả thường sẽ nông. Hãy tách công việc để native-data-fetching xử lý gọn phần API và data layer trước.