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:
Top comments (0)