Create GraphQL Endpoint for Magento 2.3 — Part 1

Lars Röttig
Aug 2 · 2 min read

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:

Recommended for Development set the developer mode:

  • bin/magento deploy:mode:set developer

Let's 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)

Important @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

A Test Query:

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

Example Module:


Originally published at https://larsroettig.dev.

Lars Röttig

Written by

Software Engineer @techdivision — Speaker, Author https://larsroettig.dev — Maintainer Community Engineering Team @magento

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade