How do I trigger a re-rendering of a block?

Question

in a WordPress Gutenberg plugin

hooks_addFilter_editor_blockEdit = (BlockEdit) => {
 return (props) => {
  apiFetch({url: 'https://example.com/api/'+props.attributes.content
  }).then(_return => {
   props.attributes.content = _return;
   // What should I use here to force re-render the block?
  })
 return ( <BlockEdit { ...props } /> );
 }
}

wp.hooks.addFilter( 'editor.BlockEdit', 'my-plugin-slug', hooks_addFilter_editor_blockEdit );

For the above code, my plugin sends the props.attributes.content into an external API, and updates it asynchronously. Visually, as many default gutenberg blocks use props.attributes.content to display the content of the block (paragraph blocks for instance), that content gets updated on the editor, automatically, but not immediately. Re-rendering of the block happens only when my cursor gets off the block, or when I get the input focus out of this block.

What can I add to the above code to force the editor to visually show the updated content as soon as the apiFetch call has succeeded?

Answer 1

Try if this works for you:

hooks_addFilter_editor_blockEdit = (BlockEdit) => {
 return (props) => {
 // Destructure "props"
 const { attributes, setAttributes } = props;
  apiFetch({url: 'https://example.com/api/'+attributes.content
  }).then(_return => {
   // What should I use here to force re-render the block?
   setAttributes( { content: _return } );
  })
 return ( <BlockEdit { ...props } /> );
 }
}

wp.hooks.addFilter( 'editor.BlockEdit', 'my-plugin-slug', hooks_addFilter_editor_blockEdit );

Still, while typing in a block, there might be a slight delay until your api responds. Also maybe you need to wrap your BlockEdit in a HigherOrderComponent.