✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

Issue with live preview in Remix and Sanity integration.

11 replies
Last updated: Jul 10, 2023
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!
Jul 10, 2023, 10:26 AM
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?
Jul 10, 2023, 10:30 AM
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
Jul 10, 2023, 11:02 AM
**correction: I see the console log in the terminal once the loader function is being triggered, and it sees the token
Jul 10, 2023, 11:06 AM
And your _index route is updated with the loader checking for the session?
Jul 10, 2023, 11:23 AM
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);
Jul 10, 2023, 11:35 AM
Can you paste the whole route?
Jul 10, 2023, 11:36 AM
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} />
);
}
Jul 10, 2023, 11:38 AM
Can you try updating the loader in your
root.tsx
file to:

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;

  return { preview };
};
Jul 10, 2023, 11:44 AM
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!
Jul 10, 2023, 11:52 AM
Yeah I’m updating it now, thanks for reporting the issue!
Jul 10, 2023, 11:52 AM
🙏
Jul 10, 2023, 11:52 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?