How do you typically deal with union and interface types in your frontend event handlers

[jgoux]

Hello community!

We're introducing union and interfaces in our GraphQL API to unleash its true power 😄

I'm wondering how people are handling union and interfaces in their typical event handlers on the frontend in the context of TypeScript and graphql-codegen.

Right now I'm doing it "raw", just switching over the __typename values :

onClick={async () => {
          const { data } = await createTask({ input: { name: "hello" } });
          switch (data?.createTask?.__typename) {
            case "CreateTaskErrors":
              for (const error of data.createTask.errors) {
                switch (error.__typename) {
                  case "InputValidationError":
                    // do something with error.fieldErrors
                    break;
                  case "TaskAlreadyExists":
                    // do something with error.message
                    break;
                }
              }
              break;
            case "TaskCreated":
              // do something with data.createTask.task
              break;
          }

I'm wondering if they are codegen plugins or helpers that I can use to make this even simpler? How are you dealing with such structures? 😄