[QUESTION] Type inference for queries is no longer working with @vue/apollo-composable

[LouisMazel]

Hi,

I’m experiencing an issue with automatic type inference for GraphQL queries when using composables. I previously had it working, but it no longer works, and I can’t figure out why.

🎯 Context

• Framework: Vue 3
• Apollo Client version: 3.12.9
• @vue/apollo-composable version: 4.2.1
• Bundler: Vite
• Package manager: pnpm

🛠️ GraphQL Codegen configuration

I use graphql-codegen with the following config:

...
generates:
  ./src/models/generated/graphql/:
    preset: 'client'
    config:
      useTypeImports: true
    presetConfig:
      fragmentMasking: false
  ./src/models/generated/graphql/schema.graphql:
    plugins:
      - 'schema-ast'
    config:
      includeDirectives: true
      commentDescriptions: true
...

🛠️ TypeScript configuration for .gql files

declare module '*.gql' {
  import type { DocumentNode } from 'graphql';

  const value: DocumentNode;
  export = value;
}

🐛 Issue description

Type inference does not work as expected when using useLazyQuery with a DocumentNode.

Example code:

import BASKET_SUMMARY_QUERY from '@/graphql/queries/basketSummary.gql';

const { load, error, result } = useLazyQuery(BASKET_SUMMARY_QUERY, queryVariables, {
  errorPolicy: 'all',
  fetchPolicy: 'no-cache',
  keepPreviousResult: true,
  enabled,
});

❓ Questions

1. Is type inference via DocumentNode still expected to work with @vue/apollo-composable?
2. Is there any specific configuration needed to ensure TypeScript correctly infers query types?
3. Have there been any recent changes in @vue/apollo-composable or Apollo Client that might explain this behavior?

Thanks in advance for your help! 🙏

[ebisbe]

Did you solve it? I use a different configuration and it works for me. My only issue is that when using ref's on inputs I get a ~~warning~~ error. That's why I find out this issue of yours.

My codegen.ts looks like:

import { CodegenConfig } from '@graphql-codegen/cli'
import { config } from 'dotenv'
config({ path: '.env.pr.local' })

const { VITE_GRAPHQL_URL = 'default', AWS_APPSYNC_API_KEY = 'KEY' } = process.env

const graphqlConfig: CodegenConfig = {
  schema: [
    {
      [VITE_GRAPHQL_URL]: {
        headers: {
          'x-api-key': AWS_APPSYNC_API_KEY,
        },
      },
    },
    'awsAppSyncDirectives.graphql',
  ],
  documents: ['./src/graphql/**/*.ts'],
  generates: {
    './src/graphqlTypes.ts': {
      plugins: ['typescript', 'typescript-operations', 'typed-document-node'],
      config: {
        useTypeImports: true,
        nonOptionalTypename: true,
        scalars: {
          AWSEmail: 'string',
          ... 
        },
      },
    },
  },
}
export default graphqlConfig

I don't have a declare model as I use the document files that it generats ( I don't know if it's the recommended or not ).

 import { LogType, type Photo, PhotoLogsDocument } from '@/graphqlTypes'
 const { result, loading, error, fetchMore } = useQuery(PhotoLogsDocument, {
    input: { count, photoId: props.photo.id, logType: selectedTab },
  })