vendure/docs/docs/reference/admin-ui-api/ui-devkit/ui-devkit-client.md

---

title: "UiDevkitClient" isDefaultIndex: false

generated: true

import MemberInfo from '@site/src/components/MemberInfo'; import GenerationInfo from '@site/src/components/GenerationInfo'; import MemberDescription from '@site/src/components/MemberDescription';

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.

function setTargetOrigin(value: string): void

Parameters

value

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;

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);

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

variables

fetchPolicy

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)
}

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

Parameters

document

variables

notify

Display a toast notification.

Example

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

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

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

Parameters

options