What do you consider to be the best practice for using defineQueryOption?

[akfakf0509]

I’m planning to use defineQueryOptions to reuse query keys when calling useQuery and queryCache.invalidateQueries.

However, I’ve run into an issue.

To map data, I need to use composables such as use...Store or useI18n, but it doesn’t seem appropriate to use composables inside defineQueryOptions.

Would the best approach be to call the composables in the place where they are used and pass the results into defineQueryOptions? Or am I missing something in how this should be structured?

[posva]

What do you need to use from the other composables?

Ideally, you define a parameter and call the composables in the components, per usual:

export const profileQuery = defineQueryOptions((opts: { ... }) => ({
  // ...
})

// inside of setup
const store = useMyStore()
useQuery(() => profileQuery({ a: store. a }))

[akfakf0509]

Thank you for the quick response.
Reading my original post again, I realized that my actual concern was not very clear.

In my case, I map the fetch function through a Nuxt plugin.
As a result, I always need to call useNuxtApp().

const getSomeQueryOptions = defineQueryOptions(...);

function useSomeQuery() {
  const { $fetch } = useNuxtApp();

  const query = useQuery(() => ({
    ...getSomeQueryOptions({ $fetch, ... }),
    ...
  }));
}

Another common case is i18n support.

const getSomeQueryOptions = defineQueryOptions(...);

function useSomeQuery() {
  const { $fetch } = useNuxtApp();
  const { t } = useI18n();
  const formatNumber = useFormatNumber();

  const query = useQuery(() => ({
    ...getSomeQueryOptions({ $fetch, t, formatNumber, ... }),
    ...
  }));
}

function useFormatNumber() {
  const { locale } = useI18n();

  return (value: number) => {
    return new Intl.NumberFormat(locale.value, ...).format(value);
  };
}

This feels acceptable when used directly with useQuery, but it starts to look quite awkward in other places.

function useAction() {
  const { $fetch } = useNuxtApp();
  const { t } = useI18n();
  const formatNumber = useFormatNumber();

  const mutation = useMutation({
    onMutate: (vars: SomeType) => {
      const queryOptions = getSomeQueryOptions({
        $fetch,
        t,
        formatNumber,
      });

      const oldValue = queryCache.getQueryData(queryOptions.key);
      const newValue = getNewValue(vars);

      queryCache.setQueryData(queryOptions.key, newValue);

      return {
        queryOptions,
        oldValue,
        newValue,
      };
    },
    ...
    onSuccess: (_data, _vars, context) => {
      void queryCache.invalidateQueries({
        key: context.queryOptions.key,
      });
    },
  });
}

To me, this feels a bit too extreme, so I’m wondering whether there might be a more reasonable middle ground.

[posva]

I think that for globals like that, it's worth checking if they can be stored globally somewhere else.

The other solution is to call these composables within the function of defineQueryOptions, but then you are responsible for calling it only in composable places, it might be even be worth it to rename getSomeQueryOptions to useSomeQueryOptions