New: Headless Commerce with Remix! read more

UiDevkitClient

setTargetOrigin

Set the window.postMessage API targetOrigin. The Vendure ui-devkit uses the postMessage API to enable cross-frame and cross-origin communication between the ui extension code and the Admin UI app. The targetOrigin is a security feature intended to provide control over where messages are sent.

Signature

function setTargetOrigin(value: string): void

Parameters

value

parameter
type:
string

getActivatedRoute

Retrieves information about the current route of the host application, since it is not possible to otherwise get this information from within the child iframe.

Example

import { getActivatedRoute } from '@vendure/ui-devkit';

const route = await getActivatedRoute();
const slug = route.params.slug;

Signature

function getActivatedRoute(): Promise<ActiveRouteData>

graphQlQuery

Perform a GraphQL query and returns either an Observable or a Promise of the result.

Example

import { graphQlQuery } from '@vendure/ui-devkit';

const productList = await graphQlQuery(`
  query GetProducts($skip: Int, $take: Int) {
      products(options: { skip: $skip, take: $take }) {
          items { id, name, enabled },
          totalItems
      }
  }`, {
    skip: 0,
    take: 10,
  }).then(data => data.products);

Signature

function graphQlQuery<T, V extends { [key: string]: any }>(document: string, variables?: { [key: string]: any }, fetchPolicy?: WatchQueryFetchPolicy): {
    then: Promise<T>['then'];
    stream: Observable<T>;
}

Parameters

document

parameter
type:
string

variables

parameter
type:
{ [key: string]: any }

fetchPolicy

parameter
type:
WatchQueryFetchPolicy

graphQlMutation

Perform a GraphQL mutation and returns either an Observable or a Promise of the result.

Example

import { graphQlMutation } from '@vendure/ui-devkit';

const disableProduct = (id: string) => {
  return graphQlMutation(`
    mutation DisableProduct($id: ID!) {
      updateProduct(input: { id: $id, enabled: false }) {
        id
        enabled
      }
    }`, { id })
    .then(data => data.updateProduct)
}

Signature

function graphQlMutation<T, V extends { [key: string]: any }>(document: string, variables?: { [key: string]: any }): {
    then: Promise<T>['then'];
    stream: Observable<T>;
}

Parameters

document

parameter
type:
string

variables

parameter
type:
{ [key: string]: any }

notify

Display a toast notification.

Example

import { notify } from '@vendure/ui-devkit';

notify({
  message: 'Updated Product',
  type: 'success'
});

Signature

function notify(options: NotificationMessage['data']): void

Parameters

options

parameter
type:
NotificationMessage['data']