query-proxy v0.0.9962-a

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>"