invalidateQueries 没有 refetch/refresh 页面

Question

我有一个按钮，单击该按钮必须执行一项操作，使我的页面上显示的列表发生变化，理论上应该重新加载该页面。然而，无论我点击我的按钮多少次，这都不会发生。

我的按钮的完整代码：

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;
}

Answer 1

queryClient.invalidateQueries('lists');

对

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

您没有使正确的查询键失效，因此查询自然不会重新获取。您需要使用正确的密钥进行失效，在您的情况下：

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

invalidateQueries 没有 refetch/refresh 页面

invalidateQueries doesn't refetch/refresh the page

javascript

reactjs

react-query