WeiKaiLe Posts - Answer Overflow

WeiKaiLe

•Created by WeiKaiLe on 5/6/2024 in #questions

fresh install - prisma db:push fails when using .env.development & .env.production

Previous T3 apps I've created an .env.development and .env.production file and prisma has worked fine.
Setup a fresh install of T3 today and while db:push works if I have the environment file named simply as .env, as soon as I change to having .env.development and .env.production, it reports the following error:

Prisma schema loaded from prisma/schema.prisma
Datasource "db": MySQL database
Error: Prisma schema validation - (get-config wasm)
Error code: P1012
error: Environment variable not found: DATABASE_URL.
  -->  schema.prisma:14
   |
13 |     // https://www.prisma.io/docs/reference/api-reference/prisma-schema-reference#string
14 |     url      = env("DATABASE_URL")
   |

Validation Error Count: 1
[Context: getConfig]

Prisma CLI Version : 5.13.0

Prisma schema loaded from prisma/schema.prisma
Datasource "db": MySQL database
Error: Prisma schema validation - (get-config wasm)
Error code: P1012
error: Environment variable not found: DATABASE_URL.
  -->  schema.prisma:14
   |
13 |     // https://www.prisma.io/docs/reference/api-reference/prisma-schema-reference#string
14 |     url      = env("DATABASE_URL")
   |

Validation Error Count: 1
[Context: getConfig]

Prisma CLI Version : 5.13.0

I've not edited env.js other than to add some additional environmental variables. Any suggestions?

5 replies

TTCTheo's Typesafe Cult

•Created by WeiKaiLe on 2/19/2024 in #questions

App router tRPC client side query not working with nextjs basePath

Hi, I'm using basePath option with nextJS, which can't be avoided for my project, and it appears to be causing conflicts with the client side. When I remove the basepath, client side useQuery works perfectly. Add it back in, and it breaks. Server side queries work regardless, no issue whether basePath option is enabled in next config or not. The network traffic says it is going to localhost:3002/api/ rather than localhost:3002/portal/api my next-config.js:

await import("./src/env.js");

/** @type {import("next").NextConfig} */
const config = {
   basePath: '/portal',
};

export default config;

await import("./src/env.js");

/** @type {import("next").NextConfig} */
const config = {
   basePath: '/portal',
};

export default config;

I'm using trpc/react

"use client";
import { api } from "~/trpc/react";

"use client";
import { api } from "~/trpc/react";

And calling it on client:

const { data } = api.poly.getLocations.useQuery();

const { data } = api.poly.getLocations.useQuery();

Any suggestions as to why this might be?

3 replies

TTCTheo's Typesafe Cult

•Created by WeiKaiLe on 2/13/2024 in #questions

App Router - How to wrap a layout in session to require login?

I want to force all users to be logged in to access a section of the site using a certain layout. For testing purposes I want the top level layout in the app directory to check for an existing session and redirect to sign in if no session exists. The next auth docs seem to be for the pages directory and those methods didn't seem to work. Is there a guide to do this with the app directory that I missed on the next auth pages? I've read that middleware might be the way to go here, with match on the routes where it is to apply. Is there an example of database session middleware to achieve this? If not, how can I modify the start template layout (below) to check for session server side?

import "~/styles/globals.css";
import { Inter } from "next/font/google";
import { TRPCReactProvider } from "~/trpc/react";

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-sans",
});

export const metadata = {
  title: "Test",
  description:
    "Test Site",
  icons: [{ rel: "icon", url: "/favicon.ico" }],
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`font-sans ${inter.variable}`}>
        <TRPCReactProvider>{children}</TRPCReactProvider>
      </body>
    </html>
  );
}

import "~/styles/globals.css";
import { Inter } from "next/font/google";
import { TRPCReactProvider } from "~/trpc/react";

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-sans",
});

export const metadata = {
  title: "Test",
  description:
    "Test Site",
  icons: [{ rel: "icon", url: "/favicon.ico" }],
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`font-sans ${inter.variable}`}>
        <TRPCReactProvider>{children}</TRPCReactProvider>
      </body>
    </html>
  );
}

4 replies

TTCTheo's Typesafe Cult

•Created by WeiKaiLe on 4/2/2023 in #questions

SSGHelper & GetStaticProps - Not loading data server side?

I'll preface this by saying I've never used SSGHelper nor GetStaticProps before, I'm definitely a noob at this. I've followed the docs here: https://trpc.io/docs/nextjs/ssg-helpers So I have the following code:

export const getServerSideProps = async (context: any) => {
  const session = await getSession(context);

  const ssg = createProxySSGHelpers({
    router: appRouter,
    ctx: { prisma, session },
    transformer: superjson,
  });

  await ssg.accounts.getAccounts.prefetch();

  return {
    props: {
      ssrAccountData: ssg.dehydrate(),  // Should be trpcState: ssg.dehydrate(). Thank you very much to aditya in the below reply for this fix.
    },
  };
};


const Accounts = (
  props: InferGetServerSidePropsType<typeof getServerSideProps>
) => {
  const { data: accountData, isLoading } = api.accounts.getAccounts.useQuery();

  accountData && console.log("have data");
  isLoading && console.log("loading");

// Other stuff goes on below to display the data - excluded here.
}

The docs state "This query will be immediately available as it's prefetched."; however, after doing this, it all seemed to load the same as before. I put those two console logs in to test if account data was there on load, but the isLoading runs first, then the tRPC query appears in the log, then when it returns the "have data" appears. I saw a post here mentioning if the user had ssr=true in their api.ts config, no real idea what impact that would have I changed that to true, but then I got no data at all, so that is back to false now. I had seen that you can set initial data for the query, which would allow me to pass the data from props into the getAccounts query; however, according to this video, I shouldn't need to and this would not be type safe: https://www.youtube.com/watch?v=G2ZzmgShHgQ So what am I doing wrong?

17 replies

Gaming

Programming