#Creating a custom edit view - unsure how to handle `initialData` for blocks

1 messages · Page 1 of 1 (latest)

velvet cape
#

Creating a custom view for editing a collection, I am able to update a field of the collection of type block, but I am not able to set initialData on <Form /> so that the current value is rendered. Here's how I am trying to achieve it:

import { Form } from 'payload/components/forms';
import { fieldTypes } from 'payload/dist/admin/components/forms/field-types';
import FieldBlocks from 'payload/dist/admin/components/forms/field-types/Blocks';
import ButtonSubmit from 'payload/dist/admin/components/forms/Submit';
import { BLOCKS_ARTICLE } from '../../../blocks';
import { API_CLIENT } from '../../../constants/api-client';

interface BlockRichText {
  richText?: {
    [k: string]: unknown;
  }[];
  id?: string;
  blockName?: string;
  blockType: 'rich-text';

interface CollectionEntityObjects {
  id: string;
  blocks?: (BlockRichText)[];
  updatedAt: string;
  createdAt: string;
}

interface Props {
  entityObject: CollectionEntityObjects;
}

export function FormContent({ entityObject }: Props) {
  const history = useHistory();

  return (
    <Form initialData={{ blocks: entityObject.blocks }}>
      <FieldBlocks
        name="blocks"
        indexPath="blocks"
        label="Blocks"
        fieldTypes={fieldTypes}
        blocks={BLOCKS_ARTICLE}
        permissions={{ create: { permission: true }, update: { permission: true }, read: { permission: true } }}
        admin={{ className: '' }}
      />

      <ButtonSubmit type="submit">Save</ButtonSubmit>
    </Form>
  );
}

As a side note, not setting admin.className as a prop throws an error on the client-side.

stable valleyBOT