InvalidateQueries не обновляет/не обновляет страницу

У меня есть кнопка, которая при нажатии должна выполнять действие, которое заставляет список, отображаемый на моей странице, изменяться, и теоретически страница должна перезагружаться. Однако этого никогда не происходит, независимо от того, сколько раз я нажимаю кнопку.

Полный код моей кнопки:

import React from 'react';
import { useSaveOrderItemsForList } from '../../hooks/Lists/useSaveOrderItemsForList';
import ErrorIndicator from '../shared/ErrorIndicator';
import LoadingButton from '../shared/LoadingButton';
import { valueState as valueStateAtom } from '../../atoms/orderItemsAtom';
import { useSetRecoilState } from 'recoil';

export default function SaveOrderItemsButton({ orderItems, listID }) {
    const { isError, error, isLoading, mutate } = useSaveOrderItemsForList(orderItems, listID);
    const setValue = useSetRecoilState(valueStateAtom);

    const handleClick = () => {
        mutate(orderItems, listID);
        setValue([]);
    }

    return (
        <div className={'w-100'}>
            <br />
            <ErrorIndicator isError={isError} error={error} />
            <LoadingButton
                className={'w-100'}
                variant={'success'}
                loading={isLoading}
                onClick={handleClick}
            >
                Save
            </LoadingButton>
        </div>
    );
}

Что касается кода моего пользовательского хука:

import { getToken } from '../../tokens/getToken';
import { basePath } from '../../config/basePath';
import { getTokenAuthHeaders } from '../../functions/sharedHeaders';
import { useMutation, useQueryClient } from 'react-query';

async function saveOrderItemsForList(orderItems, listID) {
    const token = await getToken();
    const response = await fetch(`${basePath}/lists/save_order_items/${listID}`, {
        method: 'PUT',
        body: JSON.stringify({ orderItems }),
        headers: getTokenAuthHeaders(token)
    });

    return response.json();
}

export function useSaveOrderItemsForList() {
    const queryClient = useQueryClient();

    return useMutation(saveOrderItemsForList,
        {
            onSuccess: () => {
                return queryClient.invalidateQueries('lists');
            }
        }
    );
}

Моя теория заключается в том, что, поскольку я управляю организацией своего списка на стороне клиента, страница не обновляется информацией, которую я передал (это код страницы, которая показывает список):

import Col from 'react-bootstrap/Col';
import CardsList from './CardsList';
import { useList } from '../../hooks/Cards/useList';
import useOrderItemsForCardsInList from '../../hooks/Lists/useOrderItemsForCardsInList';
import usePaginateCardsInList from '../../hooks/Cards/usePaginateCardsInList';
import LoadingAndErrorCentered from '../shared/LoadingAndErrorCentered';

export default function List({ listID }) {
    const { isLoading, isError, error, data } = useList(listID);
    const { data: orderItems } = useOrderItemsForCardsInList(listID);
    const pagesArray = usePaginateCardsInList(orderItems, data);

    return (
        <Col xs={12}>
            <br />
            <LoadingAndErrorCentered isLoading={isLoading} isError={isError} error={error} />
            {data && <CardsList cards={pagesArray} listID={listID} />}
        </Col>
    );
}

Ребята, что вы думаете?

Редактировать: это код моего крючка useList.

import { useQuery } from 'react-query';
import { getTokenAuthHeaders } from '../../functions/sharedHeaders';
import { basePath } from '../../config/basePath';
import { getToken } from '../../tokens/getToken';

async function getList(listID) {
    const token = await getToken();
    const response = await fetch(`${basePath}/cards/list/${listID}`, {
        method: 'GET',
        headers: getTokenAuthHeaders(token)
    });

    return response.json();
}

export function useList(listID) {
    return useQuery(['cards', 'list', listID], () => {
        return getList(listID);
    });
}

и на моем сервере у меня есть эта функция, объявленная на моей конечной точке:

static async getList(id) {
   const query = await List.findById(id).exec();
   return query;
}

Возвращает ли хук useList свежие данные, когда запрос становится недействительным?

Nikki9696 22.04.2022 19:28

@ Nikki9696 Nikki9696 Я только что протестировал его, и хук useList не возвращает свежие данные, когда запрос недействителен.

Daniel Corona 22.04.2022 19:42

Вот почему тогда ваш компонент не получает новые данные =) Опубликовать хук useList?

Nikki9696 22.04.2022 19:52

@ Nikki9696 Я отредактировал свой вопрос с кодом хука useList :)

Daniel Corona 22.04.2022 19:57

Если я понимаю, что это делает, ваш ключ запроса - «карты». Вы аннулировали запрос с ключом "списки". Если я неправильно понимаю (я новичок, чтобы реагировать на запрос, так что вполне возможно), у него все еще есть «s» в конце списков, так что это не тот же ключ?

Nikki9696 22.04.2022 20:24
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
5
35
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий
queryClient.invalidateQueries('lists');

против

useQuery(['cards', 'list', listID], () => {});

Вы не аннулируете правильные ключи запроса, поэтому, естественно, запрос не обновляется. Вам нужно использовать правильный ключ для аннулирования, в вашем случае:

queryClient.invalidateQueries(['cards', 'list']);

Другие вопросы по теме