Create GraphQL Endpoint for Magento 2.3

In this tutorial, we will implement a sample module with an essential endpoint without the database. At Tutorial 2 we will extend the test module with Declarative Schema for a new table, use data patch to import sample data to get a more dynamic endpoint.

But before we should take a short look at what is GraphQL, for me it is a powerful query language for API’s and convenient for javascript or Progressive Web App solutions (PWA). Magento 2 use GraphQL to connect there new PWA-Theme (Venia Storefront) with Magento.

Requirements:

Installed Magento 2.3
PHP 7.1 or 7.2

Recommended (Development):

bin/magento deploy:mode:set developer

Lets start with new Folder under app/code/Test/GraphQL in your installed magento.

1. Create new module registration.php - Path: (app/code/Test/GraphQL/registration.php)

<?php

declare(strict_types=1);

// register our new Test_GraphQL
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Test_GraphQL',
    __DIR__
);

2 Create new module.xml - Path: (app/code/Test/GraphQL/etc/module.xml)

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
   <module name="Test_GraphQL" setup_version="0.0.1">
      <sequence>
         <module name="Magento_GraphQl"/>
      </sequence>
   </module>
</config>

3. Create an GraphQL Schema File - Path: (app/code/Test/GraphQL/etc/schema.graphqls)

type Query {
    pickUpStores:pickUpStoresOutput @resolver(class: "\\Test\\GraphQL\\Model\\Resolver\\Store") @doc(description: "")
}
type pickUpStoresOutput {
    total_count: Int @doc(description: "")
    items: [pickUpStore] @doc(description: "")
}
type pickUpStore {
    name: String @doc(description: ""),
    street: String @doc(description: ""),
    street_num: String @doc(description: ""),
    city: String @doc(description: ""),
    postcode: String @doc(description: ""),
}

4. Implement a service class to handle a request by clients- Path (app/code/Test/GraphQL/Model/Resolver/Store.php)

! Importent @resolver(class: in schema.graphqls must be the PS-0 path from your php service class.

<?php
declare(strict_types=1);

namespace Test\GraphQL\Model\Resolver;

use Magento\Framework\GraphQl\Config\Element\Field;
use Magento\Framework\GraphQl\Query\ResolverInterface;
use Magento\Framework\GraphQl\Schema\Type\ResolveInfo;

class Store implements ResolverInterface
{
    /**
     * @inheritdoc
     */
    public function resolve(
        Field $field,
        $context,
        ResolveInfo $info,
        array $value = null,
        array $args = null
    ) {
        $stores = [
            [
                'name' => 'Brick and Mortar Kolbermoor',
                'street' => 'JosefMeier Straße',
                'street_num' => '1002',
                'postcode' => '83059',
            ],
            [
                'name' => 'Brick and Mortar Erfurt',
                'street' => 'Max Meier Straße',
                'street_num' => '102',
                'postcode' => '99338',
            ],
        ];
        return [
            'total_count' => count($stores),
            'items' => $stores
        ];
    }
}

Installation:

bin/magento module:enable Test_GraphQL
bin/magento setup:upgrade

Test for your new Endpoint (Client Sample Call)

I recommend as Testing client tool to use Altair GraphQL Client

Endpoint Url: https://your_domain.test/graphql

An Test Query:

{
  pickUpStores {
    total_count
      items {
        name
        street
        street_num
        postcode
      }
  }
}

Example Module:

https://gitlab.com/larsroettig/test_graphql/tree/v1

Blog

Create GraphQL Endpoint for Magento 2.3 — Part 1

Lars Roettig

Join Our Newsletter. No Spam, Only the good stuff.

Related