How to use useStrapi with types

Discord Q&A frontend-questions
1

Hello, I am a bit confused with the useStrapi function.

by using this code:

const { find } = useStrapi()
const { data } = await find(‘articles’)

I can fetch my articles and In my template I can get access to them via just article.title

But the problem I have with this is that article.title returns this error:

Property ‘title’ does not exist on type ‘Strapi4ResponseData’

I can remedy this by doing article.attributes.title, and then that error goes away, but then I dont see my data as my data is not wrapped in attributes.

This topic has been created from a Discord post (1293475812384833608) to give it more visibility.
It will be on Read-Only mode here.
Join the conversation on Discord

2

Hi, how you can use useStrapi, because it seems nuxt doesnt import the module, however I can use useStrapiUrl, etc…

3

I see you have the Nuxt tag on so I am assuming you are using the nuxt strapi module, yes?
With Strapi4, the data sent back from the api is typically wrapped in the attributes object so the team behind nuxt-strapi created the find function and the type returned is the default shape of the object returned by Strapi 4(everything wrapped in the attributes object.

To get around this, you will have to create a type that is the shape of your data being returned and create your own custom client with the useStrapiClient composable.

The type can look something like this

/**
 * The shape of the payload returned from a findOne query
 */
export interface FindOne<T> {
  data: T;
  meta?: {
    pagination?: {
      page: number;
      pageSize: number;
      pageCount: number;
      total: number;
    }
  };
};

/**
 * The shape of the payload returned from a findMany query
 */
export interface FindMany<T> {
  data: T[];
  meta?: {
    pagination?: {
      page: number;
      pageSize: number;
      pageCount: number;
      total: number;
    }
  };
};

And the the client code would be something like this

const client = useStrapiClient();

// ...
await client<FindMany<Article>>("articles");
// ...