mirror of
https://github.com/shishantbiswas/bknd.git
synced 2026-03-16 04:27:21 +00:00
improved nextjs/remix adapters and docs, confirmed remix ssr working
This commit is contained in:
dswbx
@@ -4,11 +4,6 @@ description: 'Run bknd inside Next.js'
|
||||
---
|
||||
import InstallBknd from '/snippets/install-bknd.mdx';
|
||||
|
||||
<Note>
|
||||
Next.js support is currently experimental, this guide only covers adding bknd using `pages`
|
||||
folder.
|
||||
</Note>
|
||||
|
||||
## Installation
|
||||
Install bknd as a dependency:
|
||||
<InstallBknd />
|
||||
@@ -39,20 +34,37 @@ For more information about the connection object, refer to the [Setup](/setup) g
|
||||
Create a file `[[...admin]].tsx` inside the `pages/admin` folder:
|
||||
```tsx
|
||||
// pages/admin/[[...admin]].tsx
|
||||
import type { PageConfig } from "next";
|
||||
import dynamic from "next/dynamic";
|
||||
import { adminPage, getServerSideProps } from "bknd/adapter/nextjs";
|
||||
import "bknd/dist/styles.css";
|
||||
|
||||
export const config: PageConfig = {
|
||||
runtime: "experimental-edge",
|
||||
};
|
||||
export { getServerSideProps };
|
||||
export default adminPage();
|
||||
```
|
||||
|
||||
const Admin = dynamic(
|
||||
() => import("bknd/ui").then((mod) => mod.Admin),
|
||||
{ ssr: false },
|
||||
);
|
||||
## Example usage of the API in pages dir
|
||||
Using pages dir, you need to wrap the `getServerSideProps` function with `withApi` to get access
|
||||
to the API. With the API, you can query the database or retrieve the authentication status:
|
||||
```tsx
|
||||
import { withApi } from "bknd/adapter/nextjs";
|
||||
import type { InferGetServerSidePropsType as InferProps } from "next";
|
||||
|
||||
export default function AdminPage() {
|
||||
return <Admin />;
|
||||
export const getServerSideProps = withApi(async (context) => {
|
||||
const { data = [] } = await context.api.data.readMany("todos");
|
||||
const user = context.api.getUser();
|
||||
|
||||
return { props: { data, user } };
|
||||
});
|
||||
|
||||
export default function Home(props: InferProps<typeof getServerSideProps>) {
|
||||
const { data, user } = props;
|
||||
return (
|
||||
<div>
|
||||
<h1>Data</h1>
|
||||
<pre>{JSON.stringify(data, null, 2)}</pre>
|
||||
|
||||
<h1>User</h1>
|
||||
<pre>{JSON.stringify(user, null, 2)}</pre>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
@@ -4,10 +4,6 @@ description: 'Run bknd inside Remix'
|
||||
---
|
||||
import InstallBknd from '/snippets/install-bknd.mdx';
|
||||
|
||||
<Note>
|
||||
Remix SSR support is currently limited.
|
||||
</Note>
|
||||
|
||||
## Installation
|
||||
Install bknd as a dependency:
|
||||
<InstallBknd />
|
||||
@@ -32,28 +28,90 @@ export const action = handler;
|
||||
```
|
||||
For more information about the connection object, refer to the [Setup](/setup) guide.
|
||||
|
||||
Now make sure that you wrap your root layout with the `ClientProvider` so that all components
|
||||
share the same context:
|
||||
```tsx
|
||||
// app/root.tsx
|
||||
export function Layout(props) {
|
||||
// nothing to change here, just for orientation
|
||||
return (
|
||||
<html>{/* ... */}</html>
|
||||
);
|
||||
}
|
||||
|
||||
// add the api to the `AppLoadContext`
|
||||
// so you don't have to manually type it again
|
||||
declare module "@remix-run/server-runtime" {
|
||||
export interface AppLoadContext {
|
||||
api: Api;
|
||||
}
|
||||
}
|
||||
|
||||
// export a loader that initiates the API
|
||||
// and pass it through the context
|
||||
export const loader = async (args: LoaderFunctionArgs) => {
|
||||
const api = new Api({
|
||||
host: new URL(args.request.url).origin,
|
||||
headers: args.request.headers
|
||||
});
|
||||
|
||||
// get the user from the API
|
||||
const user = api.getUser();
|
||||
|
||||
// add api to the context
|
||||
args.context.api = api;
|
||||
|
||||
return { user };
|
||||
};
|
||||
|
||||
export default function App() {
|
||||
const { user } = useLoaderData<typeof loader>();
|
||||
return (
|
||||
<ClientProvider user={user}>
|
||||
<Outlet />
|
||||
</ClientProvider>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Enabling the Admin UI
|
||||
Create a new splat route file at `app/routes/admin.$.tsx`:
|
||||
```tsx
|
||||
// app/routes/admin.$.tsx
|
||||
import { Suspense, lazy, useEffect, useState } from "react";
|
||||
import { adminPage } from "bknd/adapter/remix";
|
||||
import "bknd/dist/styles.css";
|
||||
|
||||
const Admin = lazy(() => import("bknd/ui")
|
||||
.then((mod) => ({ default: mod.Admin })));
|
||||
export default adminPage();
|
||||
```
|
||||
|
||||
export default function AdminPage() {
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
useEffect(() => {
|
||||
setLoaded(true);
|
||||
}, []);
|
||||
if (!loaded) return null;
|
||||
## 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 type { LoaderFunctionArgs } from "@remix-run/server-runtime";
|
||||
import { useLoaderData } from "@remix-run/react";
|
||||
|
||||
export const loader = async (args: LoaderFunctionArgs) => {
|
||||
const { api } = args.context;
|
||||
|
||||
// get the authenticated user
|
||||
const user = api.getAuthState().user;
|
||||
|
||||
// get the data from the API
|
||||
const { data } = await api.data.readMany("todos");
|
||||
return { data, user };
|
||||
};
|
||||
|
||||
export default function Index() {
|
||||
const { data, user } = useLoaderData<typeof loader>();
|
||||
|
||||
return (
|
||||
<Suspense>
|
||||
<Admin withProvider />
|
||||
</Suspense>
|
||||
<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