dotansimha / dotansimha/graphql-code-generator

Urql variables should support Vue refs (MaybeRef)

Open
#9,976 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
11.3k
Forks
1.4k
Avg merge
1d 1h
Merged PRs (30d)
23

Description

### Which packages are impacted by your issue?

@graphql-codegen/typescript-vue-urql

### Describe the bug

Based on Urql vue [documentation](https://commerce.nearform.com/open-source/urql/docs/basics/vue/#variables)

> All inputs that are passed to useQuery may also be [reactive state](https://v3.vuejs.org/guide/reactivity-fundamentals.html). This means that both the inputs and outputs of useQuery are reactive and may change over time.

This functionality was added long time ago with this PR https://github.com/urql-graphql/urql/pull/2608

So we can set variable directly from ref.

`const page = ref(1)`

```
{
variables: {
page,
}
}
```

But it does not work with generated types, because TS expects type `number` and not `Ref`

> Type 'Ref' is not assignable to type 'number'.ts(2322)

Generated type looks like this:

```
type DemoQueryVariables = Exact<{
page?: InputMaybe;
}>;

```

I guess it supposed to be

```
import type { MaybeRef } from 'vue'

type DemoQueryVariables = Exact<{
page?: InputMaybe>;
}>;

```

### Your Example Website or App

https://stackblitz.com/edit/github-ecwtg1?file=index.ts

### Steps to Reproduce the Bug or Issue

1. Open index.ts in reproduction.
2. Look at wrong TS error.

### Expected behavior

There should be no TS errors while using refs or computed inside variables.

### Screenshots or Videos

_No response_

### Platform

- OS: Linux
- NodeJS: 22
- `graphql` version: 16.8.1
- `@graphql-codegen/typescript-vue-urql` version(s): 3.1.0

### Codegen Config File

_No response_

### Additional context

_No response_

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.