Preview feature doesn't work outside of presentation mode using @sanity/react-loader

[lucashfreitas]

Describe the bug

When using a preview setup using sanity-plugin-iframe-pane and @sanity/react-loader the data doesn't get automatically refreshed like it used to work before, It only works when using presentation view.

When we enable the hook that set up the connection with sanity and listen for changes using useLiveMode the connection never happens, so all the useQuery() hooks doesn't get the data automatically refreshed when user make changes.

It works fine when we use the old package import { useLiveQuery } from 'next-sanity/preview';

The presentation mode is great, therefore are still relevant use cases to use the old preview feature supported by the sanity-plugin-frame` that allow users to navigate through content easier, so we would like to leave this option enabled.

I had a look in the source code and realised that the connection implemented on packages/core-loader/src/live-mode/enableLiveMode.ts only happens when we open the presentation window in sanity CMS.

There is an existent issue reported on sanity-io/sanity-plugin-iframe-pane#102 apparently describes the same issue.

Will it be possible to use @sanity/react-loader together with the standard preview feature previously recommended by Sanity CMS without the presentation mode enabled?

To Reproduce

1. Setup the preview environment using the sanity-plugin-iframe-pane (the recommended way by sanity)
2. Setup @sanity/react-loader, call the useLiveMode() hook and implement preview features using the useQuery client hook.
3. Open the preview pane and realise that as you make changes the content won't get automatically updated (we have to manually refresh the page - please see the screenshot below:

Expected behavior

I would expect for the content to be automatically refreshed in the presentation view in the iframe like it used to work before with the import { useLiveQuery } from 'next-sanity/preview';

Screenshots

Which versions of Sanity are you using?

@sanity/cli (global)             3.26.1 (latest: 3.29.1)
@sanity/color-input               3.1.0 (up to date)
@sanity/google-maps-input         3.0.2 (up to date)
@sanity/icons                    2.10.2 (up to date)
@sanity/orderable-document-list   1.2.1 (up to date)
@sanity/react-loader              1.8.4 (latest: 1.8.5)
@sanity/schema                   3.26.1 (latest: 3.29.1)
@sanity/vision                   3.26.1 (latest: 3.29.1)
sanity                           3.26.1 (latest: 3.29.1)

What operating system are you using?

macOs Sonoma 14.11

Which versions of Node.js / npm are you running?

9.8.1
v18.18.2

[th-km]

I'm having the same issue. The presentation mode is great, but not always ideal and also more complex to implement. I'd love to know if this is a bug, or if react-loaders is only intended to work with the presentation package, and not in a custom preview implementation with sanity-plugin-iframe-pane for example.

[fdoflorenzano]

Same issue here! Has anyone found a workaround at all?

[lucashfreitas]

@fdoflorenzano not yet, I tried to investigate but when we use react-loaders with sanity-preview the websock connection that listens for changes in sanity content is not enabled, so the useLiveQuery data is not refreshed then the component is not re-rendered - I suspect that is something that the presentation frame does internally. Hopefully sanity dev team will give more information about that.

[lucashfreitas]

Any updates on this? Is react/loader, presentation mode not compatible with the preview use Iframe pane?

[mariusGundersen]

I'm curious about this too, and I'm considering using both of these, differentiating between which one is used based on how it is presented. That seems like a bunch of extra work for me that really should be possible out of the box though.

[DavithkbY]

Still no fix for this? Any news?