typing for useXyzQuery helpers doesn't generate Ref type for variables (typescript-vue-urql plugin)

[farin]

Related to @graphql-codegen/typescript-vue-urql

Current implementation

useQuery from urlq supports Ref variables (with internal MaybeRef type as MaybeRef<T> = T | Ref<T>)

see following example

<script lang="ts" setup>
import { useQuery } from '@urql/vue'
import { ProductListDocument  } from '~~/generated/graphql'

const category = ref('fashion')
const { data } = useQuery({
  query: ProdudctListDocument,
  variables: { category, limit: 10 },
})
</script>

and such query is reactive. Reloading data every time category ref is changes

But generated helpers useProductListQuery in this case accepts only T, not Ref

Proposed usage

<script lang="ts" setup>
import { useQuery } from '@urql/vue'
import { useProductListQuery } from '~~/generated/graphql'

const category = ref('fashion')
const { data } = useProductListQuery({
  variables: { category, limit: 10 },
})
</script>

There is no reason for it as helpers is only wrapper around useQuery. (Someone can call this issue a bug instead of feature request)

[Tinoooo]

To make this work, you can wrap your variables in a computed.

<script lang="ts" setup>
import { useProductListQuery } from '~~/generated/graphql'

const category = ref('fashion')
const variables = computed(() => ({ category: category.value, limit: 10 }))

const { data } = useProductListQuery({ variables })
</script>

[lrstanley]

And if you're looking for Ref or ComputedRef via a lower level Maybe'd field, like I am:

schema: ../../../internal/graphql/schema/*.gql
documents: ./src/lib/api/*.gql
generates:
  ./src/lib/api/index.ts:
    plugins:
      - typescript
      - typescript-operations
      - typescript-vue-urql
    config:
      inputMaybeValue: T | Ref<T> | ComputedRef<T> # this specifically

[tdebooij]

I created a PR to fix this https://github.com/dotansimha/graphql-code-generator-community/pull/659 but so far have not heard anything

[yurks]

That's an issue with @urql/vue, which was fixed and released with v1.2.2.

So, all you need is update your project dependency to @urql/vue@1.2.2