How to add a custom field to Graphql schema

GraphQl, a query language for the APIs. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

Here in this blog, we will get to know how we can add our custom field to a predefined GraphQl schema.

Step 1: Register a custom module with registration.php and module.xml file.

Step 2: Create schema.graphqls file inside etc folder i.e, VendorName/CustomFieldGraphQl/etc/schema.graphqls
Here we will add our custom field customerFullName in customer API which will return the customer’s full name i.e, first name and last name.

type Customer @doc(description: "Customer defines the customer name and address and other details") {
    customerFullName: String @resolver(class:"\\VendorName\\CustomFieldGraphQl\\Model\\Resolver\\CustomerFullName")
}

Step 3: Now define the resolver class ie. CustomerFullName.php in the defined path.
A resolver performs GraphQL request processing. In general, it is responsible for constructing a query, fetching data, and performing any calculations, then transforming the fetched and calculated data into a GraphQL array format. Finally, it returns the results wrapped by a callable function.

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
declare(strict_types=1);

namespace VendorName\CustomFieldGraphQl\Model\Resolver;

/**
 * CustomerFullName field resolver, used for GraphQL request processing.
 */
class CustomerFullName implements ResolverInterface
{

    /**
     * @inheritdoc
     */
    public function resolve(
        Field $field,
        $context,
        ResolveInfo $info,
        array $value = null,
        array $args = null
    ) {
        
        return 'John Doe';
    }
}

That’s all we have to do. Now we will get John Doe as a customer’s full name in customerFullName key in the customer API.

Thank You
Happy Coding 🙂