Skip to content

UseLazyQueryReturn type only available from dist instead of public export #1598

@maximilianfixl

Description

@maximilianfixl

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 export UseQueryReturn.

Steps to reproduce

  1. Install @vue/[email protected]
  2. Try to import UseLazyQueryReturn:
import type { UseLazyQueryReturn } from '@vue/apollo-composable'
  1. 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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions