Create GraphQL Endpoint for Magento 2.3 — Part 1
Tags: magento2, magento
Published: 2019-08-08 18:45:19

---
title: Create GraphQL Endpoint for Magento 2.3 — Part 1
published: true
tags: magento2,magento
canonical_url: https://larsroettig.dev/create-graph-ql-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)](https://magento-research.github.io/pwa-studio/venia-pwa-concept/setup/) with Magento.

Requirements:

- Installed [Magento 2.3](https://devdocs.magento.com/guides/v2.3/install-gde/composer.html)
- 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](https://github.com/php-fig/fig-standards/blob/master/accepted/PSR-0.md) 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](https://altair.sirmuel.design/)

[![image from GrapQL Editor](https://larsroettig.dev/static/3d8fad0f73996f9b2d1483944afd833a/dbb61/grapql.png "GrapQL Editor")](/static/3d8fad0f73996f9b2d1483944afd833a/00212/grapql.png)

* * *

Endpoint Url: **[https://your\_domain.test/graphql](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](https://gitlab.com/larsroettig/test_graphql/tree/v1)**