Решил для своих тестов сделать небольшое приложение Todo list с использованием react-query и zustand. Все работает хорошо но возникли вопросики по дополнительному вызову компонента Todolist.jsx внутри него я использую
const { data: response, isLoading, isError, error } = useFetchTodo();
const data = response?.data;
Получаю все что мне необходимо для работы, так-же я имею компонент TodoPagination.jsx который содержит 2 кнопки, назад и далее, для пагинации для них была сделана отдельная функция в zustand
const { incrementPage, decrementPage, page, limit, totalCount } = useStoreTodoPagination();
Вот сам хук моего store
export const useStoreTodoPagination = create(persist((set) => ({
page: 1,
limit: 5,
totalCount: 7, // Временное значение
setPage: (value) => set({ page: value }),
incrementPage: () => set(state => ({ page: state.page + 1 })),
decrementPage: () => set(state => ({ page: state.page - 1 })),
setLimit: (value) => set({ limit: value }),
setTotalCount: (value) => set({ totalCount: value }),
}), {
name: "x-total-count-todo-list"
}));
А так-же мой хук запроса useQuery
export function useFetchTodo() {
const filter = useStoreTodoFilter(state => state.filter);
const search = useStoreTodoSearch(state => state.search);
const { page, limit, setTotalCount } = useStoreTodoPagination();
console.log('useFetchTodo');
return useQuery(['todo-list', filter, search, page, limit], async () =>
await fetchTodo(filter, search, page, limit),
{
keepPreviousData: true,
refetchOnWindowFocus: false,
retry: 1,
onSuccess: (response) => {
//setTotalCount(parseInt(response.headers.get('x-total-count')));
}
});
};
Так вот я ни как не могу понять, от куда берется лишний вызов, при нажатие на кнопку мы меняем page что естественно отлавливает хук useFetchTodo, и запускает запрос, это 1 вызов компонента TodoList.jsx потом он заканчивает получает ответ от сервера это 2 вызов что Логично и понятно но откуда еще один?
Как описано на картинке, 1 вызов понятно, 2 хз от куда, он появляется сразу, а 3 после ответа, сейчас там стоит задержка.
Фулл код можете посмотреть на codesandbox.io Можете открыть ссылку, после загрузки очистить консоль(чтобы не запутаться) и перейти на другую страницу, чтобы увидеть что происходит.
