Lightweight Route Hanlders on any client framework; react, vue, svelte, qwik, solid, etc
Installation:
npm i query-proxy
Setup:
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import { queryProxy } from "query-proxy";
import "./serverFn";
export default defineConfig({
plugins: [react(), queryProxy()],
});
In the root of your project create a serverFn.js file and add the following code
import { createServerFn } from "query-proxy";
createServerFn("myFunction", async (req, res) => {
console.log("Hello from the server user!");
res.status(200).json({
message: "JavaScript logic executed on the server",
timestamp: new Date(),
});
});
To consume this function, it is provided as an endpoint on the client like so
import { useEffect } from "react";
function App() {
useEffect(() => {
fetch("/api/serverFn/myFunction")
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.error("Error fetching data:", error));
}, []);
return (
<div className="w-full min-h-[100vh] flex justify-center items-center">
route handlers in react
</div>
);
}
export default App;
Where the createSeverFn name is the endpoint "/api/serverFn/<function-name>
"