Peform Posts - Answer Overflow

Peform

Explore posts from servers

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

vercel Prisma Client could not locate the Query Engine

Hey, I'm currently trying to deploy the development version of my website on vercel and I have started getting this error after updating to version 6.4.1 (previously was on 5.4).

Prisma Client could not locate the Query Engine for runtime "rhel-openssl-3.0.x".

We detected that you are using Next.js, learn how to fix this: https://pris.ly/d/engine-not-found-nextjs.

This is likely caused by a bundler that has not copied "libquery_engine-rhel-openssl-3.0.x.so.node" next to the resulting bundle.
Ensure that "libquery_engine-rhel-openssl-3.0.x.so.node" has been copied next to the bundle or in "../../node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/.prisma/client".

We would appreciate if you could take the time to share some information with us.
Please help us by answering a few questions: https://pris.ly/engine-not-found-bundler-investigation

The following locations have been searched:
  /var/task/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/.prisma/client
  /var/task/apps/dashboard/.next/server
  /vercel/path0/node_modules/.pnpm/@prisma+client@6.4.1_prisma@6.4.1_typescript@5.7.3__typescript@5.7.3/node_modules/@prisma/client
  /var/task/apps/dashboard/.prisma/client
  /tmp/prisma-engines

Prisma Client could not locate the Query Engine for runtime "rhel-openssl-3.0.x".

We detected that you are using Next.js, learn how to fix this: https://pris.ly/d/engine-not-found-nextjs.

This is likely caused by a bundler that has not copied "libquery_engine-rhel-openssl-3.0.x.so.node" next to the resulting bundle.
Ensure that "libquery_engine-rhel-openssl-3.0.x.so.node" has been copied next to the bundle or in "../../node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/.prisma/client".

We would appreciate if you could take the time to share some information with us.
Please help us by answering a few questions: https://pris.ly/engine-not-found-bundler-investigation

The following locations have been searched:
  /var/task/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/.prisma/client
  /var/task/apps/dashboard/.next/server
  /vercel/path0/node_modules/.pnpm/@prisma+client@6.4.1_prisma@6.4.1_typescript@5.7.3__typescript@5.7.3/node_modules/@prisma/client
  /var/task/apps/dashboard/.prisma/client
  /tmp/prisma-engines

I have read the guide linked in the error, but I am a little confused about some of the implementation for some of the "fixes". I have already implemented a globalForPrisma variable, only difference is I am using prisma in a monorepo, so I have a package called "database", which allows me to reuse my schema across all apps. This is not a build error, this is a runtime error and the prisma client is generated at build time using a npm script: "build": "pnpm run db:generate & tsup" as suggested in the guide above (at build time it is having no issues finding prisma schema)

2 replies

TtRPC

•Created by Peform on 2/22/2025 in #❓-help

super quick question about prefetching

Is it best to use a promise.all when using multiple instances of prefetch to fetch data on the server to ensure that both queries are running at the same time? From the looks of it trpc handles this automatically so it is unneeded?

    await Promise.all([api.guild.get.prefetch({ guildId }), api.application.getList.prefetch({ guildId })]);

    await Promise.all([api.guild.get.prefetch({ guildId }), api.application.getList.prefetch({ guildId })]);

1 replies

TTCTheo's Typesafe Cult

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

create t3 app build error

Hey, The default config for create t3 app, with the following installs: prisma tailwind nextauth trpc results in a build error of:

dashboard:build:    Collecting page data ...
dashboard:build:    Generating static pages (0/4) ...
dashboard:build: Error: <Html> should not be imported outside of pages/_document.
dashboard:build: Read more: https://nextjs.org/docs/messages/no-document-import-in-page
dashboard:build:     at O (E:\coding\project-remake1\apps\dashboard\.next\server\chunks\739.js:6:1263)
dashboard:build: Error occurred prerendering page "/404". Read more: https://nextjs.org/docs/messages/prerender-error
dashboard:build: Error: <Html> should not be imported outside of pages/_document.
dashboard:build: Read more: https://nextjs.org/docs/messages/no-document-import-in-page

dashboard:build:    Collecting page data ...
dashboard:build:    Generating static pages (0/4) ...
dashboard:build: Error: <Html> should not be imported outside of pages/_document.
dashboard:build: Read more: https://nextjs.org/docs/messages/no-document-import-in-page
dashboard:build:     at O (E:\coding\project-remake1\apps\dashboard\.next\server\chunks\739.js:6:1263)
dashboard:build: Error occurred prerendering page "/404". Read more: https://nextjs.org/docs/messages/prerender-error
dashboard:build: Error: <Html> should not be imported outside of pages/_document.
dashboard:build: Read more: https://nextjs.org/docs/messages/no-document-import-in-page

After some debugging, i found that removing NODE_ENV="development" stops the build error from occuring. Why is this?

12 replies

TtRPC

•Created by Peform on 1/27/2025 in #❓-help

trpc useError hook?

Hey, I have a hook which i use for fetching some data using trpc and I'm wondering if there is some sort of useError so i can catch all of the errors for each query, in one variable? or is the best way using the error property on each of the useQuery invocations? Currently, if I want to display an error I'd have to make 3 separate variables and parse each of those in the if statement if error at the bottom.

