GraphQL Union Types at Woovi

GraphQL is a popular query language for APIs that provides a flexible and efficient way to retrieve data from a server. One of the key features of GraphQL is the ability to define union types, which allow you to return multiple object types from a single field. In this post, we will take a closer look at union types in GraphQL and how to implement them in JavaScript using the GraphQL.js library. We will cover the basics of union types, including their definition and usage, and explore real-world scenarios where they can be applied to simplify and improve the performance of your API. Whether you are a seasoned GraphQL developer or just starting out, this post will provide valuable insights into the power and versatility of union types.

Union types

Union types are very similar to interfaces, but they don't get to specify any common fields between the types.

See the official doc to understand more about the concept.

Union Types in GraphQL Code First

When coding with graphql code first you can declare your union type like below.

For the follow example lets have in mind the following scenario:

• we have an array field that is an array of payment methods
• this payment methods can be CREDIT_CARD | DEBIT_CARD
• when saving the payment method each one will have it own fields with one in common: method
• the method will carry the payment method type
• method: 'CREDIT_CARD'

Union Type - Sub Types

we start declaring a type for each payment method

export const PaymentMethodCreditCardType = new GraphQLObjectType({
  name: 'PaymentMethodCreditCard',
  fields: () => ({
    method: {
      type: new GraphQLNonNull(GraphQLString),
      resolve: (paymentMethodCreditCard) => paymentMethodCreditCard.method,
    },
  }),
});

export const PaymentMethodDebitCardType = new GraphQLObjectType({
  name: 'PaymentMethodDebitCard',
  fields: () => ({
    method: {
      type: new GraphQLNonNull(GraphQLString),
      resolve: (paymentMethodDebitCard) => paymentMethodDebitCard.method,
    },
  }),
});

Union Type - The Type itself

then, we declare the union type that will consume the both types above:

export const PaymentMethodUnionType = new GraphQLUnionType({
  name: 'PaymentMethodUnion',
  description:
    'Represents a generic payment method type (credit card | debit card)',
  types: () => [PaymentMethodCreditCardType, PaymentMethodDebitCardType],
  resolveType: (data: Record<string, unknown> | Record<string, unknown>) => {
    if (data.method === 'CREDIT_CARD') {
      return PaymentMethodCreditCardType.name;
    }

    if (data.method === 'DEBIT_CARD') {
      return PaymentMethodDebitCardType.name;
    }

    return null;
  },
});

note:

• the resolveType will receive the value passed from the parent
• since the field is an array it will be the items of array
• we map them by the method previously mentioned above
• then point to the right type

Union Type - Exposing it

We expose the paymentMethods as an array of the payment methods consuming the union type

paymentMethods: {
  type: new GraphQLList(PaymentMethodUnionType),
  resolve: (payment) => payment?.paymentMethods,
},

Union Type - Consuming it

In the frontend we just ask it to the graphql, for example, in a mutation where set the selected payment methods for it and return the field filled:

const query = graphql`
  mutation PaymentMethodAddMutation(
    $input: PaymentMethodAddInput!
  ) {
    PaymentMethodAdd(input: $input) {
      error
      payment
      id
      paymentMethods {
        ... on PaymentMethodCreditCard {
          method
        }
        ... on PaymentMethodDebitCard {
          method
        }
      }
    }
  }
`;

Now, you can have your payment methods having specific fields to each one.

---

If you want to work in a startup in its early stages, This is your chance. Apply today!

---

Woovi is a Startup that enables shoppers to pay as they please. To make this possible, Woovi provides instant payment solutions for merchants to accept orders.

If you want to work with us, we are hiring!

---

Photo of Martin Olsen na Unsplash