Skip to content

(vue) useQuery loses typing of variables #3733

Open
@arkandias

Description

@arkandias

Describe the bug

I'm using GraphQL codegen for typing. Here is an MWE (I also made a repo to show the issue -- see the reproduction link):

const AllFilmsQuery = graphql(/* GraphQL */ `
  query AllFilmsWithVariablesQuery($first: Int!) {
    allFilms(first: $first) {
      edges {
        node {
          id
        }
      }
    }
  }
`)

// These variables should raise a type error:
useQuery({
  query: AllFilmsQuery,
  variables: { first: null } // wrong type
})
useQuery({
  query: AllFilmsQuery,
  variables: {  } // missing field
})
useQuery({
  query: AllFilmsQuery,
  variables: { foo: 'bar' } // extra field
})

The problem comes from this commit. If you revert

type MaybeRefObj<T> = T extends {} ? {
    [K in keyof T]: MaybeRef<T[K]>;
} : T;

to

type MaybeRefObj<T extends {}> = { [K in keyof T]: MaybeRef<T[K]> };

then the type of the variables is correctly inferred, and the above examples produce a type error.

Not sure if one can revert the aforementioned commit without breaking something else... (I can investigate if need be.)

Reproduction

https://github.com/arkandias/urql-vue-variables-typing-issue

Urql version

"dependencies": {
"@urql/vue": "^1.4.2",
"graphql": "^16.10.0",
"vue": "^3.5.13"
},
"devDependencies": {
"@graphql-codegen/cli": "^5.0.3",
"@graphql-codegen/client-preset": "^4.5.1",
"@graphql-typed-document-node/core": "^3.2.0",
"@vitejs/plugin-vue": "^5.2.1",
"@vue/tsconfig": "^0.7.0",
"typescript": "~5.6.3",
"vite": "^6.0.5",
"vue-tsc": "^2.2.0"
}

Validations

  • I can confirm that this is a bug report, and not a feature request, RFC, question, or discussion, for which GitHub Discussions should be used
  • Read the docs.
  • Follow our Code of Conduct

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