Peform Comments - Answer Overflow

Peform

Explore posts from servers

TtRPC PPrisma TTCTheo's Typesafe Cult

Posts Comments

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

TtRPC

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

conditionally fetching data with a useQuery

export function UserLookup() {
  const [userLookupEnabled, setUserLookupEnabled] = useState(false);

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

  const { data: userData } = api.userLookup.find.useQuery(
    {
      userId: form.getValues("userId"),
    },
    {
      enabled: userLookupEnabled && !!form.getValues("userId"),
    },
  );
  
  // enable the useQuery and fetch some data....
  const handleLookupUser = () => {
    setUserLookupEnabled(true);
  };

  return (
    <>
        <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>
    </>

export function UserLookup() {
  const [userLookupEnabled, setUserLookupEnabled] = useState(false);

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

  const { data: userData } = api.userLookup.find.useQuery(
    {
      userId: form.getValues("userId"),
    },
    {
      enabled: userLookupEnabled && !!form.getValues("userId"),
    },
  );
  
  // enable the useQuery and fetch some data....
  const handleLookupUser = () => {
    setUserLookupEnabled(true);
  };

  return (
    <>
        <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>
    </>

3 replies

TtRPC

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

uploading image via trpc endpoint

Yes please, I am using base64 right now but for larger images it makes it impossible to send! Would appreciate a snippet alot. Thanks

5 replies

Gaming

Programming