Open Graph Meta Tags GraphQL for Magento Adobe Commerce

Compatible with Magento v2 Adobe Commerce - Open Source (CE), Commerce on-prem (EE), and Commerce on Cloud (ECE)!

Apptrian Open Graph Meta Tags GraphQL extension adds the GraphQL capability to the original Apptrian Open Graph Meta Tags extension. Being able to issue GraphQL queries is the first step in making your Magento Adobe Commerce frontend PWA compatible or connecting Magento to your native Android or iOS app.

GraphQL is a data query and manipulation language that allows specifying what data is to be retrieved or modified. A GraphQL server can process a client query using data from separate sources and present the results in a unified graph. The language is not tied to any specific database or storage engine.

In the Magento Adobe Commerce context, GraphQL is used to connect the Magento backend with your frontend. The backend does not need to know anything about the frontend, and the frontend does not need to know anything about the backend. The only thing that matters is that they both "speak" GraphQL.

Magento Adobe Commerce already has GraphQL add-ons for all or almost all of the core modules. These GraphQL add-ons allow Magento to work with PWA, Headless, and native Android or iOS apps. It does not matter which language, library, or framework the frontend uses. You can use React, React Native, Svelte, Vue, Angular, etc. The best example of this is the PWA Studio (Venia) frontend. Although PWA Studio is a React app, it seamlessly works with Magento Adobe Commerce because it can send GraphQL queries to the Magento backend and receive or modify data in Magento.

Just like Magento Adobe Commerce, third-party extensions also provide GraphQL add-ons to be compatible with PWA/Headless/Android/iOS apps.

Be aware having a GraphQL add-on only gives you the ability to issue queries. It does not provide the implementation of the extension functionality.

If you need PWA Studio implementation of our Open Graph Meta Tags extension, please check our Open Graph Meta Tags PWA Studio extension.

Installation Instructions

There are several ways you can install any Magento extension. Our extension is no different. We will show you three ways to install the extension, but you must not mix them. Choose one and stick to it.

If you do not know how to install an extension or you wish a professional to do it for you, we offer an additional installation service for a small fee.

Installation via file uploading
(If you purchased the extension on our site)

If you purchased the extension on our site then unpack .zip file from /Magento2/InstallByUploadingFiles/ directory inside your Magento root.
- Run the following commands on the Magento root directory:

php bin/magento maintenance:enable

php bin/magento module:enable --clear-static-content Apptrian_OpenGraphGraphQl

php bin/magento setup:upgrade

php bin/magento cache:flush

php bin/magento setup:static-content:deploy

php bin/magento maintenance:disable

php bin/magento cache:flush

Installation via Composer
(If you purchased the extension on our site)

If you purchased the extension on our site and you want to install the extension via composer public and private keys. (To find your public and private keys, login to your Apptrian.com customer account and look at the My Downloadable Products section.)
- Run the following commands on the Magento root directory:

php bin/magento maintenance:enable

composer config --auth http-basic.packages.apptrian.com $PUBLIC_KEY $PRIVATE_KEY

composer config repositories.apptrian-open-graph-graph-ql composer https://packages.apptrian.com/open-graph-graph-ql/

composer require apptrian/open-graph-graph-ql

php bin/magento module:enable --clear-static-content Apptrian_OpenGraphGraphQl

php bin/magento setup:upgrade

php bin/magento cache:flush

php bin/magento setup:static-content:deploy

php bin/magento maintenance:disable

php bin/magento cache:flush

Installation via Composer
(If you purchased the extension on Adobe Commerce Marketplace)

If you purchased the extension on Adobe Commerce Marketplace then you must use Composer. Adobe Commerce Marketplace does not allow extension downloads.
- Run the following commands on the Magento root directory:

php bin/magento maintenance:enable

composer require apptrian/open-graph-graph-ql

php bin/magento module:enable --clear-static-content Apptrian_OpenGraphGraphQl

php bin/magento setup:upgrade

php bin/magento cache:flush

php bin/magento setup:static-content:deploy

php bin/magento maintenance:disable

php bin/magento cache:flush

Please make sure your Magento public and private keys are in your Magento root auth.json file. Usually, people install Magento with one Adobe Commerce Marketplace account (public and private keys) and then purchase an extension with another Adobe Commerce Marketplace account (different public and private keys). Check the Adobe Commerce Marketplace account you used to purchase the extension and make sure its public and private keys are in the Magento root auth.json file. WARNING! If you already have keys there, be very careful because maybe some other extensions are purchased with another Adobe Commerce Marketplace account.

Configuration

Our extension works out of the box. If you want to configure it differently, log into your Magento Admin and go to:

Stores > Configuration > Apptrian Extensions > Open Graph Meta Tags GraphQL

After changing the option, make sure you refresh your Magento cache.

Usage

The following query is an example of what is possible with our GraphQL add-on. For the complete list of fields, check our extension's GraphQL schema file.

query ApptrianOpenGraphData($page_type: String, $identifier: String) {
    ApptrianOpenGraphData(page_type: $page_type, identifier: $identifier) {
        open_graph
    }
}

The minimal query requires both page_type and identifier.

Allowed values for page_type are: category, cms, home, and product.

If page_type is a category, the value provided to the identifier must be Category ID or Category UID.

If page_type is a cms or home, the value provided to the identifier must be the CMS page identifier.

If page_type is a product, the value provided to the identifier must be Product ID or Product UID.

If you are using PWA Studio, most of the time, there is no Category ID/Product ID but a Category UID/Product UID. Our GraphQL identifier field works with both ID and UID. (The UID is detected and converted to ID on the fly.)

FAQ

Q: Does the extension work with multi-store setups?
A: Yes, it does work with multi-store setups. It is working in the same way as the core Magento modules. You can query a non-default store by changing the header in your GraphQL request. Add or change the Store header to the store_view_code of your desired store. If you are using PWA Studio, this is automatic (no need to add/change the header yourself).