Drizzle Team•10mo ago

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"],
  });
}

10 Replies

Angelelz•10mo ago

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?

ErlaOP•10mo ago

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

Angelelz•10mo ago

Are you trying to run that code in the browser?

nk•10mo ago

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

ErlaOP•10mo ago

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•10mo ago

Not familiar enough be give a sensible opionion

rphlmr ⚡•10mo ago

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). + you probably have added RLS policies to prevent open access to you DB.

rphlmr ⚡•10mo ago

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 ⚡•10mo ago

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 😄

ErlaOP•10mo ago

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

Gaming

Programming

Drizzle error with React Query