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']