Saleor Apps
Case study

Krzysztof krzyh Wolski / GraphQL Wrocław 2021

Defining The Problem

Saleor - our flagship project

• headless e-commerce platform
• configurable, flexible, open source!
• backend (Core)
  • Python
  • Django
  • GQL powered by Graphene
• frontend (Dashboard/Storefront)
  • TS
  • React
  • Apollo Client
• SaaS (Cloud)

How we work

• gather needs of our clients
• find what's missing
  • warehouse integration?
  • payment gateways?
  • shipping methods?
  • CMS integrations?
• code and repeat

Forking approach

• easy to start
• if you know the codebase, you can extend it really fast
• unlimited power

Cons

• git history needs to be A+
• documenting changes for newcomers
• upstream may introduce big changes in internal APIs, which may affect you
• updating process may not be straightforward 
• we all know how clients love to spend budget on maintenance
• forking is not an option for SaaS

Solution

Core

App

App

App

Reporting

Stocks

Reviews

How's that implemented?

• Webhook Manager is a Saleor Plugin
• manager registers Apps and their topics
  • checkout changed
  • product modified
• when event occurs
  • async Apps calls are added to the queue
  • sync Apps are called immediately (WIP)

Registering the app

• manifest file
  • required permissions
  • description
  • links to the legal documents
  • URL to the configuration view
• /register endpoint
  • Core introduces itself
  • an authentication token is assigned
• subscribing to the events

What about security?

• configuration iframe sends user JWT token with permissions
• during webhook registration secret is exchanged
• App has defined permissions
• you can deploy App in your VPN

Me + Apps = 🦄❤️✨

Algolia integration success story

• Algolia is a search provider
• we wanted to feed it with Product and CMS data

🦄

• we used Python
• Fastapi framework
  • easy to get into
  • maintaining and adding features - dead simple
• delivered in days
• deployment platform was chosen by the client
• life was good...

but then...

...the client asked for that one field that was not in the payload

GQL for the rescue!

• get changed product IDs from the payload
• fetch any data we need
  • pricing in channels
  • translations 
• parse responses w/ Marschmallow
• refactored in one caffeine-fueled session

Core

App

Algolia

payload

GQL

Algolia API

I found gold

• maintainable!
  • no need for introducing changes in Core
• debugging live environment was a breeze
  • expose local dev instance with ngrok
  • install like deployed app
  • use any debugger you like

I wanted more

Translation App

• synchronize with POEditor
  • generous free dev plan
  • good API
• Python is cool, but I wanted TYPES
  • TS is super nice to work with
• NextJS is not only for the frontend development
  • support for writing APIs
  • their "examples" repository is a great starting point
  • I had to create a configuration view anyway 🤷

Microsoft, if you read this, CREATE TypePython, pretty please!

JS/TS ecosystem is 🦄

• Apollo Client is a POWERFULL client
  • configurable caching
  • query hooks
  • SSR
• VSCode integration
  • validate/run queries from the editor
  • spotting type errors
• GraphQL Code Generator
  • write GQL, get documented TS
  • Apollo hooks - no more writing boilerplate
  • SSR goodies for NextJS 

Takeouts

• GraphQL is exciting not only for frontend but also backend
• Apps architecture leads to
  • small, designated apps
  • easy to maintain projects
• you are not tied to any ecosystem 

QA with myself

Q: Is there any example app?

Yup.

https://github.com/krzysztofwolski/saleor-best-app

Saleor Apps documentation:

https://docs.saleor.io

Q: Can you extend Saleor API with Apps?

Kind-of.

We support Apollo Federation.

Hasura and schema stitching solve this problem:

https://hasura.io/blog/tagged/schema-stitching/

Q: Any tips for creating Apps?

• leverage async
  • return responses early, handle long-running jobs without blocking
• log results and display them in the Dashboard
• if job execution is mission-critical, use a queue like Amazon SQS
• METADATA FOR ALL THE MODELS

Q: Any plans for the future?

• get a dog
• Apps:
  • synchronous apps for handling payments and shipping
  • marketplace!
  • DX - starterpacks, logging build in

Thank you.