search

contentful / create-contentful-extension

Create Contentful Extension is a CLI tool for developing in-app extensions without the hassle of managing build configurations.
MIT License
71 stars 14 forks source link

On Hot Reload, `getValue()` returns initial entry values instead of current values #50

Closed heyitstowler closed 3 years ago

heyitstowler commented 4 years ago

There’s a bug with create-cotentful-ui-extension with hot reload where on hot reload, any fields that were modified since the last time you loaded the page show the original value when you call entry.fields[field].getValue(). This is particularly annoying for developing UI extensions that modify fields and kind of defeats the purpose of hot reload. repro: create an extension using create-contentful-extension and in the constructor, throw in console.log('value:', props.sdk.entry.fields[whateverTheFieldIs].getValue(). Uncomment the hot reload code. Say you create a new entry with this extension set up. On load, it should log value: undefined. type something like ‘asdf’ in the field. Save your index.js so it hot reloads. Expected: console should log value: 'asdf' Actual: console logs ’value: undefined` If you now refresh the page, then the console logs value: 'asdf'. Edit the field to be ‘asdfasdf’ then save your index.js Expected: console should log value: 'asdfasdf' Actual: console logs value: 'asdf'

Jwhiles commented 3 years ago

Hey, I'm afraid that this is a result of the fact that the entire extension is reloaded on save. If you wait for contentful to sync changes (this should take around 5 seconds after you stop typing) before reloading - then you should get the saved values. Alternatively I suggest migrating to https://github.com/contentful/create-contentful-app which will allow you to use the React fast refresh.

tariqporter commented 3 years ago

@Jwhiles What is React fast refresh? The values in my extension don't save unless I wait for 5 seconds. If the tab is closed then nothing saves and any entered data is lost.