useNavigateToStudioDocument

It may benefit your application to include links from any document to the Studio, as your Studio is probably still the source of truth for all your content.

Fortunately, the App SDK provides a hook to automatically generate a link from a document to the correct Studio.

You will need to deploy your Studio first to make this work, as links from your app's development server won't open in your local running Studio.

# in the /studio folder
npx sanity@latest deploy 

Follow the prompts, once deployed you should see your Studio as an option on the left hand side of the Dashboard.

Let's proceed!

In the example below, the Suspense boundary is exported from the component file itself. This is a useful pattern to unify the fallback and child components to remove any layout shift.

Instead of a loading spinner, the fallback prop is a disabled version of the same button rendered by the child component when loading is complete.

You may like to consider implementing other suspenseful components in the same way, so that your logic of what renders before and after loading is colocated in a single file.

import { Suspense } from "react"
import {
  type DocumentHandle,
  useNavigateToStudioDocument,
} from "@sanity/sdk-react"
import { Button } from "@sanity/ui"

const BUTTON_TEXT = "Open in Studio"

type OpenInStudioProps = {
  handle: DocumentHandle
}

export function OpenInStudio({ handle }: OpenInStudioProps) {
  return (
    <Suspense fallback={<OpenInStudioFallback />}>
      <OpenInStudioButton handle={handle} />
    </Suspense>
  )
}

function OpenInStudioFallback() {
  return <Button text={BUTTON_TEXT} disabled />
}

function OpenInStudioButton({ handle }: OpenInStudioProps) {
  const { navigateToStudioDocument } = useNavigateToStudioDocument(handle)

  return <Button onClick={navigateToStudioDocument} text={BUTTON_TEXT} />
}

<Flex
  justify="space-between"
  direction={['column-reverse', 'column-reverse', 'row']}
  gap={2}
>
  <OpenInStudio handle={selectedFeedback} />
  <Actions handle={selectedFeedback} />
</Flex> 

You should now be able to go directly from any selected feedback document in your app, to that same document in your Sanity Studio.

Your app currently uses the most common hooks in the App SDK for React, but there's one more, do-anything hook we can put to work.