shopware/frontends - api-client
Dynamic and fully typed API Client for Shopware 6. Usable in any JavaScript an TypeScript project.
You can use types generated from your custom API instance to have autocompletion and type safety.
Setup
Install npm package:
pnpm add @shopware/api-client
yarn add @shopware/api-client
npm i @shopware/api-client
Recommended practice is to create separate module file. For example src/apiClient.ts
, and import it whenever you need to use API Client.
import { createAPIClient } from "@shopware/api-client";
import {
operationPaths,
operations,
components,
} from "@shopware/api-client/api-types";
import {
operationPaths,
operations,
components,
} from "@shopware/api-client/api-types/apiTypes-6.4.20.0";
import { operationPaths, operations, components } from "./apiTypes";
import Cookies from "js-cookie";
export const apiClient = createAPIClient<operations, operationPaths>({
baseURL: "https://demo-frontends.shopware.store/store-api",
accessToken: "SWSCBHFSNTVMAWNZDNFKSHLAYW",
contextToken: Cookies.get("sw-context-token"),
apiType: "store-api",
onContextChanged(newContextToken) {
Cookies.set("sw-context-token", newContextToken, {
expires: 365,
path: "/",
sameSite: "lax",
});
},
});
export type ApiSchemas = components["schemas"];
export type ApiRequestParams<OPERATION_NAME extends keyof operations> =
RequestParameters<OPERATION_NAME, operations>;
export type ApiReturnType<OPERATION_NAME extends keyof operations> =
RequestReturnType<OPERATION_NAME, operations>;
Basic usage
Take a look at example project using API Client.
Simple invocation
import { apiClient, ApiReturnType } from "./apiClient";
let productsResponse: ApiReturnType<"readProduct">;
async function loadProducts() {
productsResponse = await apiClient.invoke("readProduct post /product", {
limit: 2,
});
}
Predefining methods
If you prefer to add another layer of abstraction you can use created previously types to define your own concept of methods.
const readNavigation = (params: ApiRequestParams<"readNavigation">) =>
apiClient.invoke(
"readNavigation post /navigation/{activeId}/{rootId} sw-include-seo-urls",
{
depth: 2,
...params,
}
);
import { readNavigation } from "./apiClient";
async function loadMainNavigation() {
const navigation = await readNavigation({
activeId: "main-navigation",
rootId: "main-navigation",
});
}
Links
Changelog
Full changelog for stable version is available here
Latest changes: 0.0.0-canary-20230704113227
Minor Changes
-
#300 da347b5
Thanks @patzick! - Predefining methods: exported RequestReturnType
and RequestParameters
types. You can now create predefined methods:
const readCart = (params: RequestParameters<"readCart", operations>) =>
apiInstance.invoke("readCart get /checkout/cart?name", params);
Patch Changes