Peform Comments - Answer Overflow

While this works, it feels like there should be a nicer way?. Is there a recommended approach for handling this server-prefetch + client-refresh scenario with tRPC in Next.js?

2 replies

PPrisma

•Created by Peform on 2/27/2025 in #help-and-questions

strictUndefinedChecks undesired behavior

I think the current implementation of this will just introduce more bugs because we get no intellisense from typescript saying that this could potentially cause an error due to prisma not allowing undefined values

11 replies

PPrisma

•Created by Peform on 2/27/2025 in #help-and-questions

strictUndefinedChecks undesired behavior

this doesn't really address the full problem of the findFirst. Before this new preview feature came into effect we'd have to remember to check if the field we were querying by was undefined or not, we seemlying still need to remember to do this for every potentially undefined field? Just going back to the original post,

If undefined values are indeed disallowed, wouldn’t it be helpful if the types only accepted a string or null instead? This way, any potential issues could be caught during development instead of at runtime.

I think this would be a major improvement, and it wouldn't require us to remember to use Prisma.skip everytime we use an undefined field?

11 replies

PPrisma

•Created by Peform on 2/27/2025 in #help-and-questions

strictUndefinedChecks undesired behavior

I think this is a little annoying having to do this every time though no? This does fix the issue, but having to remember to do this everytime we update or create a value that is potentially undefined is a bit cumbersome?

11 replies

PPrisma

•Created by Peform on 2/24/2025 in #help-and-questions

vercel Prisma Client could not locate the Query Engine

im very happy to see the strictUndefinedChecks preview feature in v6 🙂

6 replies

PPrisma

•Created by Peform on 2/24/2025 in #help-and-questions

vercel Prisma Client could not locate the Query Engine

hi, i ended up downgrading to 5.4 again and it started working. However, I have just installed the latest version again and it all seems to be working fine? a bit confused, but ill take it as a win. I have not added any binary targets or packages as suggested above.

6 replies

TTCTheo's Typesafe Cult

•Created by Peform on 2/21/2025 in #questions

create t3 app build error

Okay thank you for the responses 🙂

12 replies

TTCTheo's Typesafe Cult

•Created by Peform on 2/21/2025 in #questions

create t3 app build error