export const GuildProvider = ({ guildId, children, fetchChannels, fetchRoles }: Props) => {
    const isFetching = useIsFetching();
    const { data: guild } = api.guild.get.useQuery({
        guildId,
    });
    const { data: channels } = api.guild.channels.useQuery(
        {
            guildId,
        },
        { enabled: fetchChannels },
    );
    const { data: roles } = api.guild.get.useQuery(
        {
            guildId,
        },
        { enabled: fetchRoles },
    );

    if (isFetching) {
        return <CustomLoader />;
    }

    if (error) {
        return <div>Error fetching guild data: {error.message}</div>;
    }

export const GuildProvider = ({ guildId, children, fetchChannels, fetchRoles }: Props) => {
    const isFetching = useIsFetching();
    const { data: guild } = api.guild.get.useQuery({
        guildId,
    });
    const { data: channels } = api.guild.channels.useQuery(
        {
            guildId,
        },
        { enabled: fetchChannels },
    );
    const { data: roles } = api.guild.get.useQuery(
        {
            guildId,
        },
        { enabled: fetchRoles },
    );

    if (isFetching) {
        return <CustomLoader />;
    }

    if (error) {
        return <div>Error fetching guild data: {error.message}</div>;
    }

1 replies

TtRPC

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

onSuccess mutation not being called

Hey, I have this mutation which is called when I click a button. Inside the onSuccess callback I show a toast to the user telling them that the request was successful. However, when I do a state change before I call the mutation, eg setRequests the onSuccess callback never runs, I know this because the console log never appears. But, when I remove the setRequests it does, there is no visible error in my console. Why does this happen? Is it by design?

export const GenerationsCard = ({ generation, selectedFlag, setRequests }: Props) => {
    const clearMutation = api.generations.clear.useMutation();
    const warnMutation = api.punishments.warn.useMutation();
    const banMutation = api.punishments.ban.useMutation();

    const handleBanGeneration = async (requestId: string, requestType: string) => {
        setRequests((prev) => prev?.filter((req) => req.id !== requestId));
        await banMutation.mutateAsync(
            { requestId, requestType },
            {
                onSuccess: (response) => {
                    console.log(234243243);
                    toast('Success', {
                        description: response.message,
                        action: {
                            label: 'Undo',
                            onClick: () => console.log('Undo'),
                        },
                    });
                },
                onError: (error) => {},
            },
        );
    };

export const GenerationsCard = ({ generation, selectedFlag, setRequests }: Props) => {
    const clearMutation = api.generations.clear.useMutation();
    const warnMutation = api.punishments.warn.useMutation();
    const banMutation = api.punishments.ban.useMutation();

    const handleBanGeneration = async (requestId: string, requestType: string) => {
        setRequests((prev) => prev?.filter((req) => req.id !== requestId));
        await banMutation.mutateAsync(
            { requestId, requestType },
            {
                onSuccess: (response) => {
                    console.log(234243243);
                    toast('Success', {
                        description: response.message,
                        action: {
                            label: 'Undo',
                            onClick: () => console.log('Undo'),
                        },
                    });
                },
                onError: (error) => {},
            },
        );
    };

2 replies

TtRPC

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

useQuery `onSuccess` callback depreciated

Hello. I've just found out that the onSuccess callback in useQuery has been depreciated. What should I be using instead?

This callback will fire any time the query successfully fetches new data.

@deprecated — This callback will be removed in the next major version.

This callback will fire any time the query successfully fetches new data.

@deprecated — This callback will be removed in the next major version.

  const {
    data: fetchedUserData,
    refetch: refetchUserData,
    isFetching: fetchingUserData,
  } = api.userLookup.find.useQuery(
    {
      userId: form.getValues("userId"),
    },
    {
      enabled: !!form.getValues("userId"),
      onSuccess: (data) => { // depreciated
        setUserData(data);
      }
    },
  );

  const {
    data: fetchedUserData,
    refetch: refetchUserData,
    isFetching: fetchingUserData,
  } = api.userLookup.find.useQuery(
    {
      userId: form.getValues("userId"),
    },
    {
      enabled: !!form.getValues("userId"),
      onSuccess: (data) => { // depreciated
        setUserData(data);
      }
    },
  );

5 replies

TtRPC

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

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

Hello, I'm currently having a very strange issue, I am using a form to input some data and send off to a trpc endpoint to retrieve some data from the server when I click the submit button. However, the respnose userData variable is being changed to undefined whenever I type into the form field. I am not sure why this is happening as I do not mutate userData anywhere, and there are no new TRPC queries running (verified checking network tab) and the TRPC endpoint is set to disabled. So it will only fetch data once I call the refetch function... Anyone have any idea?

4 replies

TtRPC

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

conditionally fetching data with a useQuery

Hello, From my understanding a useMutation is primarily for updating/deleting/creating a record. And a useQuery is primarily used for fetching data from the server. However, when it comes to conditionally fetching data from the server I belive the syntax for a useMutation is much more ideal? I'm not sure if I am missing something, or if in this scenario it would be better to use a useMutation. The issue is, I only want to query the API when the user presses a specific button and once they have input a userId to search. I also want to display a toast (notification) when the request has finished. However, the onSuccess and onError callbacks are depreciated, meaning I have to now use a useEffect. This is greatly overcomplicating everything. I'm not sure if there is a better way of doing this? Any advice would be appreciated.

3 replies

TtRPC

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

uploading image via trpc endpoint

Hello, is there any example for uploading an image to a trpc endpoint?

5 replies

Gaming

Programming