Abstract type resolution in GraphQL - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define an interface named Character.

GraphQL

interface Character [1] {
  id: ID!
  name: String!
}

Drag options to blanks, or click blank then click option'

Aimplements

Bon

Ctype

Dinterface

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'type' instead of 'interface' to define an interface.

Using 'implements' or 'on' incorrectly here.

The keyword interface is used to define an interface in GraphQL.

2fill in blank

medium

Complete the code to make Human implement the Character interface.

GraphQL

type Human [1] Character {
  id: ID!
  name: String!
  totalCredits: Int
}

Drag options to blanks, or click blank then click option'

Aextends

Binherits

Cimplements

Don

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'extends' or 'inherits' which are not GraphQL keywords.

Using 'on' which is used in fragments, not type definitions.

The implements keyword is used for a type to implement an interface in GraphQL.

3fill in blank

hard

Fix the error in the fragment to specify the correct type condition.

GraphQL

fragment characterDetails on [1] {
  id
  name
}

Drag options to blanks, or click blank then click option'

ACharacter

BHuman

CQuery

DMutation

Attempts:

3 left

💡 Hint

Common Mistakes

Using a concrete type like 'Human' limits the fragment to that type only.

Using 'Query' or 'Mutation' which are root types, not interfaces.

Fragments on abstract types like interfaces use the interface name as the type condition.

4fill in blank

hard

Fill both blanks to define a union type SearchResult that includes Human and Droid.

GraphQL

union SearchResult = [1] | [2]

Drag options to blanks, or click blank then click option'

AHuman

BCharacter

CDroid

DStarship

Attempts:

3 left

💡 Hint

Common Mistakes

Including interfaces like Character in unions is not allowed.

Using unrelated types like Starship if not intended.

Union types list the possible types separated by |. Here, Human and Droid are included.

5fill in blank

hard

Fill all three blanks to write a query that fetches a character by ID and returns fields based on the concrete type.

GraphQL

query getCharacter($id: ID!) {
  character(id: $id) {
    id
    name
    ... on [1] {
      [2]
    }
    ... on [3] {
      primaryFunction
    }
  }
}

Drag options to blanks, or click blank then click option'

AHuman

BtotalCredits

CDroid

Dheight

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up type names in fragments.

Using fields that do not exist on the specified type.

The query uses inline fragments to fetch fields specific to Human and Droid types. Human has totalCredits, Droid has primaryFunction.

Practice

1. What is the main purpose of the __resolveType function in GraphQL when using interfaces or unions?

easy

A. To fetch data from the database

B. To validate the query syntax before execution

C. To define new scalar types

D. To determine the specific object type to return for an abstract type

Solution

1. Step 1: Understand abstract types in GraphQL

   Abstract types like interfaces or unions can represent multiple object types.

2. Step 2: Role of __resolveType

   This function tells GraphQL which concrete type to use for the returned data.

3. Final Answer:

   To determine the specific object type to return for an abstract type -> Option D

4. Quick Check:

   Abstract type resolution = determine specific type [OK]

Hint: Remember: __resolveType picks the exact type [OK]

Common Mistakes:

• Confusing __resolveType with data fetching
• Thinking it validates query syntax
• Assuming it defines scalar types

2. Which of the following is the correct way to define a __resolveType function in a GraphQL resolver object?

easy

A. resolveType(obj) { return obj.typeName; }

B. __resolveType(obj) { return obj.kind; }

C. __resolveType(obj) { return obj.__typename; }

D. __resolveType(obj) { return obj.type; }

Solution

1. Step 1: Check the naming and return value

   The function must be named exactly __resolveType and return a string matching a type name.

2. Step 2: Match the returned value to the data field

   Commonly, the field __typename holds the type name, so returning obj.__typename is correct.

3. Final Answer:

   __resolveType(obj) { return obj.__typename; } -> Option C

4. Quick Check:

   Correct function name and return field = __resolveType(obj) { return obj.__typename; } [OK]

Hint: Function must be named exactly __resolveType [OK]

Common Mistakes:

• Using wrong function name like resolveType
• Returning incorrect property like type
• Returning undefined or wrong field

3. Given this resolver snippet for a union type:

__resolveType(obj) {
  if (obj.price) return 'Book';
  if (obj.author) return 'Author';
  return null;
}

What will be the resolved type for { price: 20, author: 'John' }?

medium

A. Book

B. Author

C. null

D. Error

Solution

1. Step 1: Check conditions in order

   The function first checks if obj.price exists, which is true here.

2. Step 2: Return first matching type

   Since obj.price is true, it returns 'Book' immediately without checking further.

3. Final Answer:

   Book -> Option A

4. Quick Check:

   First true condition returns 'Book' [OK]

Hint: Check conditions top to bottom, first match wins [OK]

Common Mistakes:

• Assuming it returns 'Author' because author field exists
• Thinking it returns null if multiple fields exist
• Expecting an error for multiple matches

4. You wrote this __resolveType function:

__resolveType(obj) {
  if (obj.kind === 'User') return 'User';
  if (obj.kind === 'Admin') return 'Admin';
}

But your GraphQL query returns null for the type. What is the likely problem?

medium

A. Function name should be resolveType without underscores

B. Missing a return statement for unmatched cases

C. The kind field does not exist in obj

D. GraphQL does not support __resolveType for interfaces

Solution

1. Step 1: Check function completeness

   The function lacks a return for cases when obj.kind is neither 'User' nor 'Admin'.

2. Step 2: Understand GraphQL behavior

   If no type is returned, GraphQL resolves the type as null, causing query issues.

3. Final Answer:

   Missing a return statement for unmatched cases -> Option B

4. Quick Check:

   Always return a type or null explicitly [OK]

Hint: Always return a type or null in __resolveType [OK]

Common Mistakes:

• Using wrong function name without underscores
• Assuming missing return defaults to a type
• Believing GraphQL doesn't support __resolveType

5. You have a GraphQL interface Vehicle implemented by types Car and Bike. Your __resolveType function is:

__resolveType(obj) {
  return obj.wheels === 4 ? 'Car' : 'Bike';
}

If an object has { wheels: 0 }, what will happen when querying this interface?

hard

A. It will resolve to 'Bike' because wheels is not 4

B. It will resolve to 'Car' because 0 is falsy

C. It will cause a runtime error due to invalid wheels

D. It will return null and cause query failure

Solution

1. Step 1: Evaluate the ternary condition

   The condition checks if obj.wheels === 4. For 0, this is false.

2. Step 2: Determine returned type

   Since condition is false, it returns 'Bike'.

3. Final Answer:

   It will resolve to 'Bike' because wheels is not 4 -> Option A

4. Quick Check:

   Condition false returns 'Bike' [OK]

Hint: Check exact equality, not truthiness, in __resolveType [OK]

Common Mistakes:

• Confusing falsy 0 with true condition
• Expecting runtime error for zero wheels
• Assuming null return causes failure