Hi, Yes I am running turbo repo. I have just tried building after deleting the .next build folder, but still get the same error. (It seems to switch between showing /404 and /500 as the pages that are erroring? However, if I do remove NODE_ENV="DEVELOPMENT" the build errors stop, although I do use my node_env=dev in other apps in my monorepo, so i was hoping to keep this.

12 replies

TTCTheo's Typesafe Cult

•Created by Peform on 2/21/2025 in #questions

create t3 app build error

12 replies

TTCTheo's Typesafe Cult

•Created by Peform on 2/21/2025 in #questions

create t3 app build error

I am using the default code that is inside of page.tsx/layout.tsx (but i stripped out some of the html: page.tsx

import { auth } from '@/server/auth';
import { api, HydrateClient } from '@/trpc/server';

export default async function Home() {
    const session = await auth();

    if (session?.user) {
        void api.post.getLatest.prefetch();
    }

    return (
        <HydrateClient>
            <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white">
                <div>
                    <h1>hi</h1>
                </div>
            </main>
        </HydrateClient>
    );
}

import { auth } from '@/server/auth';
import { api, HydrateClient } from '@/trpc/server';

export default async function Home() {
    const session = await auth();

    if (session?.user) {
        void api.post.getLatest.prefetch();
    }

    return (
        <HydrateClient>
            <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white">
                <div>
                    <h1>hi</h1>
                </div>
            </main>
        </HydrateClient>
    );
}

Layout.tsx

import '@/styles/globals.css';

import { GeistSans } from 'geist/font/sans';
import type { Metadata } from 'next';

import { TRPCReactProvider } from '@/trpc/react';

export const metadata: Metadata = {
    title: 'Create T3 App',
    description: 'Generated by create-t3-app',
    icons: [{ rel: 'icon', url: '/favicon.ico' }],
};

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

import '@/styles/globals.css';

import { GeistSans } from 'geist/font/sans';
import type { Metadata } from 'next';

import { TRPCReactProvider } from '@/trpc/react';

export const metadata: Metadata = {
    title: 'Create T3 App',
    description: 'Generated by create-t3-app',
    icons: [{ rel: 'icon', url: '/favicon.ico' }],
};

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

12 replies

TTCTheo's Typesafe Cult

•Created by Peform on 2/21/2025 in #questions

create t3 app build error

full error

12 replies

TtRPC

•Created by Peform on 8/7/2024 in #❓-help

useQuery `onSuccess` callback depreciated

Thank you will give this a watch

5 replies

TtRPC

•Created by Peform on 6/6/2024 in #❓-help

TRPC response data changing to undefined when typing in a form field.

And as an extra question, is this method of data querying a best practise? I feel like for data querying like this a useMutation is better suited, even though mutations are for changing data not querying... the syntax for mutations is much better suited for this scenario I believe.

4 replies

TtRPC

•Created by Peform on 6/6/2024 in #❓-help

TRPC response data changing to undefined when typing in a form field.

export function UserLookup() {
  const searchParams = useSearchParams();
  const [filters, _setFilters] = useState();
  const [filteredGenerations, _setFilteredGenerations] = useState<
    RouterOutputs["userLookup"]["getGenerations"]
  >([]);

  const form = useForm<z.infer<typeof lookupUserSchema>>({
    resolver: zodResolver(lookupUserSchema),
    defaultValues: {
      userId: searchParams.get("userId") ?? "",
    },
  });

  const { data: userData, refetch: refetchUserData } =
    api.userLookup.find.useQuery(
      {
        userId: form.getValues("userId"),
      },
      {
        enabled: false,
      },
    );

  const handleLookupUser = async () => {
    const response = await refetchUserData();
    if (response.error) {
      toast({
        title: "Error",
        description: response?.error?.message ?? "An unknown error occurred",
      });
    }
  };

  console.log(1, userData);

  return (
    <>
      <div className="flex flex-col gap-4">
        <Form {...form}>
          <form onSubmit={form.handleSubmit(handleLookupUser)}>
            <FormField
              control={form.control}
              name="userId"
              render={({ field }) => (
                <FormItem className="grow">
                  <FormLabel>Prompt</FormLabel>
                  <FormControl>
                    <Input
                      placeholder="Enter your prompt"
                      maxLength={2048}
                      className="resize-none"
                      type="text"
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Button className="mt-3" type="submit">
              Lookup user
            </Button>
          </form>
        </Form>
        {userData && (...)}
  </>

export function UserLookup() {
  const searchParams = useSearchParams();
  const [filters, _setFilters] = useState();
  const [filteredGenerations, _setFilteredGenerations] = useState<
    RouterOutputs["userLookup"]["getGenerations"]
  >([]);

  const form = useForm<z.infer<typeof lookupUserSchema>>({
    resolver: zodResolver(lookupUserSchema),
    defaultValues: {
      userId: searchParams.get("userId") ?? "",
    },
  });

  const { data: userData, refetch: refetchUserData } =
    api.userLookup.find.useQuery(
      {
        userId: form.getValues("userId"),
      },
      {
        enabled: false,
      },
    );

  const handleLookupUser = async () => {
    const response = await refetchUserData();
    if (response.error) {
      toast({
        title: "Error",
        description: response?.error?.message ?? "An unknown error occurred",
      });
    }
  };

  console.log(1, userData);

  return (
    <>
      <div className="flex flex-col gap-4">
        <Form {...form}>
          <form onSubmit={form.handleSubmit(handleLookupUser)}>
            <FormField
              control={form.control}
              name="userId"
              render={({ field }) => (
                <FormItem className="grow">
                  <FormLabel>Prompt</FormLabel>
                  <FormControl>
                    <Input
                      placeholder="Enter your prompt"
                      maxLength={2048}
                      className="resize-none"
                      type="text"
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Button className="mt-3" type="submit">
              Lookup user
            </Button>
          </form>
        </Form>
        {userData && (...)}
  </>

4 replies

Gaming

Programming