Как правильно реализовать кнопку «Назад» во Vue: просто о сложном

Во время исследования мы столкнулись с обратным ожиданием у пользователей, если у элемента более сложная формулировка. В вариантах «Назад к списку Х» и «<- Список Х» люди после перехода к списку нажимали браузерную кнопку назад и ожидали вновь оказаться на странице детализации, а не провалиться ещё дальше в истории.

Мой первый боевой проект: FSD, TanStack и как мы это дружили

не найдя хороших материалов по теме организации queryKeyв TanStack Query

Есть статья от создателя Tanstack Query про эффективное описание ключей.
Из нее (и на практике) я подчеркнул, например, что порой нужно инвалидировать списки отдельно от деталей, если данные деталей подставлены в кеш напрямую из ответа мутации.

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

type QueryKeys<T extends string> = {
    all: [T];
    lists: [T, 'lists'];
    list: (params: Record<string, unknown>) => [T, 'lists', typeof params];
    details: [T, 'details'];
    detail: (id: string | number) => [T, 'details', typeof id];
};

function generateKeys<T extends string>(base: T): QueryKeys<T> {
    return {
        all: [base],
        lists: [base, 'lists'],
        list: (params) => [base, 'lists', params],
        details: [base, 'details'],
        detail: (id) => [base, 'details', id],
    };
}

const userQueryKeys = generateKeys('user')

Возможно, это будет Вам полезно.