Secure database queries from your frontend

Write secure data queries directly in your frontend code with auth, multi-tenancy, roles and permission checks.

Get started now
Used by
developers from

Everything you need to build your SaaS

Managed Postgres

We deploy and run a scalable and highly available Postgres database for you.

Secure frontend DB queries

Write secure database queries.
Directly in your frontend code!

User Authentication

Secure login & registration forms with Social logins and 2FA out of the box.

Learn more

Orgs. Teams. Multi-tenancy

Organize your users into organizations or tenants with ease

Learn more

Roles & Permissions

Setup roles and manage access to APIs, and frontend pages and sections

Learn more

Payments and subscriptions

Monetize your application and control access to your premium features

Learn more

Write secure db queries directly in your frontend code

Typescript
React



        /* 
        Your Frontend code
        */
        
        // Define all your types
        interface Cat {
          id: string;
          name: string;
          color: string;
          weight: number;
        }
        
        interface CatsResponse {
          data: Cat[];
          totalCount: number;
        }
        
        // Fetch data
        (async () => {
          // Prep URL
          const uri = new URL("https://www.example.dev/cats");
          uri.searchParams.append("color", "black");
          uri.searchParams.append("skip", String(10));
          uri.searchParams.append("take", String(10));
        
          // Request to endpoint
          const response = await fetch(uri.href, {
            method: "GET",
            headers: {
              "Content-Type": "application/json",
            },
          });
        
          // Cast response to defined type
          const cats = (await response.json()) as CatsResponse;
          console.log(cats);
        })();
Fetching data - Without ROQ

                                      /* 
                                      Your Frontend code
                                      */

                                      // Types are auto generated from your ROQ client SDK
                                      async () => {
                                          // Just Query your db from the frontend
                                          const cats = await roq.cats.findManyWithCount({
                                              where: { color: "black", take: 10, skip: 10 },
                                          });
                                          console.log(cats);
                                      };
Fetching data - With ROQ

  /* 
  Your Frontend code
  */

  // Types are auto generated from your ROQ client SDK
      async () => {
      // Just Query your db from the frontend
      const cats = await roq.cats.findManyWithCount({
          where: { color: "black", take: 10, skip: 10 },
      });
      console.log(cats);
  };
  


  
  
      // Define your types
      interface Cat {
        id: string;
        name: string;
        color: string;
        weight: number;
      }
      
      interface CatsResponse {
        data: Cat[];
        totalCount: number;
      }
      
      const API_URL = "https://your-api-url.com/cats";
      
      // Fetcher function for React SWR
      async function fetcher(url: string): Promise<CatsResponse> {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`Network response was not ok ${response.statusText}`);
        }
        return response.json();
      }
      
      // Define the useCats hook
      function useCats() {
        const { data, error } = useSWR<CatsResponse>(API_URL, fetcher);
      
        return {
          data: data?.data,
          totalCount: data?.totalCount,
          isLoading: !error && !data,
          isError: error,
        };
      }
      
      const { data, isLoading, isError } = useCats();
Fetching data - Without ROQ

                                    // Import autogenerated hook from ROQ client SDK
                                    import { useCatFindMany } from "@/lib/roq";
                                    
                                    // Just fetch your data!
                                    const { data, isLoading, error } = useCatFindMany();
Fetching data - With ROQ

  // Import autogenerated hook from ROQ client SDK
  import { useCatFindMany } from "@/lib/roq";

  // Just fetch your data!
  const { data, isLoading, error } = useCatFindMany();

Orgs. Teams. Multi-tenancy

Create Organizations on Signup

Group users into Organizations

Invite users to Organizations

Get started
Learn more

Roles & Permissions

Manage roles and access to data without writing ugly "if statements" or unreliable where conditions. Control everything from one single view.

Get started
Learn more

import { useAuthorizationApi } from "@roq/nextjs"
function PerformancePage() {
  const { hasAccess } = useAuthorizationApi()
  return (
    <>
      { hasAccess("performance_review", "READ") && (
        <Button>View Review</Button>
      )}
    </>
  )
}

Payments

Coming Soon

Easily charge your users by using Stripe's pre-integrated subscription and billing engine.

Subscriptions

Charge your users via flexible monthly subscriptions

Paywall for your app

Gate access to APIs or frontend sections by subscription plan

Get started
Learn more

import { usePaymentApi } from "@roq/nextjs"
function MyPremiumFeature() {
  const { hasAccess } = usePaymentApi()
  return (
    <>
      { hasAccess("my_premium_feature") && (
        <Button>Download Media</Button>
      )}
    </>
  )
}

AI assisted data modeling

AI Assisted schema builder

Build your schema rapidly and robustly with AI assistance

Visualize your data model

Review your data entities and their relationships diagrammatically  

Deploy seamlessly

Deploy schema changes and migrations with the click of a button

Get started
Learn more

5K+ developers have built projects with ROQ

See what they're saying about us

Next.js
Express.js
Sveltekit
Nuxt.js
RedwoodJS

Integrates seamlessly with your favorite frameworks

Ready to launch your SaaS
in a week?

Get started now