query-proxy
v0.0.9962-a
Published
selective ssr
Downloads
2,296
Maintainers
Readme
Query Proxy - Alpha
Lightweight Route Hanlders on any client framework; react, vue, svelte, qwik, solid, etc
Important Notes ⚠️
- Currently still in development (alpha) and should not be used in production
- Currently still being documented and this doc is compatible with v0.0.996
- Query proxy can currently only be deployed with vercel
- Better support for legacy applications and better typesafety would be available in the coming days
- Run the server locally to generate the "api/serverFn" folder in the root of your project before deploying to vercel
- Only compatible with vite powered client apps
Quick Guide 📖
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>
"