Interacting with other fields

UI extensions can interact with the other fields of the form, and with the form itself.

For these purposes, the form property exposes the following methods:

Method	Signature	Description
`change`	`(fieldName: string, value: any) => Promise<void>`	changes the value of another field
`getState`	`() => Promise<`FormState`>`	returns the current form state
`getFieldState`	`(fieldName: string) => Promise<`FieldState`>`	returns the given field state
`subscribeToFieldState`	`(fieldName: string, callback: (state:` FieldState`, subscription:` FieldSubscription`) => void) => Promise<Unsubscribe>`	opens a subscription to a field's state changes
`subscribeToFormState`	`(callback: (state:` FormState`) => void, subscription:` FormSubscription`) => Promise<Unsubscribe>;`	opens a subscrition to the form's state changess

TypesAnchor

Internally, GraphCMS uses final-form to manage form and field states.

FormStateAnchor

See FormState on final-form.

The FormSubscription param has the same shape as FormState, but using a boolean to describe which state changes you want to subscribe to.

subscribeToFormState((state) => console.log(state.dirty, state.errors), {
  // react only to form `dirty` and `invalid` state changes
  dirty: true,
  invalid: true,
});

FieldStateAnchor

See FormState on final-form.

The FieldSubscription param has the same shape as FieldState, but using a boolean to describe which state changes you want to subscribe to.

subscribeToFieldState('title', (state) => console.log(state.value), {
  // react only to field `value` changes
  value: true,
});

UnsubscribeAnchor

Both subscribeToFieldState and subscribeToFormState return a function to be called when needing to unsubscribe from changes. In order to avoid perfomance issues, make sure to unsubscribe any existing subscription before subscribing again.

Example in React:

React.useEffect(async () => {
  const unsubscribe = await subscribeToFieldState(
    'title',
    (state) => console.log(state.value),
    { value: true },
  );
  return () => unsubscribe();
}, []);

Interacting with other fields

TypesAnchor

FormStateAnchor

FieldStateAnchor

UnsubscribeAnchor

Did you find this page useful?