Interfaces & Unions

Baeta supports both GraphQL Interfaces and Unions. Interfaces allow you to define common fields that multiple types can share, while Unions let you combine different types into a single field.

For more detailed information about Interfaces and Unions, check out the official GraphQL documentation.

Interfaces

Interfaces define a common set of fields that multiple types must implement.

Defining an Interface

src/modules/comic/comic.gql

interface Readable {
  id: ID!
  pages: Int!
}

type Comic implements Readable {
  id: ID!
  title: String!
  year: Int!
  artist: String!
  pages: Int!
}

type Book implements Readable {
  id: ID!
  title: String!
  year: Int!
  author: String!
  pages: Int!
}

Unions

Unions allow you to combine multiple types into a single field, without requiring common fields.

Defining a Union

src/modules/media/media.gql

type Movie {
  id: ID!
  title: String!
  year: Int!
}

type TVShow {
  id: ID!
  title: String!
  year: Int!
  seasons: Int!
}

union Media = Movie | TVShow | Book

type Query {
  media: [Media!]!
}

Extending Unions

You can extend existing unions to add more types:

extend union Media = Comic

Type Resolution

Baeta requires you to include a __typename field when returning union or interface types. The generated TypeScript types enforce this — you'll get a type error if __typename is missing.

This eliminates the need for a custom resolveType function, as GraphQL can determine the concrete type directly from __typename.

Resolvers

Here's an example of resolving a union field. Note how each item includes __typename:

const mediaQuery = Query.media.resolve(() => {
  return [
    {
      __typename: "Book" as const,
      id: "1",
      title: "The Book",
      author: "Jon Doe",
      year: 2021,
      pages: 100,
    },
    {
      __typename: "Movie" as const,
      id: "2",
      title: "The Movie",
      year: 2022,
    },
    {
      __typename: "TVShow" as const,
      id: "3",
      title: "The TV Show",
      year: 2023,
      seasons: 1,
    },
    {
      __typename: "Movie" as const,
      id: "4",
      title: "Another Movie",
      year: 2023,
    },
  ];
});