Introduction

This tutorial is aimed at helping you understand how to work with parent and context data in GraphQL. By the end of this tutorial, you will be able to:

• Understand what parent and context data are in GraphQL
• Know how to use parent and context data in your resolver functions

Prerequisites:

• Basic understanding of JavaScript
• Familiarity with GraphQL and its syntax

Step-by-Step Guide

In GraphQL, each field on each type is backed by a function called the resolver which returns the value for that field. The resolver function in GraphQL receives four arguments:

• parent: This is the result of the parent resolver execution. This argument is useful when the field's value is a nested field within the parent value.
• args: The arguments provided for the field in the GraphQL query.
• context: This is an object that gets passed through the resolver chain and is useful for passing essential backend resources, such as a database connection.
• info: Contains information about the execution state of the query.

In this tutorial, we will focus on parent and context.

Parent

When a resolver is run, it uses the parent argument to fetch the data that the client is asking for. The parent argument represents the result returned from the resolver for the parent field, essentially the object that contains the current field.

Context

The context argument is a value that is provided to every resolver and holds important contextual information like the currently logged in user, database connection, etc.

Code Examples

Let's look at a simple example of using parent and context in a resolver.

const resolvers = {
  Query: {
    user: (parent, args, context, info) => {
      // Use context to access the database
      return context.db.loadUserByID(args.id);
    },
  },
  User: {
    posts: (parent, args, context, info) => {
      // Use parent to access the user that was returned in the parent resolver
      return context.db.loadPostsByUserID(parent.id);
    },
  },
};

In this example, we have two resolvers. The user resolver accesses the database from the context to fetch a user by their ID. The posts resolver then uses the parent argument to access the user object that was returned from the user resolver. It fetches the posts for this user from the database.

Summary

In this tutorial, we've learned about the parent and context arguments in GraphQL resolvers. We've learned that parent represents the result returned from the resolver for the parent field, and context is a value that holds important contextual information.

To further your understanding, you can:

• Try creating more complex resolver chains and see how the parent argument changes
• Experiment with different things you can pass in the context

Practice Exercises

1. Exercise: Create a resolver chain for a Blog -> Author -> Comments schema.

Solution:

const resolvers = {
  Blog: {
    author: (parent, args, context, info) => {
      return context.db.loadAuthorByID(parent.authorId);
    },
  },
  Author: {
    comments: (parent, args, context, info) => {
      return context.db.loadCommentsByAuthorID(parent.id);
    },
  },
};

1. Exercise: Create a resolver for a Post field that uses the context to check if a user is authenticated before returning the post.

Solution:

const resolvers = {
  Post: {
    post: (parent, args, context, info) => {
      if (!context.user.isAuthenticated) {
        throw new Error('Not authenticated');
      }
      return context.db.loadPostByID(args.id);
    },
  },
};

In the solution, we use the context to check if a user is authenticated. If they are not, we throw an error. If they are, we access the database from the context to fetch the post.