Refresh in queries happens outside of application context?

[amandesai01]

The code to fetch data relies on injected values. This works in first fetch. But when I refetch, or auto refetched after stale time, it blows up. On debugging, I understood that refetch occurs outside of Nuxt app context and thus can't access injected values.

How can I tackle this? Is there a way to bind values?

Code:

export const useRawAPI = () => {
  const apiToken = inject<string | undefined>(API_OVERRIDE_API_TOKEN, undefined);
  const $api = makeOFetch(apiToken);
  const useRawFetch: typeof useFetch = (arg1, arg2, ...args) => {
    return useFetch(
      arg1,
      {
        ...arg2,
        $fetch: $api,
      },
      ...args
    );
  };
  return { $api, useRawFetch };
};

export const projectsQuery = defineQueryOptions(() => ({
  key: ['projects'],
  query: () => {
    const { $api } = useRawAPI();
    return $api('/api/projects');
  },
  staleTime: DEFAULT_STALE_TIME,
}));

[posva]

You can pass arguments to the function of defineQueryOptions:

export const projectsQuery = defineQueryOptions(($api: ReturnType<typeof useRawAPI>['$api']) => ({
  key: ['projects'],
  query: () => {
    return $api('/api/projects');
  },
  staleTime: DEFAULT_STALE_TIME,
}));

const { $api } = useRawAPI()
useQuery(projectsQuery, () => $api)
// or in your case, since `$api` doesn't change, you can also do
useQuery(projectsQuery($api))

It would be great to document this and push a bit more defineQueryOptions and what it is in docs

[amandesai01]

but this would then require me to useRawAPI everywhere I use the query. This is exactly what I want to avoid. Any other workaround?

[posva]

You can also put those two lines of code into its own composable if it’s used everywhere. If your $api is implemented using inject provide, you will have to inject it unfortunately
Query options can be called anywhere so they can’t use injections:

export const projectsQuery = defineQueryOptions(($api: ReturnType<typeof useRawAPI>['$api']) => ({
  key: ['projects'],
  query: () => {
    return $api('/api/projects');
  },
  staleTime: DEFAULT_STALE_TIME,
}));

export function useProjectsQuery() {
	const { $api } = useRawAPI()
	return useQuery(projectsQuery($api))
}

another option not always possible is using a global (not safe for SSR)

[husayt]

useQuery(projectsQuery($api))

There is also useQuery(()=>projectsQuery($api)) and that is probably is where everyone get's confused. defineQueryOptions has many parallel ways to call and it's not clear when should each one be used.

[posva]

They don’t do the same, the second preserves reactivity. This is a Vue thing