Query depth and complexity in GraphQL - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to limit the query depth to 3.

GraphQL

const depthLimit = require('graphql-depth-limit');

const server = new ApolloServer({
  schema,
  validationRules: [depthLimit({ maxDepth: [1] })],
});

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

A5

B3

C10

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Using a depth limit that is too high or too low, which defeats the purpose of limiting query complexity.

Setting maxDepth to 3 limits the query depth to 3 levels, preventing overly deep queries.

2fill in blank

medium

Complete the code to add a complexity limit of 100 to the GraphQL server.

GraphQL

const { createComplexityRule } = require('graphql-validation-complexity');

const server = new ApolloServer({
  schema,
  validationRules: [createComplexityRule({ [1]: 100 })],
});

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

AmaxDepth

BmaxQuerySize

CmaxComplexity

DmaxFields

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing maxDepth with maxComplexity, which are different limits.

The maxComplexity option sets the maximum allowed complexity for a query.

3fill in blank

hard

Fix the error in the validation rules array to correctly apply both depth and complexity limits.

GraphQL

const server = new ApolloServer({
  schema,
  validationRules: [depthLimit({ maxDepth: 4 }), [1]({ maxComplexity: 150 })],
});

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

AcreateComplexityRule

BdepthLimit

CcomplexityLimit

DmaxComplexityRule

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-existent function name for complexity validation.

The function to create a complexity validation rule is createComplexityRule.

4fill in blank

hard

Fill both blanks to set a maximum query depth of 5 and maximum complexity of 200.

GraphQL

const server = new ApolloServer({
  schema,
  validationRules: [[1]({ maxDepth: 5 }), [2]({ maxComplexity: 200 })],
});

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

AdepthLimit

BmaxDepth

CcreateComplexityRule

DcomplexityLimit

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up function names or using incorrect ones.

depthLimit sets the max depth, and createComplexityRule sets the max complexity.

5fill in blank

hard

Fill all three blanks to create a GraphQL server with depth limit 4, complexity limit 120, and a custom error message 'Query too complex'.

GraphQL

const server = new ApolloServer({
  schema,
  validationRules: [
    [1]({ maxDepth: 4 }),
    [2]({ maxComplexity: 120, [3]: () => new Error('Query too complex') }),
  ],
});

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

AdepthLimit

BcreateComplexityRule

ConComplete

DcreateError

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect callback property names or missing the error function.

depthLimit sets the depth limit, createComplexityRule sets complexity, and onComplete defines a callback for when the complexity check fails.