improved nextjs/remix adapters and docs, confirmed remix ssr working

This commit is contained in:
dswbx
2024-11-26 11:15:38 +01:00
parent eea76ebc28
commit 9d896a6ab1
23 changed files with 275 additions and 209 deletions

View File

@@ -3,6 +3,12 @@ import { Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData } from "
import { Api } from "bknd";
import { ClientProvider } from "bknd/ui";
declare module "@remix-run/server-runtime" {
export interface AppLoadContext {
api: Api;
}
}
export function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">

View File

@@ -1,31 +1,26 @@
import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import type { Api } from "bknd";
import { useClient } from "bknd/ui";
import { type MetaFunction, useLoaderData } from "@remix-run/react";
import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
export const meta: MetaFunction = () => {
return [{ title: "Remix & bknd" }, { name: "description", content: "Welcome to Remix & bknd!" }];
};
export const loader = async (args: LoaderFunctionArgs) => {
const api = args.context.api as Api;
const api = args.context.api;
const user = api.getAuthState().user;
const { data } = await api.data.readMany("todos");
return { data, user };
};
export default function Index() {
const data = useLoaderData<typeof loader>();
const client = useClient();
const query = client.query().data.entity("todos").readMany();
const { data, user } = useLoaderData<typeof loader>();
return (
<div>
hello
<pre>{client.baseUrl}</pre>
<h1>Data</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
<pre>{JSON.stringify(query.data, null, 2)}</pre>
<h1>User</h1>
<pre>{JSON.stringify(user, null, 2)}</pre>
</div>
);
}

View File

@@ -1,19 +1,4 @@
import { Suspense, lazy, useEffect, useState } from "react";
const Admin = lazy(() => import("bknd/ui").then((mod) => ({ default: mod.Admin })));
import { adminPage } from "bknd/adapter/remix";
import "bknd/dist/styles.css";
export default function AdminPage() {
const [loaded, setLoaded] = useState(false);
useEffect(() => {
if (typeof window === "undefined") return;
setLoaded(true);
}, []);
if (!loaded) return null;
return (
<Suspense>
<Admin />
</Suspense>
);
}
export default adminPage();