Here's a quick summary of everything we released in Q1 2024.
Hygraph
Docs

You are currently reading the Studio Docs. If you were looking for the Classic Docs check here

Additional types API reference

#Model

interface Model {
apiId: string;
apiIdPlural: string;
id: string;
description: string | null;
displayName: string;
isLocalized: boolean;
}

#Form

interface Form {
change: <Value = any>(name: string, value: Value) => Promise<void>;
changeBulk: (values: Record<string, any>) => Promise<void>;
// @see https://hygraph.com/docs/ui-extensions/react-sdk/state-getters#get-state
getState: <Values = Record<string, any>>() => Promise<FormState<Values>>;
// @see https://hygraph.com/docs/ui-extensions/react-sdk/state-getters#get-field-state
getFieldState: <Value = any>(fieldName: string) => Promise<FieldState<Value>>;
// @see https://hygraph.com/docs/ui-extensions/react-sdk/state-subscriptions#subscribe-to-field-state
subscribeToFieldState: <Value = any>(
name: string,
callback: (state: FieldState<Value>) => any,
subscription: FieldSubscription,
) => Promise<() => any>;
// @see https://hygraph.com/docs/ui-extensions/react-sdk/state-subscriptions#subscribe-to-form-state
subscribeToFormState: <Values = Record<string, any>>(
callback: Subscriber<FormState<Values>>,
subscription: FormSubscription,
) => Promise<() => any>;
// @see https://hygraph.com/docs/ui-extensions/field-extension/interacting-with-fields#set-fields-visibility
setFieldsVisibility: (
arg:
| VisibilityMap
| ((currentVisibilityMap: VisibilityMap) => VisibilityMap),
) => void;
}

#Locale

interface Locale {
apiId: string;
id: string;
displayName: string;
isDefault: boolean;
}

#Stage

interface Stage {
id: string;
apiId: string;
color: string;
colorPaletteId: keyof typeof StageColorPalette;
backgroundColor: string;
displayName: string;
description?: string | null | undefined;
isSystem: boolean;
position: number;
}
export const StageColorPalette = {
PINK: 'PINK',
PURPLE: 'PURPLE',
ORANGE: 'ORANGE',
RED: 'RED',
BROWN: 'BROWN',
TEAL: 'TEAL',
GREEN: 'GREEN',
YELLOW: 'YELLOW',
} as const;

#User

interface User {
id: string;
kind: keyof typeof UserKind;
name: string;
picture: string | null;
isActive: boolean;
}
export const UserKind = {
MEMBER: 'MEMBER',
PAT: 'PAT',
PUBLIC: 'PUBLIC',
WEBHOOK: 'WEBHOOK',
} as const;

#Dialog

export type OpenDialog = <
DialogReturn = any,
DialogProps = Record<string, any>,
>(
src: string,
props?: {
disableOverlayClick?: boolean;
maxWidth?: string;
ariaLabel?: string;
} & DialogProps,
) => Promise<DialogReturn | null>;

#Toasts

export type ShowToast = (options: ToastOptions) => Promise<Id>;
export type ToastOptions = {
title: string;
description?: string;
variantColor: keyof typeof ToastVariantColor;
id?: Id;
isClosable?: boolean;
position?: keyof typeof ToastPosition;
duration?: number;
};
type Id = number | string;
export const ToastVariantColor = {
success: 'success',
error: 'error',
warning: 'warning',
info: 'info',
primary: 'primary',
dark: 'dark',
publish: 'publish',
} as const;
export const ToastPosition = {
'top-right': 'top-right',
'top-center': 'top-center',
'top-left': 'top-left',
'bottom-right': 'bottom-right',
'bottom-center': 'bottom-center',
'bottom-left': 'bottom-left',
} as const;