vue-apollo - 类型“只读”上不存在属性“值” <ref<readonly<any> &gt;&gt;' </ref<readonly<any>

Question

THE SITUATION:

I am trying to integrate vue-apollo v4 with Typescript.

I am fetching a simple query using useQuery and useResult .

useResult by default return this type: Readonly<Ref<Readonly<any>>>

THE CODE:

import { GET_COUNTRY } from '../graphql/queries'
import { Country } from '../types'

setup() {
  const route = useRoute()
  const code = route.params.code

  const { result, loading } = useQuery(GET_COUNTRY, {code: code}, { 
    clientId: 'default', 
    fetchPolicy: 'cache-first'
  });
  const country = useResult(result, {}, (data) => data.country);

  console.log(country.name) // Property 'name' does not exist on type 'Readonly<Ref<Readonly<any>>>'.ts(2339)

  return {
    country,
    loading
  }
}

ATTEMPT 1:

const country: Country = useResult(result, {}, (data) => data.country);
// Type 'Readonly<Ref<Readonly<any>>>' is missing the following properties from type 'Country': native, phone, capital, currency, and 6 more.ts(2740)

ATTEMPT 2:

const country = useResult(result, {}, (data) => data.country as Country);
console.log(country.name) // Property 'name' does not exist on type 'Readonly<Ref<Readonly<any>>>'.ts(2339)

ATTEMPT 3:

const country: Country = useResult(result, {}, (data) => data.country as Country);
// Type 'Readonly<Ref<Readonly<Country | {}>>>' is missing the following properties from type 'Country': native, phone, capital, currency, and 6 more.ts(2740)

THE QUESTION:

Is it possible to combine useResult with my own Typescript interface ?

Answer 1

To type the result of useQuery() , specify it as a type argument:

const { result, loading } = useQuery<Country>(GET_COUNTRY, ⋯)
                                        👆

result and country are ref s, so to access the underlying data, unwrap them with .value :

const country = useResult(result, {}, (data) => data.country);
console.log(country.value.name);
                      👆