how to generate types

[XPOL555]

In documentation there is a reference to types: https://strapi.nuxtjs.org/usage#types

Also in asyndata https://strapi.nuxtjs.org/advanced#async-data
there is a reference to ~/types

<script setup lang="ts">
import type { Restaurant } from '~/types'

const route = useRoute()
const { findOne } = useStrapi4()

const { data, pending, refresh, error } = await useAsyncData(
  'restaurant',
  () => findOne<Restaurant>('restaurants', route.params.id)
)
</script>

Where is this file generated? Documentation is totally unclear in this part for me.

[benjamincanac]

Hello @XPOL555,

In the documentation the types are an example of what you might have in your nuxt app. Those are not auto-generated, you have to define them yourself by creating a types/index.ts for example:

export interface Restaurant {
  id: number
  name: string
}

[XPOL555]

Thank you @benjamincanac

I've used graphql-codegen a lot and this might be interesing. I hate passing through graphql but it helps in this case.

This is a basic codegen.ts file

import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  overwrite: true,
  schema: "schema.graphql",
  documents: "graphql/**/*.graphql",
  generates: {
    "gql.ts": {
      plugins: [
          "typescript"
      ]
    }
  }
};

export default config;

Then you run yarn codegen and it will generate a gql.ts file

So you can import the type from that file like this

<script lang="ts" setup>

import {Frontpage} from "~/gql";

const { findOne } = useStrapi<Frontpage>()
const {data} = await findOne<Frontpage>('frontpage')
console.log(data)


</script>

ℹ️ Be sure to have the strapi graphql plugin enabled and the route /graphql exposed.

You can use a schema url also (see the docs)

[benjamincanac]

@XPOL555 Thanks for your example! This would be a nice addition to the advanced section of the documentation if you have some spare time 😊