Khi xây dựng ứng dụng sử dụng tập dữ liệu lớn, điều quan trọng là phải giới hạn lượng dữ liệu mà truy vấn của bạn trả về. Trả về tập hợp dữ liệu lớn cùng một lúc có thể ảnh hưởng đến hiệu suất trong ứng dụng của bạn, đặc biệt là khi nối nhiều bảng trong các truy vấn phức tạp
Phân trang phía máy chủ là phương pháp hay nhất để tối ưu hóa các truy vấn bằng cách chỉ trả về các kết quả cần thiết để điền vào một dạng xem nhất định. Khi cần dữ liệu mới để đưa vào chế độ xem, truy vấn sẽ được kích hoạt lại và máy chủ sẽ truy xuất tập hợp kết quả tiếp theo
Ứng dụng demo hiển thị các ví dụ về phân trang phía máy chủ bằng cách sử dụng các thành phần Chế độ xem danh sách, Bảng và Phân trang. Bạn cũng có thể tải xuống bản xuất JSON của ứng dụng để tự kiểm tra
Viết truy vấn sử dụng phân trang phía máy chủ
Hầu hết các cơ sở dữ liệu và API đều hỗ trợ phân trang phía máy chủ nhưng có thể khác nhau về cách nó được hỗ trợ. Công cụ lại cho phép bạn sử dụng các mẫu hoặc tham số thường được sử dụng như giới hạn, độ lệch và con trỏ. Kiểm tra nguồn dữ liệu của bạn để xác định cách tốt nhất cho phép phân trang phía máy chủ
truy vấn SQL
Trong SQL, bạn có thể triển khai phân trang theo kích thước máy chủ bằng cách thêm giới hạn và độ lệch cho truy vấn của mình. Giới hạn cho biết truy vấn chỉ trả về số lượng hàng đã cho và phần bù cho biết số lượng hàng cần bỏ qua trước khi trả lại hàng
Ví dụ: phần sau sử dụng kích thước trang
GET //retoolapi.dev/HZKN0g/data?_page={{ pagination1.value }}&_limit={{ listView1.instances }}
6 [i. e. , các hàng hiện được hiển thị] để giới hạn số lượng hàng được trả về và bảng tích hợp sẵn GET //retoolapi.dev/HZKN0g/data?_page={{ pagination1.value }}&_limit={{ listView1.instances }}
7 làm phần bùselect id, first_name, last_name, email from customer where first_name ilike {{ '%' + textinput1.value + '%' }}
order by id
limit {{ table1.pageSize }}
offset {{ table1.paginationOffset }}
yêu cầu API
Các yêu cầu API thường chấp nhận các tham số để chỉ định một tập hợp con dữ liệu sẽ trả về. Ứng dụng demo sau hiển thị phân trang phía máy chủ với các thành phần Phân trang và Chế độ xem danh sách, đồng thời sử dụng các tham số _limit và _page REST API
Trong API REST trong bản trình diễn, tham số _limit xác định số lượng kết quả sẽ trả về—trong ví dụ này, số lượng hàng trong Chế độ xem danh sách. Tham số _page xác định trang bắt đầu trả về kết quả—trong ví dụ này, trang hiện tại đang xem
GET //retoolapi.dev/HZKN0g/data?_page={{ pagination1.value }}&_limit={{ listView1.instances }}
Một số API sử dụng phân trang dựa trên con trỏ, sử dụng mã định danh [con trỏ] trong tập dữ liệu để phân đoạn các bản ghi trước hoặc sau con trỏ. Trong yêu cầu API, bạn chỉ định một con trỏ nhất định và sử dụng tập hợp kết quả để xác định con trỏ nào sẽ sử dụng trong truy vấn tiếp theo
Truy vấn để truy xuất tổng số hàng
Với phân trang phía máy khách, máy khách có thể truy cập toàn bộ tập dữ liệu cùng một lúc và sử dụng số lượng của nó để xác định số lượng trang mà một chế độ xem yêu cầu. Với phân trang phía máy chủ, chỉ một tập hợp con dữ liệu có thể truy cập được cùng một lúc, do đó, bạn sẽ cần một truy vấn khác để truy xuất tổng số hàng trong tập dữ liệu của mình. Tùy thuộc vào ứng dụng của bạn, bạn có thể sử dụng truy vấn này trực tiếp hoặc như một phần của phép tính để xác định xem bạn cần bao nhiêu trang
Ví dụ: để xác định số lượng Trang của thành phần Phân trang, bạn có thể chia tổng số lượng hàng cho số lượng mục trong một chế độ xem
Hãy chắc chắn rằng bất kỳ bộ lọc nào được sử dụng trong truy vấn phân trang của bạn cũng được sử dụng trong truy vấn tổng số lượng hàng, để mỗi bộ lọc trả về cùng một số lượng hàng
Phân trang phía máy chủ với thành phần Bảng
Thành phần Bảng có hỗ trợ tích hợp cho phân trang phía máy chủ. Trong Kiểm tra > Phân trang, chọn Phân trang trong Tràn và bật Bật phân trang phía máy chủ. Sau đó, bạn có thể chọn phân trang bằng cách sử dụng các loại phân trang dựa trên con trỏ dựa trên Độ lệch giới hạn, Dựa trên con trỏ hoặc Chuyển tiếp GraphQL
Mỗi loại phân trang phía máy chủ yêu cầu trường Tổng số hàng
Dựa trên bù trừ giới hạn
Bảng bao gồm các thuộc tính sau để hỗ trợ phân trang dựa trên bù trừ giới hạn
Thuộc tínhMô tả
GET //retoolapi.dev/HZKN0g/data?_page={{ pagination1.value }}&_limit={{ listView1.instances }}
8Số lượng bản ghi của trang hiện tại đang được xem. GET //retoolapi.dev/HZKN0g/data?_page={{ pagination1.value }}&_limit={{ listView1.instances }}
7Phần bù của trang hiện tại trong chế độ xemBạn có thể sử dụng các thuộc tính này trong các mệnh đề giới hạn và bù đắp của các truy vấn của mình
dựa trên con trỏ
Bảng bao gồm các thuộc tính sau để hỗ trợ phân trang dựa trên con trỏ
Thuộc tínhMô tả
GET //retoolapi.dev/HZKN0g/data?_page={{ pagination1.value }}&_limit={{ listView1.instances }}
8Số lượng bản ghi của trang hiện tại đang được xem. GET //retoolapi.dev/HZKN0g/data?_page={{ pagination1.value }}&_limit={{ listView1.instances }}
1Một con trỏ đại diện cho trang trước, đọc từ giá trị Con trỏ trước đó. GET //retoolapi.dev/HZKN0g/data?_page={{ pagination1.value }}&_limit={{ listView1.instances }}
0Một con trỏ đại diện cho trang tiếp theo, đọc từ giá trị Con trỏ tiếp theoSử dụng các thuộc tính này để cập nhật động các yêu cầu API với con trỏ và giới hạn chính xác. Ví dụ: một yêu cầu đối với Stripe API có thể sử dụng
GET //retoolapi.dev/HZKN0g/data?_page={{ pagination1.value }}&_limit={{ listView1.instances }}
0 và GET //retoolapi.dev/HZKN0g/data?_page={{ pagination1.value }}&_limit={{ listView1.instances }}
8 làm tham số cho các trường giới hạn và bắt đầuGET //api.stripe.com/v1/customers?limit={{ table1.pageSize }}&{{ table.afterCursor ? 'starting_after' : null }}={{ table1.afterCursor }}
Đối với Bảng hiển thị năm hàng trên mỗi trang, với
GET //retoolapi.dev/HZKN0g/data?_page={{ pagination1.value }}&_limit={{ listView1.instances }}
3 là ID của khách hàng cuối cùng trên trang hiện tại, yêu cầu có thể ước tính thànhGET //api.stripe.com/v1/customers?limit=5&starting_after=cus_4QFOF3xrvBT2nU
Sử dụng dữ liệu bảng đã cập nhật để chỉ định các giá trị cho các trường Con trỏ trước, Con trỏ tiếp theo và Có trang tiếp theo trong Kiểm tra > Phân trang. Ví dụ: sử dụng Stripe API, Con trỏ tiếp theo là ID của khách hàng cuối cùng trong bảng
GraphQL Relay dựa trên con trỏ
Retool hỗ trợ phân trang dựa trên con trỏ bằng cách sử dụng thông số kỹ thuật máy chủ GraphQL của Relay. Để biết thêm thông tin, hãy xem tài liệu Kết nối con trỏ Relay GraphQL
Các truy vấn GraphQL chấp nhận các đối số
GET //retoolapi.dev/HZKN0g/data?_page={{ pagination1.value }}&_limit={{ listView1.instances }}
4, GET //retoolapi.dev/HZKN0g/data?_page={{ pagination1.value }}&_limit={{ listView1.instances }}
5, GET //retoolapi.dev/HZKN0g/data?_page={{ pagination1.value }}&_limit={{ listView1.instances }}
6 và GET //retoolapi.dev/HZKN0g/data?_page={{ pagination1.value }}&_limit={{ listView1.instances }}
7 để xác định dữ liệu cần truy xuất. Bạn có thể xác định xem có bao gồm các tham số GET //retoolapi.dev/HZKN0g/data?_page={{ pagination1.value }}&_limit={{ listView1.instances }}
4 hoặc GET //retoolapi.dev/HZKN0g/data?_page={{ pagination1.value }}&_limit={{ listView1.instances }}
5 hay không bằng cách kiểm tra các thuộc tính GET //retoolapi.dev/HZKN0g/data?_page={{ pagination1.value }}&_limit={{ listView1.instances }}
1 và GET //retoolapi.dev/HZKN0g/data?_page={{ pagination1.value }}&_limit={{ listView1.instances }}
0 của bảngĐể chỉ định giá trị cho Con trỏ trước và Con trỏ tiếp theo, hãy sử dụng trường
GET //api.stripe.com/v1/customers?limit={{ table1.pageSize }}&{{ table.afterCursor ? 'starting_after' : null }}={{ table1.afterCursor }}
2 từ phản hồi API. Để chỉ định giá trị cho Có trang tiếp theo, hãy sử dụng trường GET //api.stripe.com/v1/customers?limit={{ table1.pageSize }}&{{ table.afterCursor ? 'starting_after' : null }}={{ table1.afterCursor }}
3 từ phản hồi API