Multiple preview URL resolvers

[aronhoyer]

Is your feature request related to a problem? Please describe. We're working on a project with Sanity where we need to be able to preview multiple types of content. Right now, in order to complete complete that task, it seems as though we have to create a "preview page component" with a whole lot of logic, in order to render the correct page component with the right data.

Describe the solution you'd like A mechanism through which we can define multiple preview URL resolvers. For example:

{
  "plugins": [
    "@sanity/production-preview"
  ],
  "parts": [
    //...
    {
      "implements": "part:@sanity/production-preview/resolve-production-url",
      "paths": [
        "./resolveBlogPreview.js",
        "./resolveProductPreview.js",
        "./resolveTermsPreview.js"
      ]
    }
  ]
}

or

export default function resolveProductionUrl(document) {
  return [
    `https://my-site.com/blog/preview/${document._id}`,
    `https://my-site.com/products/preview/${document._id}`,
    `https://my-site.com/terms/preview/${document._id}`,
  ]
}

[bjoerge]

Maybe I'm missing something, but could you use the document _type to determine which url to use?

export default function resolveProductionUrl(document) {
   return `https://my-site.com/${document._type}/preview/${document._id}`
}

[aronhoyer]

yeah I just figured that out. but this feature request could maybe set sanity up to support preview urls for staging as well as production, no?

[aronhoyer]

but i guess there's some additional things you could add to the document in order to figure out whether to preview in stage or production

[bjoerge]

Ah, yeah, preview across multiple envs is a great idea. Currently you can have only one preview url per document, but I can totally see the use case for being able to provide more than one url for previewing the same document. Not only for different envs, but also for preview in different target platforms (or emulations of), e.g. mobile, etc.

You could implement this in your end though, by exposing a preview url that let's the user select which env to preview in, e.g. let the page at https://your-site.com/${document._type}/preview/${document._id} provide a way for the user to switch between envs.

[JonathanSaudhof]

Hey guys!

Currently, I am struggling with the problem to define dynamic output urls depending on the current dataset. For the dataset staging I like to have a preview url like https://staging.my-site.com/preview. While with the production dataset I like to forward to https://my-site.com/preview. How can I achieve this? Any recommendations ?

Thx!

[leo-cheron]

This could also be used for localisation previewing. Currently, the only solution I'm aware of is to add a language selector directly in the document, whereas it would be more pertinent / ergonomic to add multiple entries in the context menu, for instance Preview en, Preview fr...

[aronhoyer]

@JonathanSaudhof

How can I achieve this? Any recommendations ?

you could possibly create a mapping of envs/datasets to urls

const urls = new Map([
  ["staging",  "https://staging.my-site.com/preview"],
  ["production", "https://my-site.com/preview"],
])

export default (document) => urls.get(process.env.SANITY_STUDIO_API_DATASET)

a simple ternary

const isProd = process.env.SANITY_STUDIO_API_DATASET === "production"
export default (document) => `https://${isProd ? "" : "staging."}my-site.com/preview`

[nickdandakis]

For anyone else stumbling into this. I couldn't find an elegant way to derive which dataset a document belongs in other than looking at window.location.

Sanity Studio (currently) when configured with __experimental_spaces tacks on the space as the URL (e.g http://localhost:3333/staging/...). You can slice that out like window.location.pathname.split('/')[1].

This seems like a common use-case though for anyone doing dataset -> deployed environment previews, so ideally there's a more robust solution here in the future.

NOTE: the spaces configuration is experimental and Sanity specifically calls out that the URL structure may change in the future.

[kmelve]

Thanks for reporting! I believe the new async preview URL resolver in Sanity Studio v3 provides ways of solving this by conditionally returning the URL based on different context variables?