# page (https://docs.salla.dev/twilight/react/api/modules/page)



Use `page` to show a page the merchant wrote in the dashboard.

```ts title="app/routes/pages.$id.tsx"
import { page } from '@salla.sa/twilight-theme-engine/api/page';

loader: async ({ params }) => {
  const data = await page.findOrThrow(params.id);
  return { title: data.name, content: data.content };
},
```

```tsx title="app/components/AboutText.tsx"
import { useSuspenseQuery } from '@tanstack/react-query';
import { page } from '@salla.sa/twilight-theme-engine/api/page';

export function AboutText() {
  const { data } = useSuspenseQuery(page.queries.detail('about-us'));

  return <div dangerouslySetInnerHTML={{ __html: data.content ?? '' }} />;
}
```

## Methods [#methods]

| Method             | Parameters     | Returns                    | Request            | Login needed |
| ------------------ | -------------- | -------------------------- | ------------------ | ------------ |
| `page.find`        | `slug: string` | `Promise<ApiPageResponse>` | `GET pages/{slug}` | No           |
| `page.findOrThrow` | `slug: string` | `Promise<ApiPageResponse>` | Same as `find`     | No           |

The result has `id`, `name`, `url`, `content`, `metadata` and `created_at`.

## Queries [#queries]

| Query                  | Key                         |
| ---------------------- | --------------------------- |
| `queries.detail(slug)` | `['pages', 'detail', slug]` |

The key includes neither the locale nor the active scope. Page text is language-specific, so add the locale to your own key if the language can change without a reload.

## Gotchas [#gotchas]

* `find` does not default a missing `data`: you get `undefined` at runtime.
* `findOrThrow` turns a 404 or 410 into a not-found page and rethrows other errors.
* `queries.detail` calls `find`, so a failing fetch rejects with the raw `HTTPError`.

## See also [#see-also]

* [Custom page route](https://docs.salla.dev/twilight/react/routes/custom-page)
* [Errors, timeouts and retries](https://docs.salla.dev/twilight/react/api/errors-timeouts-and-retries)