kenny Posts - Answer Overflow

kenny

•Created by kenny on 7/30/2024 in #questions

Websocket advice nextjs-nestjs

Hi everyone, I'm currently working on a Point of Sale (POS) web app that is primarily used on Samsung tablets with a special browser called Star WebPRNT. This browser is required for receipt printing functionality. Recently, I started developing a QR code scanning feature to scan vouchers and apply discounts for customers. The feature works perfectly on Chrome, but unfortunately, it doesn't work in the Star WebPRNT browser, which is quite frustrating. To work around this, my team and I decided to move the QR code scanning feature to a separate page that will be accessed via Chrome (or any browser other than Star WebPRNT). When a QR code is scanned, it should notify the app running in the Star WebPRNT browser about the scanned voucher data. We plan to send this data via WebSockets and then set it in the React state. Here's the setup we envision: - Main POS app: https://ourproject.vercel.app/ (running in the Star WebPRNT browser) - QR code scanning page: https://ourproject.vercel.app/scan-voucher (running in another browser, like Chrome) Both pages will communicate with each other via WebSockets. My question is: What WebSocket service would you recommend for this setup? The company I work for doesn't want to use AWS, even though we have used it in the past. So, I'm looking for alternatives. Additional context: - The app is built with Next.js and communicates with a NestJS backend. Any advice or recommendations would be greatly appreciated! Thank you.

2 replies

TTCTheo's Typesafe Cult

•Created by kenny on 5/17/2023 in #questions

Type error when using useInfiniteQuery

Argument of type '{ cursor: number; location: string; }' is not assignable to parameter of type 'Omit<{ cursor: string; location: string; }, "cursor">'.
  Object literal may only specify known properties, and 'cursor' does not exist in type 'Omit<{ cursor: string; location: string; }, "cursor">'.

Argument of type '{ cursor: number; location: string; }' is not assignable to parameter of type 'Omit<{ cursor: string; location: string; }, "cursor">'.
  Object literal may only specify known properties, and 'cursor' does not exist in type 'Omit<{ cursor: string; location: string; }, "cursor">'.

That's the type error I am getting. I am using trpc with nextjs This is the query I am making:

  const {
    data,
    isLoading,
    error,
    hasNextPage,
    isFetchingNextPage,
    fetchNextPage,
  } = api.products.getAllByLocationPaginated.useInfiniteQuery(
    { cursor: page, location },
    {
      enabled: locationSelected,
      getNextPageParam: (lastPage) =>
        lastPage.currentPage === lastPage.totalPages ? null : lastPage.nextPage,
      getPreviousPageParam: (page) => page.prevPage,
    }
  );

  const {
    data,
    isLoading,
    error,
    hasNextPage,
    isFetchingNextPage,
    fetchNextPage,
  } = api.products.getAllByLocationPaginated.useInfiniteQuery(
    { cursor: page, location },
    {
      enabled: locationSelected,
      getNextPageParam: (lastPage) =>
        lastPage.currentPage === lastPage.totalPages ? null : lastPage.nextPage,
      getPreviousPageParam: (page) => page.prevPage,
    }
  );

This is how it's handled on the trpc router:

  getAllByLocationPaginated: publicProcedure
    .input(z.object({ location: z.string(), cursor: z.string() }))
    .query(async ({ input }) => {
      const { data } = await axios.get<{
        prevPage: number;
        currentPage: number;
        nextPage: number;
        totalPages: number;
        products: IProduct[];
      }>(
        `${baseUrl}/products/get-all-paginated-by-location-code/?pageNumber=${input.cursor}&warehouseCode=${input.location}`
      );

      if (!data) {
        throw new TRPCError({
          code: "NOT_FOUND",
          message: "Failed to fetch products!",
        });
      }

      return data;
    }),

  getAllByLocationPaginated: publicProcedure
    .input(z.object({ location: z.string(), cursor: z.string() }))
    .query(async ({ input }) => {
      const { data } = await axios.get<{
        prevPage: number;
        currentPage: number;
        nextPage: number;
        totalPages: number;
        products: IProduct[];
      }>(
        `${baseUrl}/products/get-all-paginated-by-location-code/?pageNumber=${input.cursor}&warehouseCode=${input.location}`
      );

      if (!data) {
        throw new TRPCError({
          code: "NOT_FOUND",
          message: "Failed to fetch products!",
        });
      }

      return data;
    }),

18 replies

TTCTheo's Typesafe Cult

•Created by kenny on 5/8/2023 in #questions

Error: No QueryClient set, use QueryClientProvider to set one

