Як зберігати кількість елементів у useInfiniteQuery в react-query?

7 Березня 2024 в 23:22 35

Розглянемо більш докладно тему зберігання кількості елементів у useInfiniteQuery в бібліотеці react-query. Для розуміння проблеми, спочатку розглянемо структуру даних, яку повертає запит до сервера та як ця структура інтегрується в бібліотеку react-query.

Уявімо, що ми маємо React додаток, який відображає список елементів у вигляді сторінкованих сторінок. Наші дані отримуються через API, яке повертає об’єкт з даними про сторінку, розмір сторінки, загальну кількість елементів та самі елементи.

{
    page: 0,
    pageSize: 20,
    totalCount: 345,
    items: ["елемент1", "елемент2", ...]
}

{

page: 0,

pageSize: 20,

totalCount: 345,

items: ["елемент1", "елемент2", ...]

}

Для отримання даних ми використовуємо useInfiniteQuery з параметрами запиту, які включають функцію для отримання наступної сторінки та функцію запиту.

const { data } = useInfiniteQuery({
    getNextPageParam: lastPage => lastPage.page + 1,
    queryFn: async ({ pageParam = 0 }) => fetch(`/api/items?page=${pageParam}`)
})

const { data } = useInfiniteQuery({

getNextPageParam: lastPage => lastPage.page + 1,

queryFn: async ({ pageParam = 0 }) => fetch(`/api/items?page=${pageParam}`)

})

Проте структура даних, яку повертає useInfiniteQuery, виглядає трохи відмінно:

[
    pageParams: [0, 1, 2],
    pages: [
        { page: 0, pageSize: 20, totalCount: 345, items: [...] },
        { page: 1, pageSize: 20, totalCount: 345, items: [...] },
        { page: 2, pageSize: 20, totalCount: 345, items: [...] },
    ]
]

[

pageParams: [0, 1, 2],

pages: [

{ page: 0, pageSize: 20, totalCount: 345, items: [...] },

{ page: 1, pageSize: 20, totalCount: 345, items: [...] },

{ page: 2, pageSize: 20, totalCount: 345, items: [...] },

]

Оскільки інформація про загальну кількість елементів (totalCount) зберігається у кожній сторінці, ми стикаємося з проблемою оновлення цієї кількості у випадку видалення елемента. Нам потрібно оновити кількість усіх сторінок, щоб зробити її узгодженою.

Одним із рішень цієї проблеми є зберігання інформації про загальну кількість елементів на рівні бібліотеки react-query, а не на рівні окремих сторінок. Це дозволить оновлювати кількість елементів в одному місці та забезпечить її консистентність у всіх запитах.

Для цього можна використати механізм додаткового стану або глобального стану, який зберігатиме кількість елементів та буде оновлювати її при кожному запиті на нові дані. Такий підхід забезпечить однозначність кількості елементів та спрости його оновлення у випадку будь-яких змін у даних.

Узагальнюючи, проблема зберігання кількості елементів у useInfiniteQuery в бібліотеці react-query може бути вирішена шляхом зберігання цієї інформації на рівні бібліотеки та оновлення її з використанням механізмів глобального стану.