-
-
Notifications
You must be signed in to change notification settings - Fork 521
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/[email protected]
- 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!