Use composables outside Vue setup function

[extrem7]

Vue 3.3 introduced the way of getting inject outside components: https://vuejs.org/api/application.html#app-runwithcontext

Could it be possible to call useQuery and other composables just inside runWithContext?

It could be really useful in router guards and other such places.

[romanslonov]

Agreed. Btw, is there a workaround for that now?

[DamianOsipiuk]

You can call vue-query from anywhere, but then you must pass queryClient as an option to useQuery manually instead of relying on automatic injection.
You can pass queryClient to VueQueryPlugin as well. So you can create it manually and pass it around if that is your use-case.

[andredewaard]

yes sorry the warning doesnt appear anymore, i was using the useQuery method which isn't allowed outside of components. Need to use the queryClient itself and use the function on there.

[armenr]

I'm using AWS Amplify with SSR + Nuxt3. Unfortunately, I have to do as their docs suggest, and implement an authGuard in the way that their docs state.

As a result, I get this error...and nothing I've tried is working (including encapsulating the useQuery in a composable outside the plugin's middleware).

03.auth-redirect.ts:63 [ERROR] 36:47.288 DEV - useQueryWrapper error Error: vue-query hooks can only be used inside setup() function or functions that support injection context.
    at useQueryClient (useQueryClient.ts:9:11)
    at useBaseQuery (useBaseQuery.ts:83:33)
    at useQuery (useQuery.ts:146:10)
    at 03.auth-redirect.ts:44:39
    at async router.js:138:39

import { experimental_createPersister } from '@tanstack/query-persist-client-core'
import { Amplify } from 'aws-amplify'
import type { GetUserQuery } from '~/API'
import config from '~/amplifyconfiguration.json'

const unprotectedRoutes = [
  'index',
  'signin',
  'signup',
  'recovery',
  'cause-areas',
  'demo-amplify',
  'cookie-policy',
  'privacy-policy',
  'recovery-confirm',
  'terms-of-service',
]

export default defineNuxtPlugin({
  name: 'AmplifyAuthRedirect',
  enforce: 'pre',
  setup() {
    addRouteMiddleware(
      'AmplifyAuthMiddleware',
      defineNuxtRouteMiddleware(async (to) => {
        try {
          // if we're running on the client, initialize Amplify
          if (process.client)
            Amplify.configure(config, { ssr: useRuntimeConfig().public.ssrEnabled })

          // does the user have a valid session?
          // !! deleted users still possess valid tokens for 1 hour (Cognito "feature")
          const { userId } = await useAuth().getCurrentUser()

          // if the user has a valid session, fetch their user data
          if (userId) {
            // testing simple getUser with Id query via vue-query

            // useNuxtApp().runWithContext(async () => await useQueryWrapper())

            if (process.client) {
              try {
                const { isLoading, isError, data, error } = useQuery({
                  queryKey: ['getUser'],
                  queryFn: async () => {
                    const { data } = await useLeanGraphql({
                      variables: { id: '9e98ae52-1f4b-47ad-9661-afb2c7efc653' },
                      graphqlAction: getUser,
                      fields: {
                        name: 'getUser',
                        fields: getUserSharedFields(true) as Field<GetUserQuery>['fields'],
                      },
                    })
                    return data
                  // console.log({ data })
                  },
                  persister: process.client ? experimental_createPersister({ storage: window.localStorage }) : undefined,
                })
                useLogger().info('useQueryWrapper', data)
              }
              catch (e) {
                useLogger().error('useQueryWrapper error', e)
              }
            }
            // existing pinia-based implementation
            if (useAuthStore().isLoggedIn === false) {
              // if not, fetch it from the API
              await useAuthStore().fetchCurrentUser(userId)
            }

            if (to.name === 'signin')
              return navigateTo('/feed')
          }
        }
        catch (e) {
          if (e instanceof Error && 'code' in e) {
            if (e.code === 'NotAuthorizedException') {
              useLogger().error('NotAuthorizedException')
              return
            }
          }

          if (!unprotectedRoutes.includes(to.name))
            return navigateTo('/signin')
        }
      }),
      { global: true },
    )
  },
})

Anyone got any ideas? I'm very stuck. I realize this is likely because it doesn't have/loses context.

I'm able to get this to run inside a pinia store (as a test), as well as on a page elsewhere in my app...no problem. But I cannot get this to run in this middleware, where I need it.

[andredewaard]

don't use useQuery outside the setup function but use the QueryClient instead
Example of mine auth guard

export async function authGuard(to: RouteLocationNormalized) {
  if (to.meta.requiresAuth) {
    const queryClient = useQueryClient()
    try {
      const data = await queryClient.ensureQueryData({
        ...authQueries.getMe(),
        revalidateIfStale: true
      })

      if (!data.id) throw new Error('Not authenticated')
    } catch (e) {
      queryClient.clear()
      return { name: 'auth-login' }
    }
  }
}

So your auth guard would be

try {
  const queryClient = useQueryClient()
  const data = queryClient.ensureQueryData({
    queryKey: ['getUser'],
    queryFn: async () => {
      const { data } = await useLeanGraphql({
        variables: { id: '9e98ae52-1f4b-47ad-9661-afb2c7efc653' },
        graphqlAction: getUser,
        fields: {
          name: 'getUser',
          fields: getUserSharedFields(true) as Field<GetUserQuery>['fields'],
        },
      })
      return data
    // console.log({ data })
    },
    persister: process.client ? experimental_createPersister({ storage: window.localStorage }) : undefined,
  }) 
  if (!data.id) throw new Error('Not authenticated')
} catch (e) {
  return navigateTo('/signin')
}

[DamianOsipiuk]

You can use useQuery outside of a component, but it needs 2 things:

• running inside effectScope() to prevent memory leaks
• running inside app.runWithContext() or passing queryClient instance as a second option to useQuery

[armenr]

Thanks for the kind and helpful replies @andredewaard + @DamianOsipiuk !

@DamianOsipiuk - I'm not exactly new to Nuxt or Vue, but this effectScope thing is over my head (...still learning, every day 😎 ).

In the case of the plugin I have to create, and the pre + global middleware I need to include with it, would you mind maybe helping me understand how the effectScope() bit fits in, if it's not too much to ask?

Thank you again! :)

[Mini-ghost]

Pardon I didn't notice this discussion, and i open a PR(#5703) to resolve this issue.

Instead of removing the error message reminding the user that it should be used in setup function, I try to inject first and only check which error message to use if queryClient cannot be obtained.

[lizyChy0329]

there are some demos for useQuery + effectScope?