- Commerce Tutorials
- Adobe Commerce Cloud
- Getting Started
- Adobe Commerce Optimizer
- Global Reference Architecture
- Help and support
- Edge Delivery Services
- Webinars and events
- GraphQL and REST
- Adobe Developer App Builder
- Store Administration
- Customer Management
- Catalog Management
- Content Management
- Marketing Tools
- Orders and Fulfillment
- B2B for Adobe Commerce
- Tools and External services
- Commerce Intelligence
- Commerce Upgrades
- Back-end Development
- Native Front-end Luma Development
- Headless Architecture
GraphQL introduction
This is part 1 of the series for GraphQL and Adobe Commerce. GraphQL has quickly become the industry standard for how powerful client-side applications talk to a backend. It’s an increasingly relevant topic for Adobe Commerce developers, as the platform continues to expand its capabilities in the realm of headless implementations.
If you’re new to GraphQL, this section orients you to the basic concepts and usage.
Transcript
Hello, I’m Chris Naniga, the Director of Training Development at SwiftDaughter, and I’m here to introduce you to the basics of GraphQL. GraphQL has become the industry standard for the way that powerful front-end applications talk with a backend. If you’re like I was when I first got into GraphQL, you might be peripherally aware that it exists and that it’s an API scheme for talking with a backend, but you might not know the specifics of it until you actually need to use it in a web application like Adobe Commerce. So, what is GraphQL? It’s a query language and a runtime for resolving data against that query language. You can think of it as an alternative to more traditional API schemes like REST, but GraphQL is optimized for flexibility, and we’ll see how the way that you express queries in GraphQL gives you the flexibility of getting back only the data that you want and getting back any data that you want in a given request. And again, it really has become the industry standard, particularly for applications that operate in a headless context. So, progressive web applications built in languages like React or Vue will typically use GraphQL queries in their network requests to backends for fetching all of the data that they need. Traditional web API schemes like REST work well for allowing disparate systems to talk to each other in a very predictable and formal way, but they have some limitations that can start to get in the way for powerful and highly responsive frontend applications that have more demanding needs as far as needing to query lots of different kinds of data as quickly as possible. So with REST, you have different endpoints for every kind of entity, meaning that you have to make separate network requests when you need data of different types, and there’s kind of a one-size-fits-all approach to the data that is returned in an API scheme like that, potentially leading to unnecessary performance impacts if you’re getting back data that you didn’t actually need in your frontend application. So GraphQL offers some flexibility that will solve these issues and avoid the transfer of data between the frontend and backend of a web application, avoid that becoming the bottleneck.
Related videos and tutorials on GraphQL in this series
What is GraphQL?
GraphQL is a specification for a unique API query language and the runtime that provides data in response to that query language.
Traditional web APIs like REST have served well for disparate systems passing data back and forth, but have provided less than peak performance for modern app-link experiences like Progressive Web Applications. In applications like this, the front-end and back-end layers of the same application communicate via web API. The regimented approach of schemes like REST often does not provide the appropriate flexibility in this context, where many kinds of data need to be fetched quickly.
GraphQL allows a client to expressively describe exactly the data it needs. Instead of requiring multiple network requests for fetching multiple data types, a single request can query for many types. And, responses are kept lean by including (in a format intuitively mirroring the query) only the types and fields that are asked for.
The runtime that implements the GraphQL specification can be built in any language. Adobe Commerce and Magento Open Source use the
graphql-php PHP implementation and builds its own layers on top of it.
View the full GraphQL documentation
Using a GraphQL client
You need a GUI GraphQL client to test out code samples and tutorials. There are several options:
- Altair is an excellent and fully featured client built specifically for GraphQL. Adobe uses Altair in walk-through videos.
- If you don’t want to install the desktop application, there are also Altair extensions that run right in your
Chrome, Firefox, or Edge browser. - GraphiQL is an implementation of the GraphQL IDE from the GraphQL Foundation. This is not an installable tool, but rather a package you can use to build the interface yourself.
- If you’re already familiar with Postman, it has decent support for GraphQL queries, though it’s not as fully featured as a dedicated GraphQL client.
In your GraphQL client, you should submit your requests to the URL path /graphql on your Adobe Commerce or Magento Open Source instance. If you’d prefer to use an existing instance for your tests, you can use the demo of the Venia theme (the example implementation of PWA Studio): https://venia.magento.com/graphql
Useful GraphQL resources
