nuxt-modules / apollo

Nuxt.js module to use Vue-Apollo. The Apollo integration for GraphQL.
https://apollo.nuxtjs.org
MIT License
929 stars 194 forks source link

Type Inference breaks with `bundler` resolution #593

Closed nuraeil closed 3 months ago

nuraeil commented 4 months ago

Environment

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.

image

Expected behaviour

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

nuxt.config.ts

future: {
  typescriptBundlerResolution: false,
},
image

Reproduction

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

Additional context

No response

Logs

No response

nuraeil commented 4 months ago

CC: @danielroe

GreenmeisterDavid commented 4 months ago

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);