Query invalidation does not work correctly

[teleskop150750]

---

• Operating System: Linux
• Node Version: v22.12.0
• Nuxt Version: 3.15.4
• CLI Version: 3.22.5
• Nitro Version: 2.11.6
• Package Manager: pnpm@9.15.9
• Builder: -
• User Config: nitro, ssr, future, experimental, modules, compatibilityDate, devtools, css, app, vite, components, eslint, hooks
• Runtime Modules: @nuxt/eslint@1.2.0, @nuxt/icon@1.10.3, @pinia/nuxt@0.10.1, @pinia/colada-nuxt@0.0.5
• Build Modules: -

---

I have three pages (unsorted, accepted, rejected)

I often get an error with some frequency. Only the last 2 requests out of 3 are invalidated.
Also, if you go back to the first page, the request will no longer be called.

// unsorted
<script lang="ts">
import { useMoulagesCarsUnsorted } from "~/loaders";
export { useMoulagesCarsUnsorted };
</script>

<script setup lang="ts">
definePageMeta({
  layout: "moulages",
});

const { data } = useMoulagesCarsUnsorted();
</script>

// accepted
<script lang="ts">
import { useMoulagesCarsAccepted } from "~/loaders";
export { useMoulagesCarsAccepted };
</script>

<script setup lang="ts">
definePageMeta({
  layout: "moulages",
});

const { data } = useMoulagesCarsAccepted();
</script>

// rejected
<script lang="ts">
import { useMoulagesCarsRejected } from "~/loaders";
export { useMoulagesCarsRejected };
</script>

<script setup lang="ts">
definePageMeta({
  layout: "moulages",
});

const { data } = useMoulagesCarsRejected();
</script>

Loaders

export const useMoulagesCarsUnsorted = defineColadaLoader(
  "moulages-cars-unsorted",
  {
    key(route) {
      const input = route.query.input;
      const key = ["cars", "unsorted"];
      if (typeof input === "string") key.push(input);
      return key;
    },
    query(route, ctx) {
      console.error("unsorted");
      const inputs = decodeQueryInput(route.query.input);
      inputs.rootConditions = [
        {
          a: "sortingStatus",
          o: FEILD_OPARATOR_ENUM.IS,
          v: CAR_SORTING_STATUS_ENUM.UNSORTED,
        },
      ];
      return $fetch("/api/cars", {
        signal: ctx.signal,
        query: {
          input: encodeQueryInput(inputs),
        },
      });
    },
    placeholderData(data) {
      return data;
    },
    lazy: (to, from) => !!(from && to.name === from.name),
  },
);

export const useMoulagesCarsRejected = defineColadaLoader(
  "moulages-cars-rejected",
  {
    key(route) {
      const input = route.query.input;
      const key = ["cars", "rejected"];
      if (typeof input === "string") key.push(input);
      return key;
    },
    query(route, ctx) {
      console.error("rejected");
      const inputs = decodeQueryInput(route.query.input);
      inputs.rootConditions = [
        {
          a: "sortingStatus",
          o: FEILD_OPARATOR_ENUM.IS,
          v: CAR_SORTING_STATUS_ENUM.REJECTED,
        },
      ];
      return $fetch("/api/cars", {
        signal: ctx.signal,
        query: {
          input: encodeQueryInput(inputs),
        },
      });
    },
    placeholderData(data) {
      return data;
    },
    lazy: (to, from) => !!(from && to.name === from.name),
  },
);

export const useMoulagesCarsAccepted = defineColadaLoader(
  "moulages-cars-accepted",
  {
    key(route) {
      const input = route.query.input;
      const key = ["cars", "accepted"];
      if (typeof input === "string") key.push(input);
      return key;
    },
    query(route, ctx) {
      console.error("accepted");
      const inputs = decodeQueryInput(route.query.input);
      inputs.rootConditions = [
        {
          a: "sortingStatus",
          o: FEILD_OPARATOR_ENUM.IS,
          v: CAR_SORTING_STATUS_ENUM.ACCEPTED,
        },
      ];
      return $fetch("/api/cars", {
        signal: ctx.signal,
        query: {
          input: encodeQueryInput(inputs),
        },
      });
    },
    placeholderData(data) {
      return data;
    },
    lazy: (to, from) => !!(from && to.name === from.name),
  },
);

InvalidateQueries (CarReject.vue)

<script setup lang="ts">
import type { ICar, ICarUpdateSortingStatus } from "#shared/schema/car";
import { CAR_SORTING_STATUS_ENUM } from "#shared/schema/car";

const props = defineProps<{
  id: ICar["id"];
}>();

const queryCache = useQueryCache();

const mutation = useMutation({
  mutation(body: ICarUpdateSortingStatus) {
    return $fetch("/api/cars/sorting-status", {
      method: "PUT",
      body,
    });
  },
  async onSettled() {
    console.error("onSettled", "reject");
    queryCache.invalidateQueries({ key: ["cars"] });
  },
});

function onClick(e: Event) {
  e.preventDefault();

  mutation.mutate({
    ids: [props.id],
    sortingStatus: CAR_SORTING_STATUS_ENUM.REJECTED,
  });
}
</script>

<template>
  <Button @click="onClick">Отклонить</Button>
</template>

// pinia/colada dist
  const invalidateQueries = action((filters) => {
    return Promise.all(
      getEntries(filters).map((entry) => {
        invalidate(entry); console.error('invalidateQueries', entry, entry.active, toValue(entry.options?.enabled));
        return entry.active && toValue(entry.options?.enabled) && fetch(entry);
      })
    );
  });

2025-03-11.10-01-39.mp4

[teleskop150750]

[DEL]

[teleskop150750]

Maybe the problem is that I initially open the page with the loader. (Nuxt SSR false). If I open the site on a normal page, then there seem to be no problems.

[posva]

What is the actual problem? Here you are adding console logs but what invalidation isn't working? It would be helpful for me if you boil down the repros: no nuxt, no loaders, no mono repo, etc. It's a lot of extra work for me to check otherwise. Note that I do provide support for this kind of things.

If the entry isn't active, it won't be fetched automatically to avoid wasting resources

[teleskop150750]

@posva
I open a new issue
posva/unplugin-vue-router#598