Drizzle Team•2mo ago

NEXTJS: module not found: net

hey guys, i've been trying drizzle with react query within the app router. everything works great on the server components, but it throws an error: 'module net is not defined' when i try to use the same query function on the client. ill provide some code: this is how i create my drizzle client:

import { drizzle } from "drizzle-orm/postgres-js";
import postgres from "postgres";

const connectionString = process.env.DATABASE_URL;

if (!connectionString) {
  throw new Error("DATABASE_URL is not set");
}
const client = postgres(connectionString);

export const db = drizzle(client);

import { drizzle } from "drizzle-orm/postgres-js";
import postgres from "postgres";

const connectionString = process.env.DATABASE_URL;

if (!connectionString) {
  throw new Error("DATABASE_URL is not set");
}
const client = postgres(connectionString);

export const db = drizzle(client);

this is my query function (works on server but not on client):

import { db } from "@/lib/drizzle";
import { provincia } from "@/lib/drizzle/schema";
import { cache } from "react";

const getProvincias = cache(async () => {
  try {
    const provincias = await db.select().from(provincia);
    return provincias;
  } catch (error) {
    console.error(error);
  }
});

export default getProvincias;

import { db } from "@/lib/drizzle";
import { provincia } from "@/lib/drizzle/schema";
import { cache } from "react";

const getProvincias = cache(async () => {
  try {
    const provincias = await db.select().from(provincia);
    return provincias;
  } catch (error) {
    console.error(error);
  }
});

export default getProvincias;

this is how im fetching data on page.tsx (works fine)

const Page = async () => {
  const queryClient = new QueryClient();

  await queryClient.prefetchQuery({
    queryKey: ["provincias"],
    queryFn: getProvincias,
  });
  
  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <div className="flex w-full flex-col gap-4 max-w-[1000px] m-auto">
        <NuevoCampoSteps />
      </div>
    </HydrationBoundary>
  );
};

const Page = async () => {
  const queryClient = new QueryClient();

  await queryClient.prefetchQuery({
    queryKey: ["provincias"],
    queryFn: getProvincias,
  });
  
  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <div className="flex w-full flex-col gap-4 max-w-[1000px] m-auto">
        <NuevoCampoSteps />
      </div>
    </HydrationBoundary>
  );
};

this is how im fetching on client component (throws module not found error):

  const { data: provincias } = useQuery({
    queryKey: ["provincias"],
    queryFn: getProvincias,
  });

  const { data: provincias } = useQuery({
    queryKey: ["provincias"],
    queryFn: getProvincias,
  });

why does it throw an error when fetching client side? is there any way i can use the same query function server and client side? or do i have to create an api endpoint for client side fetching? thanks!

1 Reply

Salumsu•2mo ago

I don't think you can use db on the client. And since getProvncias is using it, which you are directly using on the client, you would expect some errors. You can do either of these: - Create an api endpoint for querying the database and create a function that fetches that endpoint. - Create a server action, some people don't recommend this when you're dealing with authentication and sensitive info (such as api keys)

Gaming

Programming

NEXTJS: module not found: net