The error is coming from this snippet

 const {
    data,
    isLoading,
    error,
    hasNextPage,
    isFetchingNextPage,
    fetchNextPage,
  } = api.products.getAllByPage.useInfiniteQuery(
    {
      cursor: page,
    },
    {
      getNextPageParam: (lastPage) => lastPage.nextPage,
      getPreviousPageParam: (page) => page.prevPage,
    }
  );

 const {
    data,
    isLoading,
    error,
    hasNextPage,
    isFetchingNextPage,
    fetchNextPage,
  } = api.products.getAllByPage.useInfiniteQuery(
    {
      cursor: page,
    },
    {
      getNextPageParam: (lastPage) => lastPage.nextPage,
      getPreviousPageParam: (page) => page.prevPage,
    }
  );

Where I try to fetch products by page. the products routers look as follows:

export const productsRouter = createTRPCRouter({
  getAll: publicProcedure.query(async () => {
    const { data } = await axios.get(`${baseUrl}/products/`);

    return data;
  }),

  getAllByPage: publicProcedure
    .input(z.object({ cursor: z.number().nullish() }))
    .query(async ({ input }) => {
      const { data } = await axios.get<{
        prevPage: number;
        currentPage: number;
        nextPage: number;
        totalPages: number;
        products: IProduct[];
      }>(`${baseUrl}/products/get-all-by-page/${input?.cursor ?? 1}`);

      if (!data) {
        throw new TRPCError({
          code: "NOT_FOUND",
          message: "Failed to fetch products!",
        });
      }

      return data;
    }),
});

export const productsRouter = createTRPCRouter({
  getAll: publicProcedure.query(async () => {
    const { data } = await axios.get(`${baseUrl}/products/`);

    return data;
  }),

  getAllByPage: publicProcedure
    .input(z.object({ cursor: z.number().nullish() }))
    .query(async ({ input }) => {
      const { data } = await axios.get<{
        prevPage: number;
        currentPage: number;
        nextPage: number;
        totalPages: number;
        products: IProduct[];
      }>(`${baseUrl}/products/get-all-by-page/${input?.cursor ?? 1}`);

      if (!data) {
        throw new TRPCError({
          code: "NOT_FOUND",
          message: "Failed to fetch products!",
        });
      }

      return data;
    }),
});

And Inside of my _app.tsx component I am returning this:

return (
    <QueryClientProvider client={queryClientRef.current} contextSharing={true}>
      {/* @ts-ignore */}
      <Hydrate state={pageProps.dehydratedState}>
        <ManagedUIContext>
          <>
            <DefaultSeo />
            <Layout pageProps={pageProps}>
              <Component {...pageProps} key={router.route} />
            </Layout>
            <ToastContainer />
            <ManagedModal />
            <ManagedDrawer />
          </>
        </ManagedUIContext>
      </Hydrate>
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );

return (
    <QueryClientProvider client={queryClientRef.current} contextSharing={true}>
      {/* @ts-ignore */}
      <Hydrate state={pageProps.dehydratedState}>
        <ManagedUIContext>
          <>
            <DefaultSeo />
            <Layout pageProps={pageProps}>
              <Component {...pageProps} key={router.route} />
            </Layout>
            <ToastContainer />
            <ManagedModal />
            <ManagedDrawer />
          </>
        </ManagedUIContext>
      </Hydrate>
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );

So I have indeed set QueryClientProvider and passed the QueryClient through.

29 replies

TTCTheo's Typesafe Cult

•Created by kenny on 4/29/2023 in #questions

next-prisma-websockets-starter explanation

This is the repo I'm trying to copy websocket setup from... https://github.com/trpc/examples-next-prisma-websockets-starter Inside of the server folder in this template, [https://github.com/trpc/examples-next-prisma-websockets-starter/tree/main/src/server] there is a prodServer.ts file and a wssDevServer.ts file. How are these files used?? When and how is the prodServer.ts file used(ran) and how is the wssDevServer.ts file ran? Because in the trpc.ts file [https://github.com/trpc/examples-next-prisma-websockets-starter/blob/main/src/utils/trpc.ts] the wsLink is used but there are no checks for dev or prod. And WS_URL is imported from publicRuntimeConfig. This is confusing. The tRPC docs also do it differently. They hardcode the websocket urls. And there are no checks for dev and prod.

86 replies

TTCTheo's Typesafe Cult

•Created by kenny on 4/19/2023 in #questions

How to SSG a page from my T3 app??

I have been following this documentation: https://trpc.io/docs/nextjs/ssg So I have a [chat].tsx route and I put this in the page component:

import { createServerSideHelpers } from "@trpc/react-query/server";
import {
  GetStaticPaths,
  GetStaticPropsContext,
  InferGetStaticPropsType,
} from "next";
import { appRouter } from "@/server/api/root";
import { prisma } from "@/server/db";

