Drizzle error with React Query

Hello, I'm trying to get real time updates for my event log that im keeping in supabase. I had no issues accessing data trough Drizzle till i tried to make React query . I'm adding a code where i have simple supabase data fetch and drizzle (commented). when trying wtih drizzle one im getting the error with postgres picture bellow.

import { eventsBLC } from "~/schema/eventsBLC";
import { db } from "./drizzleClient";
import { users } from "~/schema/users";
import { desc, eq } from "drizzle-orm";
import { useQuery } from "@tanstack/react-query";
import { supabase } from "~/lib/supabaseClient";

// export const getBLCLogs = async () => {
//   const data = await db
//     .select()
//     .from(eventsBLC)
//     .limit(4)
//     .orderBy(desc(eventsBLC.created_at))
//     .leftJoin(users, eq(eventsBLC.userId, users.id));
//   return data;
// };
export const supabaseBLC = async () => {
  const { data: eventsBLC, error } = await supabase
    .from("eventsBLC")
    .select("*")
    .limit(4)
    .order("id", { ascending: false });
  return eventsBLC;
};

export function useGetBLCPosts() {
  return useQuery({
    queryFn: async () => supabaseBLC(),
    queryKey: ["logs"],
  });
}

import { eventsBLC } from "~/schema/eventsBLC";
import { db } from "./drizzleClient";
import { users } from "~/schema/users";
import { desc, eq } from "drizzle-orm";
import { useQuery } from "@tanstack/react-query";
import { supabase } from "~/lib/supabaseClient";

// export const getBLCLogs = async () => {
//   const data = await db
//     .select()
//     .from(eventsBLC)
//     .limit(4)
//     .orderBy(desc(eventsBLC.created_at))
//     .leftJoin(users, eq(eventsBLC.userId, users.id));
//   return data;
// };
export const supabaseBLC = async () => {
  const { data: eventsBLC, error } = await supabase
    .from("eventsBLC")
    .select("*")
    .limit(4)
    .order("id", { ascending: false });
  return eventsBLC;
};

export function useGetBLCPosts() {
  return useQuery({
    queryFn: async () => supabaseBLC(),
    queryKey: ["logs"],
  });
}

Angelelz•2/9/24, 11:12 AM

I don't think this has anything to do with react query. Are you using bun, or in a different environment than node? Do you have Middleware running Postgres call?

erla000OP•2/9/24, 5:05 PM

No to all of them. Im only using Postress to initiate drizzle client (as per tutorials)

Angelelz•2/9/24, 11:40 PM

Are you trying to run that code in the browser?

nk•2/10/24, 3:10 AM

@Erla You're trying to put backend code on the frontend.

erla000OP•2/12/24, 8:21 AM

Yes ,apparently postgres package does not support being imported to the client side. That's why there is no issue with default supabase client to use in react query( client side for real time data) . So there are 2 ways for me. Either use 2 connections to db(drizzle and supabase for client side real time data) , or refactor the code to API route. Since I'm new to databases in general ,would appreciate comments if there is anyway to get real time data, solely with drizzle . Thank you.

Angelelz•2/12/24, 11:21 AM

Not familiar enough be give a sensible opionion

rphlmr ⚡•2/12/24, 1:22 PM

nk is right, React query runs in the browser, so you can't (and would not) make DB calls here.
Supabase SDK is working because it is its main purpose: to give a way to query a DB without a server. Behind the scenes, Supabase is wrapping your query in an HTTP request sent to PostgREST (a third service offered by Supabase).

rphlmr ⚡•2/12/24, 1:23 PM

you probably have added RLS policies to prevent open access to you DB.

rphlmr ⚡•2/12/24, 1:25 PM

You could safely use Supabase Realtime here (https://supabase.com/docs/guides/realtime) and Drizzle in API routes.
Or, only use the Supabase SDK (without Drizzle) if you are more comfortable with it.

Realtime | Supabase Docs

Send and receive messages to connected clients.

rphlmr ⚡•2/12/24, 1:28 PM

Since you use NextJS, you can use Drizzle in a Server Component (without React Query), but this is relatively new and it will depend on how you feel comfortable with this mental model

erla000OP•2/12/24, 7:29 PM

Thanks for advice , will definetely look into all of the options.