Issue with live preview in Remix and Sanity integration.

Hello everyone!I am trying to figure out the live preview for drafts working with Remix and Sanity following these instructions:

https://www.sanity.io/guides/remix-run-live-preview
I got to the point where the website runs all good and connected to my Sanity content lake but I don't get a preview page when I try to go to the
localhost:3000/ resource/preview.in the end I copied the code exactly from the guide example yet I'm just being constantly redirected to the _index page.
I have checked that my SANITY_API_READ_TOKEN is correct and that it rightly gets to the resource.preview.tsx route yet I never see the preview page itself on the localhost

Anyone tried that before?
Cheers!

Getting redirected to the home page after visiting the preview route is intended – but you should be seeing the site in “preview mode” then.
Are you able to console log that the preview session has been correctly set?

Yeah I thought so but I don't get the button at the bottom for exiting preview mode and when I do any changes in my sanity data (without commiting) I don't see any change.I've tried to make a console log when the preview is being triggered but never saw it

**correction: I see the console log in the terminal once the loader function is being triggered, and it sees the token

And your _index route is updated with the loader checking for the session?

yesexport const loader: LoaderFunction = async ({ request }: LoaderArgs) => {
const session = await getSession(request.headers.get("Cookie"));
const token = session.get("preview");
const preview = token ? { token } : undefined;
const posts = await getClient(preview).fetch(postsQuery);

Can you paste the whole route?

import { useLoaderData } from "@remix-run/react";
import { getClient } from "~/lib/sanity";
import Posts from "~/components/Posts";
import type { LoaderArgs, LoaderFunction } from "@remix-run/node";
import { getSession } from "~/sessions";
import { postsQuery } from "~/lib/queries";
import PostsPreview from "~/components/PostsPreview";

export const loader: LoaderFunction = async ({ request }: LoaderArgs) => {
const session = await getSession(request.headers.get("Cookie"));
const token = session.get("preview");
const preview = token ? { token } : undefined;
const posts = await getClient(preview).fetch(postsQuery);

return {
posts,
preview,
};
};

export default function Index() {
const { posts, preview } = useLoaderData();

return preview?.token ? (
<PostsPreview posts={posts} />
) : (
<Posts posts={posts} />
);
}

Can you try updating the loader in your

root.tsx

file to:

Legend Simeon!thank you very much, that did the trick.

I think that line in the root.tsx is not mentioned at any point in the guide.

Thanks again for this great support!

Yeah I’m updating it now, thanks for reporting the issue!