Getting error when using $csrfFetch (nuxt-csurf) inside defineQuery

[efdiloreto]

I have this reusable query, when I need to use $csrfFetch:

import { defineQuery, useQuery } from "@pinia/colada";

export const useProfile = defineQuery(() => {
  const { $csrfFetch } = useNuxtApp();

  return useQuery({
    key: ["profile"],
    refetchOnMount: false,
    query: async () => {
      const res = await $csrfFetch("/api/profiles", {
        method: "GET",
      });
      return res;
    },
  });
});

I'm using this query in a component and a page, however I'm getting an error when I open the page or access the route through the browser (not when navigating using from Nuxt):

500
[nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug. Find out more at `https://nuxt.com/docs/guide/concepts/auto-imports#vue-and-nuxt-composables`.

at useNuxtApp (.../node_modules/nuxt/dist/app/nuxt.js:251:13)
at useRuntimeConfig (.../node_modules/nuxt/dist/app/nuxt.js:260:10)
at useCsrf (.../node_modules/nuxt-csurf/dist/runtime/composables.js:19:64)
at onRequest (.../foulball/node_modules/nuxt-csurf/dist/runtime/plugin.js:8:69)
at callHooks (.../node_modules/ofetch/dist/shared/ofetch.03887fc3.mjs:137:13)
at $fetchRaw2 (.../node_modules/ofetch/dist/shared/ofetch.03887fc3.mjs:210:13)
at onError (.../node_modules/ofetch/dist/shared/ofetch.03887fc3.mjs:182:16)
at $fetchRaw2 (.../node_modules/ofetch/dist/shared/ofetch.03887fc3.mjs:273:20)
at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
at async $fetch2 (.../node_modules/ofetch/dist/shared/ofetch.03887fc3.mjs:319:15)

I tried also putting the

const { $csrfFetch } = useNuxtApp();

inside:

query: async () => {
      const res = await $csrfFetch("/api/profiles", {
        method: "GET",
      });
      return res;
    },

I there any chance that this being executed outside Nuxt context? I'm doing anything wrong?

[posva]

It all depends where you are calling useProfile, maybe it's called outside of Nuxt context

[efdiloreto]

I'm just calling it in a page and in a component that is part of the layout.

[posva]

Then maybe $crsfFetch calls useCsrf or useRuntimeConfig() and that's where the issue is coming from

[efdiloreto]

Will check that. Thanks!

Will mark it as an answer since everything is ok with pinia-colada.