typescriptvuejs3urql

How to retrieve by PK in URQL

I have an URQL GraphQL query which retrieves a single tuple based on the primary key field (id). I am having trouble with the syntax required to specify the query. I am using a'useQuery' hook generated by graphql-codegen.

GetOneOrgUnit.query.gql

query GetOneOrgUnit($id: uuid!) {
  OrgUnit_by_pk(id: $id) {
    id
    name
    parent_orgunit
  }
}

My Vue 3 code is:

<script setup lang="ts2>
import { useGetOneOrgUnitQuery } from '@/generated/graphql'

  const props = defineProps({
    id: {
      type: String,
      required: true
    }
  })

  const variables = {
    id: props.id
  }

  const result = useGetOneOrgUnitQuery(variables)

Typescript complains about the 'variables' parameter being passed in the last statement. The message received is:

const variables: {
    id: string;
}
Type '{ id: string; }' has no properties in common with type 'Omit<UseQueryArgs<never, Exact<{ id: string; }>>, "query">'.ts(2559)

What do I need to do here?

Thanks in advance.

Solution

  • Hmm - Simple I just needed to enclose 'variables' object in {}

    so

    const result = useGetOneOrgUnitQuery(variables)

    became

    const result = useGetOneOrgUnitQuery({variables})