Code generation from schema in GraphQL - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ query_result

intermediate

What is the output of this GraphQL query?

Given the schema below, what will be the result of the query?

type Query {
  book(id: ID!): Book
}

type Book {
  id: ID!
  title: String!
  author: Author!
}

type Author {
  id: ID!
  name: String!
}

Query:

{
  book(id: "1") {
    title
    author {
      name
    }
  }
}

Assuming the data has a book with id "1", title "GraphQL Basics", and author name "Alice".

A {"errors": [{"message": "Field 'author' must be an object"}]}

B {"data": {"book": {"title": "GraphQL Basics", "author": "Alice"}}}

C {"data": {"book": {"title": "GraphQL Basics"}}}

D {"data": {"book": {"title": "GraphQL Basics", "author": {"name": "Alice"}}}}

💡 Hint

Remember that nested objects must be returned as objects, not strings.

The query requests the book's title and the author's name as a nested object. The correct output nests the author as an object with a name field.

🧠 Conceptual

intermediate

Which GraphQL schema type correctly represents a list of books?

You want to define a field books in your Query type that returns a list of Book objects. Which schema definition is correct?

A books: Book[]

B books: List<Book>

C books: [Book]

D books: {Book}

💡 Hint

GraphQL uses square brackets to denote lists.

In GraphQL schema language, lists are represented by square brackets around the type, e.g., [Book].

📝 Syntax

advanced

Identify the syntax error in this GraphQL schema snippet

Which option contains a syntax error in this GraphQL schema snippet?

type Query {
  user(id: ID!): User
}

type User {
  id: ID!
  name: String!
  email: String!
}

A

type User {
  id: ID!
  name: String!
  email String!
}

B

type User {
  id: ID!
  name: String!
  email: String!
}

C

type User {
  id: ID!
  name: String!
  email: String
}

D

type Query {
  user(id: ID!): User
}

💡 Hint

Check the syntax for field declarations in GraphQL schema.

Option A is missing a colon between the field name and its type, which is required in GraphQL schema.

❓ optimization

advanced

How to optimize a GraphQL query to avoid over-fetching?

You have a query fetching user with all fields including posts and each post's comments. You only need the user's name and the titles of their posts. Which query is optimized?

A { user(id: "1") { name posts { title } } }

B { user(id: "1") { id name email posts { id title content comments { id text } } } }

C { user(id: "1") { posts { title } } }

D { user(id: "1") { name posts { title comments { text } } } }

💡 Hint

Only request the fields you need to reduce data transfer.

Option A requests only the user's name and the titles of posts, avoiding unnecessary fields and nested comments.

🔧 Debug

expert

Why does this GraphQL query return an error?

Given the schema:

type Query {
  book(id: ID!): Book
}

type Book {
  id: ID!
  title: String!
  author: Author!
}

type Author {
  id: ID!
  name: String!
}

Why does this query cause an error?

{
  book(id: "1") {
    title
    author
  }
}

A Because the query is missing a mutation keyword

B Because 'author' is an object type and must have subfields selected

C Because 'title' is not a valid field of 'Book'

D Because 'book' requires a list of IDs, not a single ID

💡 Hint

In GraphQL, object fields require specifying subfields.

The 'author' field is an object type, so you must specify which fields of 'author' you want. Omitting subfields causes an error.

Practice

1. What is the main purpose of code generation from a GraphQL schema?

easy

A. To delete unused database tables

B. To manually write all database queries

C. To automatically create code based on the GraphQL schema

D. To convert GraphQL queries into HTML pages

Solution

1. Step 1: Understand code generation concept

   Code generation means creating code automatically from a source, here the GraphQL schema.

2. Step 2: Identify the purpose in GraphQL context

   In GraphQL, code generation helps create types and queries automatically from the schema to save time.

3. Final Answer:

   To automatically create code based on the GraphQL schema -> Option C

4. Quick Check:

   Code generation = automatic code creation [OK]

Hint: Code generation means automatic code creation from schema [OK]

Common Mistakes:

• Thinking code generation means manual coding
• Confusing code generation with deleting tables
• Assuming it converts queries to HTML

