ÃÛ¶¹ÊÓƵ

DocumentationCommerceVideos and Tutorials

GraphQL introduction

Last update: Tue Feb 27 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Beginner
  • Intermediate
  • Developer

This is part 1 of the series for GraphQL and ÃÛ¶¹ÊÓƵ 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 ÃÛ¶¹ÊÓƵ 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.

video poster

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 ÃÛ¶¹ÊÓƵ 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.

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. ÃÛ¶¹ÊÓƵ Commerce and Magento Open Source use the
PHP implementation and builds its own layers on top of it.

Using a GraphQL client

You need a GUI GraphQL client to test out code samples and tutorials. There are several options:

  • is an excellent and fully featured client built specifically for GraphQL. ÃÛ¶¹ÊÓƵ 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
    , Firefox, or browser.
  • 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 , 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 ÃÛ¶¹ÊÓƵ 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

recommendation-more-help
3a5f7e19-f383-4af8-8983-d01154c1402f