Resolving the "Abstract type N must be an Object type at runtime" error in GraphQL Server Union Types

Question

Resolving the "Abstract type N must be an Object type at runtime" error in GraphQL Server Union Types

Given a unique GraphQL union return type:

union GetUserProfileOrDatabaseInfo = UserProfile | DatabaseInfo

meant to be returned by a specific resolver:

type Query {
  getUserData: GetUserProfileOrDatabaseInfo!
}

I am encountering warnings and errors related to the __resolveType or __isTypeOf function:

The abstract type M must resolve to an Object type at runtime for field Query.getUserData with value { ..., __isTypeOf: [function __isTypeOf] }, received "undefined". Either the M type should provide a "resolveType" function or each possible type should provide an "isTypeOf" function.'

After extensive research on GitHub issues and Stack Overflow questions, I have yet to find a solution to fix this error.

Implementing __resolveType or __isTypeOf in my resolvers has been unsuccessful:

export const Query = {
  getUserData: (parent, args, context: IContext, info) => {
    return {
      __isTypeOf(obj) { // OR __resolveType, none of them work
        return `UserProfile`;
      },
      data: []
    };
  },
};

typescript graphql

Answer 1

Answer №1

After struggling with implementing __resolveType or __isTypeOf in my resolvers, I finally found a solution by directly adding the __typename into the resolver return Object to resolve the issue.

In the implementation of the getBankAccounts resolver:

async getBankAccounts(): GetBankAccountsResponseOrUserInputRequest {
    if (shouldGetUserInputRequest()) {
      return {
        __typename: "UserInputRequest",
        ...response,
      };
    }

    return {
      __typename: "GetAccountsResponse",
      accounts,
    };
  }

I hope this solution can be useful for someone facing a similar challenge.

Answer 2

After struggling with implementing __resolveType or __isTypeOf in my resolvers, I finally found a solution by directly adding the __typename into the resolver return Object to resolve the issue.

In the implementation of the getBankAccounts resolver:

async getBankAccounts(): GetBankAccountsResponseOrUserInputRequest {
    if (shouldGetUserInputRequest()) {
      return {
        __typename: "UserInputRequest",
        ...response,
      };
    }

    return {
      __typename: "GetAccountsResponse",
      accounts,
    };
  }

I hope this solution can be useful for someone facing a similar challenge.

Answer 3

Answer №2

Your resolver map is not configured correctly.

When passing the resolver map to ApolloServer (or makeExecutableSchema), it should be an object with keys representing type names in your schema. Each key should map to another object with field names on that type, each mapping to a resolver function.

const resolvers = {
  SomeType: {
    someField: (parent, args, context, info) => { ... },
  },
}

The same resolver map is used for providing the resolveType function for unions or interfaces. The structure remains similar, but the key becomes __resolveType and corresponds to the union or interface's name:

const resolvers = {
  SomeType: {
    someField: (parent, args, context, info) => { ... },
  },
  SomeUnion: {
    __resolveType: (parent) => { ... },
  }
}

The resolveType function must return a string matching an existing object type in your schema.

If you opt for __isTypeOf over __resolveType, note that isTypeOf is specific to an object type and not the interface or union itself. Refer to the docs for clarity. In this case, the resolver map looks like:

const resolvers = {
  SomeType: {
    someField: (parent, args, context, info) => { ... },
    __isTypeOf: (parent) => { ... },
  },
}

__isTypeOf should always return either true or false, confirming if the passed object matches the type.

Choose between __resolveType or __isTypeOf; using the latter requires adding it to every possible object type in the union or interface.

Answer 4

Your resolver map is not configured correctly.

When passing the resolver map to ApolloServer (or makeExecutableSchema), it should be an object with keys representing type names in your schema. Each key should map to another object with field names on that type, each mapping to a resolver function.

const resolvers = {
  SomeType: {
    someField: (parent, args, context, info) => { ... },
  },
}

The same resolver map is used for providing the resolveType function for unions or interfaces. The structure remains similar, but the key becomes __resolveType and corresponds to the union or interface's name:

const resolvers = {
  SomeType: {
    someField: (parent, args, context, info) => { ... },
  },
  SomeUnion: {
    __resolveType: (parent) => { ... },
  }
}

The resolveType function must return a string matching an existing object type in your schema.

If you opt for __isTypeOf over __resolveType, note that isTypeOf is specific to an object type and not the interface or union itself. Refer to the docs for clarity. In this case, the resolver map looks like:

const resolvers = {
  SomeType: {
    someField: (parent, args, context, info) => { ... },
    __isTypeOf: (parent) => { ... },
  },
}

__isTypeOf should always return either true or false, confirming if the passed object matches the type.

Choose between __resolveType or __isTypeOf; using the latter requires adding it to every possible object type in the union or interface.

Resolving the "Abstract type N must be an Object type at runtime" error in GraphQL Server Union Types

Answer №1

Answer №2

Similar questions

Issues arise with the escape key functionality when attempting to close an Angular modal

Guide on formatting the API response using a callback function in Angular development

Passing a reference to a react functional component (react.FC) results in a type error: The property ref is not recognized on the type 'IntrinsicAttributes & Props & { children: ReactNode}'

Enable the use of unfamiliar techniques on object

Tips for showcasing an array's values as a list of comma-separated values

What could be the reason for ngOnChanges lifecycle hook not getting invoked?

Error in React Router when using TypeScript

A guide to implementing localStorage in TypeScript

Can someone please explain how to bring in the Sidebar component?

What are some ways to resolve this console error: "TS2307: Could not locate module '@components/common/ButtonBlock' or its corresponding type declarations."

Having trouble debugging the current TypeScript file in VS Code because the corresponding JavaScript file is missing

Developing UIs in React that change dynamically according to the radio button chosen

Accessing information from an Odata controller in Angular2

Error: The current call does not match any existing overloads - TypeScript, NextJS, styled-components

The Challenge of Iterating Through an Array of Objects in Angular Components using TypeScript

Executing Multiple Requests Concurrently in Angular 5 using forkJoin Technique

What is the ideal configuration for Typescript within ASP.NET 4 MVC 5 on Visual Studio 2015?

Upon running the code, no errors appear on the console. However, my project isn't functioning properly and I'm encountering errors on the web console

Resolving the Challenge of Disabling typescript-eslint/typedef in Angular 13 with ESlint

What is the method for implementing type notation with `React.useState`?