mirror of
https://github.com/shishantbiswas/bknd.git
synced 2026-03-16 04:27:21 +00:00
replaced remix with react-router
This commit is contained in:
dswbx
@@ -3,7 +3,7 @@ title: 'Introduction'
|
||||
description: 'Integrate bknd into your runtime/framework of choice'
|
||||
---
|
||||
|
||||
import { cloudflare, nextjs, remix, astro, bun, node, docker, vite, aws } from "/snippets/integration-icons.mdx"
|
||||
import { cloudflare, nextjs, reactRouter, astro, bun, node, docker, vite, aws } from "/snippets/integration-icons.mdx"
|
||||
|
||||
## Start with a Framework
|
||||
bknd seamlessly integrates with popular frameworks, allowing you to use what you're already familar with. The following guides will help you get started with your framework of choice.
|
||||
@@ -15,9 +15,9 @@ bknd seamlessly integrates with popular frameworks, allowing you to use what you
|
||||
href="/integration/nextjs"
|
||||
/>
|
||||
<Card
|
||||
title="Remix"
|
||||
icon={<div className="text-primary-light">{remix}</div>}
|
||||
href="/integration/remix"
|
||||
title="React Router"
|
||||
icon={<div className="text-primary-light">{reactRouter}</div>}
|
||||
href="/integration/react-router"
|
||||
/>
|
||||
<Card
|
||||
title="Astro"
|
||||
|
||||
129
docs/integration/react-router.mdx
Normal file
129
docs/integration/react-router.mdx
Normal file
@@ -0,0 +1,129 @@
|
||||
---
|
||||
title: 'React Router'
|
||||
description: 'Run bknd inside React Router'
|
||||
---
|
||||
import InstallBknd from '/snippets/install-bknd.mdx';
|
||||
|
||||
## Installation
|
||||
To get started with React Router and bknd you can either install the package manually, and follow the descriptions below, or use the CLI starter:
|
||||
|
||||
<Tabs>
|
||||
<Tab title="CLI Starter">
|
||||
Create a new React Router CLI starter project by running the following command:
|
||||
|
||||
```sh
|
||||
npx bknd create -i react-router
|
||||
```
|
||||
</Tab>
|
||||
<Tab title="Manual">
|
||||
Create a new React Router project by following the [official guide](https://reactrouter.com/start/framework/installation), and then install bknd as a dependency:
|
||||
|
||||
<InstallBknd />
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
|
||||
## Serve the API
|
||||
Create a helper file to instantiate the bknd instance and retrieve the API:
|
||||
|
||||
```ts app/bknd.ts
|
||||
import { type ReactRouterBkndConfig, getApp as getBkndApp } from "bknd/adapter/react-router";
|
||||
|
||||
const config = {
|
||||
connection: {
|
||||
url: "file:data.db"
|
||||
}
|
||||
} as const satisfies ReactRouterBkndConfig;
|
||||
|
||||
export async function getApp(args?: { request: Request }) {
|
||||
return await getBkndApp(config, args);
|
||||
}
|
||||
|
||||
export async function getApi(
|
||||
args?: { request: Request },
|
||||
opts?: { verify?: boolean }
|
||||
) {
|
||||
const app = await getApp();
|
||||
if (opts?.verify) {
|
||||
const api = app.getApi({ headers: args?.request.headers });
|
||||
await api.verifyAuth();
|
||||
return api;
|
||||
}
|
||||
|
||||
return app.getApi();
|
||||
}
|
||||
```
|
||||
For more information about the connection object, refer to the [Database](/usage/database) guide.
|
||||
|
||||
Create a new api splat route file at `app/routes/api.$.ts`:
|
||||
```ts app/routes/api.$.ts
|
||||
import { getApp } from "~/bknd";
|
||||
|
||||
const handler = async (args: { request: Request }) => {
|
||||
const app = await getApp(args);
|
||||
return app.fetch(args.request);
|
||||
};
|
||||
|
||||
export const loader = handler;
|
||||
export const action = handler;
|
||||
```
|
||||
|
||||
## Enabling the Admin UI
|
||||
Create a new splat route file at `app/routes/admin.$.tsx`:
|
||||
```tsx app/routes/admin.$.tsx
|
||||
import { lazy, Suspense, useSyncExternalStore } from "react";
|
||||
import { type LoaderFunctionArgs, useLoaderData } from "react-router";
|
||||
import { getApi } from "~/bknd";
|
||||
|
||||
const Admin = lazy(() => import("bknd/ui").then((mod) => ({ default: mod.Admin })));
|
||||
import "bknd/dist/styles.css";
|
||||
|
||||
export const loader = async (args: LoaderFunctionArgs) => {
|
||||
const api = await getApi(args, { verify: true });
|
||||
return {
|
||||
user: api.getUser(),
|
||||
};
|
||||
};
|
||||
|
||||
export default function AdminPage() {
|
||||
const { user } = useLoaderData<typeof loader>();
|
||||
// derived from https://github.com/sergiodxa/remix-utils
|
||||
// @ts-ignore
|
||||
const hydrated = useSyncExternalStore(() => {}, () => true, () => false);
|
||||
if (!hydrated) return null;
|
||||
|
||||
return (
|
||||
<Suspense>
|
||||
<Admin withProvider={{ user }} config={{ basepath: "/admin", logo_return_path: "/../" }} />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
## Example usage of the API
|
||||
You can use the `getApi` helper function we've already set up to fetch and mutate:
|
||||
```tsx app/routes/_index.tsx
|
||||
import { useLoaderData, type LoaderFunctionArgs } from "react-router";
|
||||
import { getApi } from "~/bknd";
|
||||
|
||||
export const loader = async (args: LoaderFunctionArgs) => {
|
||||
// use authentication from request
|
||||
const api = await getApi(args, { verify: true });
|
||||
const { data } = await api.data.readMany("todos");
|
||||
return { data, user: api.getUser() };
|
||||
};
|
||||
|
||||
export default function Index() {
|
||||
const { data, user } = useLoaderData<typeof loader>();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Data</h1>
|
||||
<pre>{JSON.stringify(data, null, 2)}</pre>
|
||||
<h1>User</h1>
|
||||
<pre>{JSON.stringify(user, null, 2)}</pre>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
@@ -1,140 +0,0 @@
|
||||
---
|
||||
title: 'Remix'
|
||||
description: 'Run bknd inside Remix'
|
||||
---
|
||||
import InstallBknd from '/snippets/install-bknd.mdx';
|
||||
|
||||
## Installation
|
||||
To get started with Remix and bknd you can either install the package manually, and follow the descriptions below, or use the CLI starter:
|
||||
|
||||
<Tabs>
|
||||
<Tab title="CLI Starter">
|
||||
Create a new Remix CLI starter project by running the following command:
|
||||
|
||||
```sh
|
||||
npx bknd create -i remix
|
||||
```
|
||||
</Tab>
|
||||
<Tab title="Manual">
|
||||
Create a new Remix project by following the [official guide](https://remix.run/docs/en/main/other-api/create-remix), and then install bknd as a dependency:
|
||||
|
||||
<InstallBknd />
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
|
||||
## Serve the API
|
||||
Create a helper file to instantiate the bknd instance and retrieve the API:
|
||||
|
||||
```ts app/bknd.ts
|
||||
import { type RemixBkndConfig, getApp as getBkndApp } from "bknd/adapter/remix";
|
||||
|
||||
const config = {
|
||||
connection: {
|
||||
url: "file:data.db"
|
||||
}
|
||||
} as const satisfies RemixBkndConfig;
|
||||
|
||||
export async function getApp(args?: { request: Request }) {
|
||||
return await getBkndApp(config, args);
|
||||
}
|
||||
|
||||
export async function getApi(args?: { request: Request }) {
|
||||
const app = await getApp(args);
|
||||
if (args) {
|
||||
const api = app.getApi(args.request);
|
||||
await api.verifyAuth();
|
||||
return api;
|
||||
}
|
||||
|
||||
return app.getApi();
|
||||
}
|
||||
```
|
||||
For more information about the connection object, refer to the [Database](/usage/database) guide.
|
||||
|
||||
Create a new api splat route file at `app/routes/api.$.ts`:
|
||||
```ts app/routes/api.$.ts
|
||||
import { getApp } from "~/bknd";
|
||||
|
||||
const handler = async (args: { request: Request }) => {
|
||||
const app = await getApp(args);
|
||||
return app.fetch(args.request);
|
||||
};
|
||||
|
||||
export const loader = handler;
|
||||
export const action = handler;
|
||||
```
|
||||
|
||||
Now make sure that you wrap your root layout with the `ClientProvider` so that all components share the same context. Also add the user context to both the `Outlet` and the provider:
|
||||
```tsx app/root.tsx
|
||||
import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
|
||||
import { useLoaderData, Outlet } from "@remix-run/react";
|
||||
import { ClientProvider } from "bknd/client";
|
||||
import { getApi } from "~/bknd";
|
||||
|
||||
export function Layout(props) {
|
||||
// nothing to change here, just for orientation
|
||||
return (
|
||||
<html>{/* ... */}</html>
|
||||
);
|
||||
}
|
||||
|
||||
export const loader = async (args: LoaderFunctionArgs) => {
|
||||
const api = await getApi(args);
|
||||
return {
|
||||
user: api.getUser()
|
||||
};
|
||||
};
|
||||
|
||||
export default function App() {
|
||||
const data = useLoaderData<typeof loader>();
|
||||
return (
|
||||
<ClientProvider user={data.user}>
|
||||
<Outlet context={data} />
|
||||
</ClientProvider>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Enabling the Admin UI
|
||||
Create a new splat route file at `app/routes/admin.$.tsx`:
|
||||
```tsx app/routes/admin.$.tsx
|
||||
import { adminPage } from "bknd/adapter/remix";
|
||||
import "bknd/dist/styles.css";
|
||||
|
||||
export default adminPage({
|
||||
config: {
|
||||
basepath: "/admin",
|
||||
logo_return_path: "/../",
|
||||
color_scheme: "system"
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## Example usage of the API
|
||||
Since the API has already been constructed in the root layout, you can now use it in any page:
|
||||
```tsx app/routes/_index.tsx
|
||||
import { useLoaderData } from "@remix-run/react";
|
||||
import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
|
||||
import { getApi } from "~/bknd";
|
||||
|
||||
export const loader = async (args: LoaderFunctionArgs) => {
|
||||
// use authentication from request
|
||||
const api = await getApi(args);
|
||||
const { data } = await api.data.readMany("todos");
|
||||
return { data, user: api.getUser() };
|
||||
};
|
||||
|
||||
export default function Index() {
|
||||
const { data, user } = useLoaderData<typeof loader>();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Data</h1>
|
||||
<pre>{JSON.stringify(data, null, 2)}</pre>
|
||||
<h1>User</h1>
|
||||
<pre>{JSON.stringify(user, null, 2)}</pre>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user