#How to use T3ENV in running project?

21 messages · Page 1 of 1 (latest)

ivory mango
#

Hello team!,
When the first time creating a tantstack start project, we see that we can add T3ENV.

But how do we integrated to an already running tanstack start project? I didn't found the steps in the docs or T3ENV docs.

Thank you

cobalt gulch
#

just... do it ?

#

there is nothing framework dependent with t3-env

#

here's an example

ivory mango
#

ohh ya you are right T__T. I feel really stupid, in the docs I only see nuxt and nextjs. I thought it didnt support it, but its actually really simple. Thank you

toxic notch
# cobalt gulch https://github.com/notKamui/miniverso/tree/main/src/lib/env

Hey I see your implementation of how you separate the client/server variables and I have mine implemented the same way but I get a runtime error Attempted to access server-side environment variable on the client This will ONLY happen if I import ./src/env/server.ts and not if I directly use process.env.DATABASE_URL

If you have any idea why this is happening I'd much appreciate the help. Thanks 🙂

// src/server/db/index.ts
import { drizzle } from "drizzle-orm/neon-serverless";
import { Pool } from "@neondatabase/serverless";
import * as schema from "./schema";
import { relations } from "./relations";
import { env } from "~/env/server";

/* const pool = new Pool({ connectionString: env.DATABASE_URL }); results in error */
const pool = new Pool({ connectionString: process.env.DATABASE_URL }); // works as expected
const db = drizzle({ client: pool, schema, relations });

export { db, dbSchema as schema };

import { createEnv } from "@t3-oss/env-core";
import z from "zod";

export const env = createEnv({
  server: {
    DATABASE_URL: z.url(),
    SECRET_KEY: z.string(),
    RESEND_API_KEY: z.string(),
   },
  runtimeEnv: process.env,
  emptyStringAsUndefined: true,
});
cobalt gulch
#

you also may wrap the db instance creation inside a createServerOnlyFn

# 
const db = createServerOnlyFn(() => {
  const pool = new Pool({ connectionString: env.DATABASE_URL })
  return drizzle(...)
})() // immediately invoked
toxic notch
#

yeah I've tried that and it doesn't seem to work, but I should be getting that same error when I use process.env too right? instead of only when I use t3 package

#

when I do that it will say that I cannot run a serverOnlyFn on client, but the only server code I import are the server functions that I've created and I use the useServerFn hook before I invoke them

cobalt gulch
#

it's t3 env that's throwing that error because it is detecting the context

#

it MUST be that you're importing your db file in a client context accidentally

#

@toxic notch could you show every file where you've imported either schema or db

toxic notch
# cobalt gulch <@183418821208571904> could you show every file where you've imported either sch...

sorry for the late response, but here is where I am importing my serverFn and using it inside of a hook. This is the only server Fn I have implemented as of right now

// server/db/index.ts
import { drizzle } from "drizzle-orm/neon-serverless";
import { Pool } from "@neondatabase/serverless";
import * as schema from "./schema";
import { relations } from "./relations";
import { env } from "~/env/server";

const pool = new Pool({ connectionString: env.DATABASE_URL });
const db = drizzle({ client: pool, schema: schema, relations });

export { db, schema };

// /server/fn/workspaces.ts
export const getWorkspaces = createServerFn({ method: "GET" }).handler(
  async () => {
    const session = await validateSession();

    if (!session) throw redirect({ to: "/" });

    const workspaces = await db.query.workspaces.findMany({
      where: { userId: session.id },
      orderBy: { name: "asc" },
      with: {
        lists: true,
      },
    });

    return workspaces;
  },
);

// use-workspaces.ts
import { useQuery } from "@tanstack/react-query";
import { WORKSPACES } from "~/constants/keys";
import { getWorkspaces } from "~/server/fn/workspaces";

export function useWorkspaces() {
  const { data, isLoading, refetch } = useQuery({
    queryKey: WORKSPACES,
    queryFn: ({ signal }) => getWorkspaces({ signal }),
  });

  return { workspaces: data, isLoading, refetch };
}

export type Workspaces = NonNullable<
  ReturnType<typeof useWorkspaces>["workspaces"]
>;
cobalt gulch
toxic notch
#

thank you

ivory mango