Type Inference breaks with bundler resolution

[nuraeil]

Environment

• Operating System: Darwin
• Node Version: v20.7.0
• Nuxt Version: 3.10.1
• CLI Version: 3.10.0
• Nitro Version: 2.8.1
• Package Manager: [email protected]
• Builder: -
• User Config: ssr, devServer, vite, devtools, experimental, future, alias, modules, cookieControl, primevue, nuxtTypedRouter, authJs, security, delayHydration, build, postcss, runtimeConfig, nitro, app, sourcemap, typescript, bugsnag, apollo, colorMode, tailwindcss, i18n
• Runtime Modules: @formkit/[email protected], [email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @hebilicious/[email protected], [email protected], [email protected], [email protected], [email protected], @pinia/[email protected], @pinia-plugin-persistedstate/[email protected], @vueuse/[email protected], @dargmuesli/[email protected], @nuxt/[email protected], [email protected], [email protected]
• Build Modules: -

Describe the bug

With the switch in Nuxt version 3.10 to defaulting to the bundler resolution, this plugins type inference fully breaks. When using strict, the build process stops and throws the following error:

components/Bet/Moderation/AddRaceEntry.vue:508:18 - error TS7031: Binding element 'id' implicitly has an 'any' type.

This is what is displayed in VS Code when hovering over the variable for the destructured data.

Expected behaviour

When turning bundler resolution off, everything builds and type inference works.

nuxt.config.ts

future: {
  typescriptBundlerResolution: false,
},

Reproduction

https://stackblitz.com/edit/github-ohfhqq

Additional context

No response

Logs

No response

[nuraeil]

CC: @danielroe

[GreenmeisterDavid]

I've been stuck on trying to figure out why it does work for useQuery() but not for useLazyAsyncQuery() / useAsyncQuery() all morning, glad I came across your post!

I didnt figure out it was due to the bundler and made a quick wrapper to keep TS-support for now;

composables/useTypedLazyAsyncQuery.ts;

import type { DocumentNode } from "graphql";

export function useTypedLazyAsyncQuery<T>(
    query: DocumentNode
): Ref<T | undefined> {
    const { data } = await useLazyAsyncQuery<T>(query);
    return computed(() => data.value as T);
}

usage:

import type { GetShopsPreviewResult } from "~/types/generated/index"

import { GET_SHOPS_PREVIEW } from '~/graphql/queries/shops/getShopsPreview';
import { useTypedLazyAsyncQuery } from '@/composables/useTypedLazyAsyncQuery';

const data = await useTypedLazyAsyncQuery<GetShopsPreviewResult>(GET_SHOPS_PREVIEW);