Typing response from find

[tjventurini]

Hi 👋

I'm new to this and I'm trying to work with the response of find but can't get the typing right.

This is how I use it.

<script setup lang="ts">
import type { Page } from '@/types/page'

const { find } = useStrapi()

const {
  data: pages,
  pending,
  status,
  refresh,
  error: pagesError,
} = await useAsyncData('pages', () => find<Page>('pages'))
</script>

export interface PageAttributes {
  title: string
}

export interface Page {
  id: string
  attributes: PageAttributes
}

So far so good. But when I try to use the response I get a type error, title does not exist on attributes of Page.

[vue-tsc] Property 'title' does not exist on type 'Page'.

<ul>
  <li v-for="page in pages?.data">Title: {{ page.attributes.title }}</li>
</ul>

What do I need to do, so the type of Page can be used and for example the title is available to me?

Thank you :)

[tjventurini]

Okey, I just found my problem 😅

The issue was the Page interface. Here is the working one.

export interface Page {
  title: string
}