# useNavigateToStudioDocument

https://www.sanity.io/learn/course/build-content-apps-with-sanity-app-sdk/use-navigate-to-studio-document.md

Bridge the gap between your application and Sanity Studio with an automatic link.

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.

## Deploy the 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.

1. **Run** the following command in the `/studio` folder to deploy your Studio and schema

```sh
# 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!

## Composing suspenseful components

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.

## Navigate to Studio

1. **Create** a new component for a button which will open documents in the Studio.

```tsx:app-feedback/src/OpenInStudio.tsx
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} />
}
```

1. **Update** the `FeedbackEdit` component to add this new button alongside your actions

```tsx:app-feedback/src/FeedbackEdit.tsx
<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.