I'm reusing the query in the right way?

[efdiloreto]

Hello! I'm using pinia-colada in Nuxt 3.

I have the following query in src/colada/queries/profile.ts

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

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

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

I'm calling that query in a component called user-menu.vue:

const {
  error,
  data,
  isLoading,
  refetch,
} = useProfile();

and in a profiles.vue page:

const {
  error,
  data,
  isLoading,
  refetch,
} = useProfile();

It's working great since it's synchronized and everything. But I'm not sure if I should use the cached data on the page instead of running the query, because every time I leave the page and go back to it, it refetches the data.

The component is running first since is in the layout.

Any thoughts?

Thanks in advance!

[posva]

You can control that behavior with refetchOnMount (and similar options) + staleTime. Adapt them to your needs

[efdiloreto]

Thanks @posva . Are those option defined in useQuery or in defineQuery? Could you point me where I can find them?

[posva]

Those are in useQuery(), autocompletion is your friend 😄
https://pinia-colada.esm.dev/api/@pinia/colada/interfaces/DefineQueryOptionsTagged.html#refetchOnMount-

[efdiloreto]

Awesome! Yes, I was hesitating to ask that. But for some reason wasn't working. Thanks again!