DEV Community

Lars Roettig
Lars Roettig

Posted on • Originally published at on

Create GraphQL Endpoint for Magento 2.3 — Part 1

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.


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)



// register our new Test_GraphQL

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

<?xml version="1.0" ?>
<config xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
   <module name="Test_GraphQL" setup_version="0.0.1">
         <module name="Magento_GraphQl"/>

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.


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,
        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


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

image from GrapQL Editor

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

An Test Query:

  pickUpStores {
      items {

Example Module:

Top comments (0)