invalidateQueries doesn't refetch/refresh the page

Question

I have a button that, on click, has to perform a thing that makes a list displayed on my page to change, and in theory the page should reload. However, that never happens, no matter how many times I click my button.

Full code of my button:

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

As for the code of my custom hook:

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

My theory is that, since I'm managing the organizing of my list client-side, the page doesn't get updated with the information I passed (this is the code of the page that shows the list):

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

What do you guys think?

Edit: This is the code of my useList hook.

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

and on my server, I have this function declared on my endpoint:

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

Answer 1

queryClient.invalidateQueries('lists');

vs

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

You are not invalidating the right query keys, so naturally the query doesn't refetch. You need to use the correct key for invalidation, in your case:

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