Generated (detailed) query types

[marceloverdijk]

I'm using the typescript-operations and typescript-generic-sdk plugins to generate type safe types for my Next.js application.

E.g. the following query document:

query tyreManufacturersPage {
  tyreManufacturers {
    id
    name
    country {
      alpha2Code
      name
    }
  }
}

results in the following types:

export type TyreManufacturersPageQuery = {
  tyreManufacturers: Array<{
    id: string
    name: string
    country: { alpha2Code: string; name: string }
  }>
}

Now on my page I want to use the data inside a Tanstack React Table.

So my Next.js page has something like:

interface TyreManufacturersPageProps {
  tyreManufacturersPageQuery: TyreManufacturersPageQuery
}

export const getStaticProps: GetStaticProps<TyreManufacturersPageProps> = async () => {
  const tyreManufacturersPageQuery = await f1db.tyreManufacturersPage()
  return {
    props: {
      tyreManufacturersPageQuery,
    },
  }
}

All good so far, but I basically need something now like:

type TyreManufacturer = {
  id: string
  name: string
  country: { alpha2Code: string; name: string }
}

so I could dome something like:

const columns: ColumnDef<TyreManufacturer>[] = [
    {
      accessorFn: row => row.name,
      id: 'name',
      header: () => <span>Name</span>,
    },
  .. etc

I think the generated GraphQL Codegen types inside the generated query interface types cannot be used independently, right?

[ardatan]

You can use fragments to have those types. GraphQL Code Generator will generate a type for each fragment definition.
Something like the following;

fragment SomeTyreManufacturer on TyreManufacturer {
  id: ID
   name: String
   country: Country
}