hubble PWA Docs
PWA
Demo
Website
Github
PWA
Demo
Website
Github
  • What is hubble PWA?
    • Overview
    • Techstack
    • Requirements
    • Installation
    • Roadmap
    • Contact
    • Troubleshooting
  • Architecture

    • Shop Connector
    • File-based inheritance
    • Pages
    • Preinstalled Modules
    • User Session
    • Layouts
    • Components
  • Configuration
  • Theming

    • Default Theme
  • Shopware 6
    • How to set up Shopware 6 to work with hubble PWA
    • Shopware 6 Plugins
    • Shopware 6 Emotionworlds
    • i18n
    • Trade-offs
  • Module Development
    • Contribution Guide PWA
    • Tests
    • Hubble Coding Guidelines for Contributors
    • API Clients
      • Shopware 6
        • Generate
        • Patch
        • Usage
        • Custom request.ts

API Clients

Shopware 6

The API Client for Shopware 6 is generated by https://github.com/ferdikoomen/openapi-typescript-codegen. All related files are placed in /src/platforms/shopware/api-client.

Generate

To generate / update the client:

  1. Create a Shopware Integration (required only once per setup) https://docs.shopware.com/en/shopware-6-en/settings/system/integrationen
  2. Set credentials as cli env variables
export BASEURL=http://localhost
export CLIENT_ID=your-shopware-client-id
export CLIENT_SECRET=your-shopware-client-secret
  1. Run helper cli script
npm run sw:dev:generate-api

Patch

Because the client is generated from the swagger comments of shopware, there can be mismatches in types or functions. Patch files are applied automatically on client generation. In this case you can patch missing or wrong code on your own:

  1. Change to root directory
  2. Commit your changes to git
  3. Create patch:
export COMMIT=commit-hash-from-1
npm run sw:dev:patch-api
  1. Commit generated path file to git

Usage

Use api client directly in platform specific composables only to keep backend agnostic. Given services can be found in shopware/api-client/generated/services

import { CategoryShopware } from '../api-client/generated'

const { data, pending, refresh } = await CategoryShopware.readNavigation(
    'main-navigation',
    'main-navigation',
    {},
    true
)

Custom request.ts

  • sets shopware specific default headers: sw-access-key and sw-include-seo-urls and sw-language-id
  • sets shopware specific header sw-context-token if exists as cookie or in store
  • uses $fetch function of oh-my-fetch for xhr requests
  • handles errors
Prev
Hubble Coding Guidelines for Contributors