2. Which of the following is the correct way to specify the schema file in a GraphQL code generator config?

easy

A. "schema => './schema.graphql'"

B. "schema = './schema.graphql'"

C. "schema: schema.graphql"

D. "schema: './schema.graphql'"

Solution

1. Step 1: Recall config syntax for GraphQL code generator

   The config uses key-value pairs with colon and string paths in quotes.

2. Step 2: Identify correct syntax

   "schema: './schema.graphql'" uses colon and quotes correctly: "schema: './schema.graphql'".

3. Final Answer:

   "schema: './schema.graphql'" -> Option D

4. Quick Check:

   Config uses colon and quotes for paths [OK]

Hint: Config uses colon and quotes for file paths [OK]

Common Mistakes:

• Using equals sign instead of colon
• Omitting quotes around file path
• Using arrow syntax which is invalid here

3. Given this config snippet:

{
  schema: './schema.graphql',
  generates: {
    './src/types.ts': { plugins: ['typescript'] }
  }
}

What will be generated after running the code generator?

medium

A. A JavaScript file with database connection code

B. A TypeScript file with types matching the GraphQL schema

C. An HTML file showing the schema documentation

D. A JSON file with raw schema data

Solution

1. Step 1: Analyze the config's generates section

   The config says to generate './src/types.ts' using the 'typescript' plugin.

2. Step 2: Understand what the 'typescript' plugin does

   This plugin creates TypeScript types based on the GraphQL schema.

3. Final Answer:

   A TypeScript file with types matching the GraphQL schema -> Option B

4. Quick Check:

   typescript plugin = TypeScript types file [OK]

Hint: Plugin name hints the generated file type [OK]

Common Mistakes:

• Confusing TypeScript with JavaScript output
• Expecting HTML or JSON instead of types
• Ignoring the plugin specified

4. You run the GraphQL code generator but get an error: "Cannot find schema file './schema.graphql'". What is the most likely cause?

medium

A. The schema file path in the config is incorrect or file is missing

B. The code generator does not support GraphQL schemas

C. The output file path is invalid

D. The plugins array is empty

Solution

1. Step 1: Understand the error message

   The error says it cannot find the schema file at the given path.

2. Step 2: Identify the cause

   This usually means the path is wrong or the file does not exist at that location.

3. Final Answer:

   The schema file path in the config is incorrect or file is missing -> Option A

4. Quick Check:

   File not found = wrong path or missing file [OK]

Hint: Check schema file path and existence first [OK]

Common Mistakes:

• Blaming plugins or output path
• Assuming code generator lacks schema support
• Ignoring file system errors

5. You want to generate both TypeScript types and React hooks from your GraphQL schema. Which config snippet correctly sets this up?

hard

A. {
schema: './schema.graphql',
generates: {
'./src/types.ts': { plugins: ['typescript'] },
'./src/hooks.ts': { plugins: ['typescript-react-apollo'] }
}
}

B. {
schema: './schema.graphql',
generates: {
'./src/types.ts': { plugins: ['typescript-react-apollo'] },
'./src/hooks.ts': { plugins: ['typescript'] }
}
}

C. {
schema: './schema.graphql',
generates: {
'./src/types.ts': { plugins: ['react-hooks'] },
'./src/hooks.ts': { plugins: ['typescript'] }
}
}

D. {
schema: './schema.graphql',
generates: {
'./src/types.ts': { plugins: ['typescript'] },
'./src/hooks.ts': { plugins: ['react-hooks'] }
}
}

Solution

1. Step 1: Identify plugins for types and hooks

   'typescript' plugin generates TypeScript types; 'typescript-react-apollo' generates React Apollo hooks.

2. Step 2: Match plugins to correct output files

   Types go to './src/types.ts' with 'typescript'; hooks go to './src/hooks.ts' with 'typescript-react-apollo'.

3. Final Answer:

   Config with 'typescript' for types and 'typescript-react-apollo' for hooks -> Option A

4. Quick Check:

   Correct plugins match output files [OK]

Hint: Match plugins to output files by their purpose [OK]

Common Mistakes:

• Swapping plugins between files
• Using non-existent plugins like 'react-hooks'
• Missing one of the required plugins