Storefront API — a new product from Vue Storefront team

Piotr Karwatka
Dec 10, 2019 · 5 min read

I personally really like to think that what we’ve already done, what we’re working on — it’s just a beginning. As idealistic as it sounds it’s very often so true. Storefront API is a GraphQL unified API for any frontend you might want to have: Angular, React, Vue — no problem.

Storefront API — General Purpose, GraphQL eCommerce Gateway

Storefront API is a customizable, modular eCommerce GraphQL gateway. You can use this product to provide all your frontends — including mobile applications with a single data source. GraphQL and REST support let you to easily implement BFF (Backend for Frontend) pattern. It unifies the interfaces between all the systems backing your frontend and lets you query multiple data sources with a single HTTP request.

Don’t wait. Check our Github repository and please give us a ⭐️

Image for post
Image for post
BFF means that you can optimize queries and data formats to the device. You can get the category, including products and even product reviews with a single call.

TL;DR; You can start plaing with Storefront API right away:

  1. Check the official repository: https://github.com/DivanteLtd/storefront-api
  2. Read our official docs
  3. Join the Vue Storefront slack for asking details on Storefront API specifically.
  4. Join the Vue Storefront forum for asking some support and development questions.

Maybe it’s a feature of the Open Source ecosystem — where you can easily find a lot of ideas to create a fork? You just start working on something new or just continue the efforts of bringing new life to the project?

Well, we had this kind of Eureka moment and a new idea just pop up a few weeks ago. The vue-storefront-api project. It used to be “just an API” empowering Vue Storefront PWA application. Then, 30+ sites on production later I was like: man, people are using vue-storefront-api in such crazy architectures — sometimes even without Vue Storefront itself. Because it’s a pretty useful API and very, very fast one.

By the same time, I was engaged in some heavy enterprise eCommerce projects as an architect trying to figure out how to cover the legacy SOAP and REST APIs (and sometimes direct SQL queries) with a single GraphQL layer to implement a BFF for PWA and mobile apps.

Then I connected the dots.

Image for post
Image for post

The architecture is modular. Each module can extend the default GraphQL schema, REST APIs and ElasticSearch Schema.

Image for post
Image for post

Yes, we’re using ElasticSearch by default — because some legacy APIs are not meeting the performance requirements neither let users execute the flexible queries and model the data structures. ElasticSearch, however, is only optional and your custom modules can provide direct connections to the backend systems.

The modules can extend the standard GraphQL Schema with custom types and entities. By adding just some simple TypeScript based resolvers you can integrate your CRM, ERP, eCommerce APIs all into single GraphQL interface that can be fetched and the data modeled within a single gql query.

Check our default GraphQL schema

GraphQL is now supported by many systems. But GraphQL is one thing, the speed is another. Pretty complex queries and huge SKU databases usually won’t meet the performance expectations. Unless you’ll use ElasticSearch. Having Elastic DSL + Non-SQL features makes Storefront API a drop-in solution for the API performance issues with the request times never exceeding 100ms. For the REST endpoints, we also have the Output Cache feature which allowed us to serve 3600 concurrent users on pretty modest Vue Storefront instances (meaning around 10–12K API requests per second).

  • Fully functional and extendable eCommerce API Gateway,
  • Read/Write integrations with Magento1, EpiServer, Magento2, OpenCart, SpreeCommerce,
  • Additional integrations including Prismic with GraphQL support,
  • Vue Storefront PWA frontend support,
  • Blazing Fast — based on ElasticSearch with avg. response times < 100ms,
  • GraphQL API with 100% Customizable GraphQL schema,
  • REST API with ElasticSearch DSL support,
  • Catalog, Cart, User, Stock, Review, Order, Image resizer modules available thru REST API,
  • Multistore support based on store-views (aka. sales channels) concept,
  • Dynamic tax calculation engine,
  • Extendable via custom extensions (including GraphQL schema and resolver extensions),
  • ElasticSearch maintenance tools — dump/restore/schema maintenance/migrations,

Thanks to Vue Storefront and its vibrant community the product is already integrated with many eCommerce platforms so you can simply wrap them with GraphQL api layer with few lines of code/config.

At the same time, Storefront API is backend agnostic. That means it’s not an eCommerce backend itself. Out of the box it’s provided with Rreadingead/Write integrations with Magento1, EpiServer, Magento2, OpenCart, SpreeCommerce.

Read how to integrate your own, custom 3rd party eCommerce backend

Image for post
Image for post
Zadig&Voltaire along with 30 other production sites is using Vue Storefront API — which refactored successor Storefront API is.

The classical eCommerce entities (Products, Categories and other) are bread and butter for any eCommerce site. They’re a foundation of our default data schema as well. However, the really interesting things start when you mix this standard data with product recommendations, CMS and other data sources. Some feature requests for Nosto, Prismic, and other integrations have been already raised on Github! Don’t wait and contribute :)

As modular the architecture is, the default modules bundled within Storefront API — default-catalog and default-vsf are 100% Vue Storefront compatible. Storefront API can be a drop-in replacement for, however, at this point, some compatibility tests are still due. Well, it’s still 1.0RC-1 so! :) After a stable version released we’d probably switch to Storefront API as a default backend for Vue Storefront.

Read how to create your own, custom modules.

Along with the development works we’ve created some decent docs. The license is and always will be MIT. We’re looking for contributors!

The Vue Storefront Journal

The official journal of Vue Storefront community.

Piotr Karwatka

Written by

The Vue Storefront Journal

The official journal of Vue Storefront community. The latest news on meet-ups, contributions, releases, and the community surrounding Vue Storefront — the top open source solution for progressive web apps dedicated to mobile-first eCommerce. (www.vuestorefront.io)

Piotr Karwatka

Written by

The Vue Storefront Journal

The official journal of Vue Storefront community. The latest news on meet-ups, contributions, releases, and the community surrounding Vue Storefront — the top open source solution for progressive web apps dedicated to mobile-first eCommerce. (www.vuestorefront.io)

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store