-
-
Notifications
You must be signed in to change notification settings - Fork 522
Description
Description
The UseLazyQueryReturn type is currently only defined in the internal dist typings of @vue/apollo-composable, and not exported as part of the public API.
This makes it hard to use useLazyQuery in a type-safe way, because importing from dist:
- is fragile (internal paths can change without notice),
- breaks the idea of a stable public API surface,
- is inconsistent with
useQuery, which does exportUseQueryReturn.
Steps to reproduce
- Install
@vue/apollo-composable@4.2.1 - Try to import
UseLazyQueryReturn:
import type { UseLazyQueryReturn } from '@vue/apollo-composable'- Type is not available. It only exists under:
import type { UseLazyQueryReturn } from '@vue/apollo-composable/dist/useLazyQuery'Questions
- Is there a reason why UseLazyQueryReturn isn’t exported publicly like UseQueryReturn?
- Do I need to upgrade to a newer version where this is fixed?
- Has anyone found a clean workaround without importing from dist?
Workaround
For now, the only safe workaround is to redeclare the type locally in the project.
For example:
import type { OperationVariables } from '@apollo/client/core'
import type { DocumentNode } from 'graphql'
import type {
DocumentParameter,
OptionsParameter,
UseQueryOptions,
UseQueryReturn,
VariablesParameter
} from '@vue/apollo-composable'
export interface UseLazyQueryReturn<TResult, TVariables extends OperationVariables>
extends UseQueryReturn<TResult, TVariables> {
load: (
document?: DocumentNode | null,
variables?: TVariables | null,
options?: UseQueryOptions | null
) => false | Promise<TResult>
}
export declare function useLazyQuery<
TResult = unknown,
TVariables extends Record<string, unknown> = Record<string, unknown>
>(
document: DocumentParameter<TResult, TVariables>,
variables?: VariablesParameter<TVariables>,
options?: OptionsParameter<TResult, TVariables>
): UseLazyQueryReturn<TResult, TVariables>Environment
- @vue/apollo-composable: 4.2.1
- Vue 3 + TypeScript project
I couldn’t find an existing issue on this.
I assume I’m not the only one hitting this problem — how are others implementing useLazyQuery with proper TypeScript support?
Thanks a lot in advance 🙏
Looking forward to your feedback and guidance!
Update
Since I've noticed that useLazyQuery extends useQuery,
it seems that the public type could simply extend UseQueryReturn and add the load method.
import type { UseQueryReturn, UseQueryOptions } from '@vue/apollo-composable'
import type { OperationVariables } from '@apollo/client/core'
export type UseLazyQueryReturn<TResult, TVariables extends OperationVariables> =
UseQueryReturn<TResult, TVariables> & {
load: (
variables?: TVariables | null,
options?: UseQueryOptions | null
) => false | Promise<TResult>
}Would that be the right way to expose it in a clean and consistent manner?
Thanks a lot in advance 🙏 Looking forward to your feedback!