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.
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.
You need a GUI GraphQL client to test out code samples and tutorials. There are several options:
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):