useAsyncGraphqlQuery

This is a convenience wrapper for using useGraphqlQuery inside useAsyncData:

const { data } = await useAsyncGraphqlQuery('users')

This is identical to:

const { data } = await useAsyncData(() => useGraphqlQuery('users'))

It also works with variables which may also be reactive, in addition to providing options for useAsyncData:

const route = useRoute()

const variables = computed<UserByIdQueryVariables>(() => {
  const id = route.params.id.toString()
  return {
    id,
  }
})

const { data: user } = await useAsyncGraphqlQuery('userById', variables, {
  transform: function (v) {
    return v.data.userById
  },
})

This will automatically add the provided variables to the watch property in the useAsyncData options. Meaning, the query is automatically refreshed when variables changes.