type ChatRouteQuery = {
  chat: string;
};

export async function getStaticProps(
  context: GetStaticPropsContext<{ chat: string }>
) {
  const helpers = createServerSideHelpers({
    router: appRouter,
    ctx,
  });
  const chatId = context.params?.chat as string;
  await helpers.chat.getOne.prefetch(chatId);
  return {
    props: {
      trpcState: helpers.dehydrate(),
      chatId,
    },
    revalidate: 1,
  };
}
export const getStaticPaths: GetStaticPaths = async () => {
  const chats = await prisma.chat.findMany({
    select: {
      id: true,
    },
  });
  return {
    paths: chats.map((chat) => ({
      params: {
        chat: chat.id,
      },
    })),
    fallback: "blocking",
  };
};

import { createServerSideHelpers } from "@trpc/react-query/server";
import {
  GetStaticPaths,
  GetStaticPropsContext,
  InferGetStaticPropsType,
} from "next";
import { appRouter } from "@/server/api/root";
import { prisma } from "@/server/db";

type ChatRouteQuery = {
  chat: string;
};

export async function getStaticProps(
  context: GetStaticPropsContext<{ chat: string }>
) {
  const helpers = createServerSideHelpers({
    router: appRouter,
    ctx,
  });
  const chatId = context.params?.chat as string;
  await helpers.chat.getOne.prefetch(chatId);
  return {
    props: {
      trpcState: helpers.dehydrate(),
      chatId,
    },
    revalidate: 1,
  };
}
export const getStaticPaths: GetStaticPaths = async () => {
  const chats = await prisma.chat.findMany({
    select: {
      id: true,
    },
  });
  return {
    paths: chats.map((chat) => ({
      params: {
        chat: chat.id,
      },
    })),
    fallback: "blocking",
  };
};

But, ctx is giving me ts errors.

No value exists in scope for the shorthand property ctx. Either declare one or provide an initializer.

No value exists in scope for the shorthand property ctx. Either declare one or provide an initializer.

And when I do ctx: {} I get this

Type '{}' is missing the following properties from type '{ session: Session | null; prisma: PrismaClient<PrismaClientOptions, never, RejectOnNotFound | RejectPerOperation | undefined>; }': session, prismats(2739)
types.d.ts(5, 5): The expected type comes from property 'ctx' which is declared here on type 'CreateSSGHelpersOptions<CreateRouterInner<RootConfig<{ ctx: { session: Session | null; prisma: PrismaClient<PrismaClientOptions, never, RejectOnNotFound | RejectPerOperation | undefined>; }; meta: object; errorShape: { ...; }; transformer: typeof SuperJSON; }>, { ...; }>>'

Type '{}' is missing the following properties from type '{ session: Session | null; prisma: PrismaClient<PrismaClientOptions, never, RejectOnNotFound | RejectPerOperation | undefined>; }': session, prismats(2739)
types.d.ts(5, 5): The expected type comes from property 'ctx' which is declared here on type 'CreateSSGHelpersOptions<CreateRouterInner<RootConfig<{ ctx: { session: Session | null; prisma: PrismaClient<PrismaClientOptions, never, RejectOnNotFound | RejectPerOperation | undefined>; }; meta: object; errorShape: { ...; }; transformer: typeof SuperJSON; }>, { ...; }>>'

Not sure why this error is not addressed in the docs.

78 replies

TTCTheo's Typesafe Cult

•Created by kenny on 4/17/2023 in #questions

Next-Auth: Try signing in with a different account.

So this error I am getting in the browser

Try signing in with a different account.

Try signing in with a different account.

This is very common. It usually doesn't tell me what's wrong. The first thing I do when I see this is check my environment variables. Checking if theyre correct. Which they are. I am using create-t3-app So it also checks that for me by default. I am added a Google Provider and when I click on sign in with google, It doesn't redirect me to the correct page. It instead brings me to the /api/auth/signin page with an error message. This is also happening, it redirects me to api/auth/signin?error=OAuthAccountNotLinked And I see this error

To confirm your identity, sign in with the same account you used originally.

To confirm your identity, sign in with the same account you used originally.

Any idea what's going on?

10 replies

TTCTheo's Typesafe Cult

•Created by kenny on 4/10/2023 in #questions

T3 app takes up too much RAM

when I start my app with npm run dev acces the nextjs app via localhost, and check the task manager, the windows powershell already takes up 300MB of RAM. I sign in using Discord provider, It takes up More! After that the just becomes unresponsive. And the terminal just goes crazyy. I could hop on a call and share my screen to show what I mean.

166 replies

Gaming

Programming