rovrav Posts - Answer Overflow

rovrav

Explore posts from servers

PD🧩 Plasmo Developers TTCTheo's Typesafe Cult

Posts Comments

TTCTheo's Typesafe Cult

•Created by rovrav on 9/12/2023 in #questions

Use trpc on nextJS api route?

Is there a way that you can use trpc on a nextJS api route?

7 replies

TTCTheo's Typesafe Cult

•Created by rovrav on 9/8/2023 in #questions

NODE_ENV exposed to the client? Is that okay?

I'm getting ready to test a live app using the t3 stack but basically I want my api routes to switch between localhost for dev and the actual url for live testing. the env.mjs puts the NODE_ENV as a server variable and I'm not sure why that is the case below is the code that I'm referring to

import { z } from "zod";
import { createEnv } from "@t3-oss/env-nextjs";

export const env = createEnv({
  /**
   * Specify your server-side environment variables schema here. This way you can ensure the app
   * isn't built with invalid env vars.
   */
  server: {
    DATABASE_URL: z.string().url(),
    DIFF_BOT: z.string(),
    OPEN_AI: z.string(),
    NODE_ENV: z.enum(["development", "test", "production"]),
    STRIPE_SECRET_KEY: z.string(),
    STRIPE_WEBHOOK_SECRET: z.string(),
    SUPABASE_SECRET_KEY: z.string(),
    RESEND_KEY: z.string(),
  },

  /**
   * Specify your client-side environment variables schema here. This way you can ensure the app
   * isn't built with invalid env vars. To expose them to the client, prefix them with
   * `NEXT_PUBLIC_`.
   */
  client: {
    NEXT_PUBLIC_SUPABASE_URL: z.string().min(1),
    NEXT_PUBLIC_ANON_KEY: z.string().min(1),
    NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: z.string(),
    NEXT_PUBLIC_PROD_URL: z.string(),
  },

  /**
   * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
   * middlewares) or client-side so we need to destruct manually.
   */
  runtimeEnv: {
    DATABASE_URL: process.env.DATABASE_URL,
    NODE_ENV: process.env.NODE_ENV,
    NEXT_PUBLIC_SUPABASE_URL: process.env.NEXT_PUBLIC_SUPABASE_URL,
    NEXT_PUBLIC_ANON_KEY: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
    DIFF_BOT: process.env.DIFF_BOT,
    OPEN_AI: process.env.OPEN_AI,
    NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY:
      process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,
    STRIPE_SECRET_KEY: process.env.STRIPE_SECRET_KEY,
    STRIPE_WEBHOOK_SECRET: process.env.STRIPE_WEBHOOK_SECRET,
    SUPABASE_SECRET_KEY: process.env.SUPABASE_SECRET_KEY,
    NEXT_PUBLIC_PROD_URL: process.env.NEXT_PUBLIC_PROD_URL,
    RESEND_KEY: process.env.RESEND_KEY,
  },
});

import { z } from "zod";
import { createEnv } from "@t3-oss/env-nextjs";

export const env = createEnv({
  /**
   * Specify your server-side environment variables schema here. This way you can ensure the app
   * isn't built with invalid env vars.
   */
  server: {
    DATABASE_URL: z.string().url(),
    DIFF_BOT: z.string(),
    OPEN_AI: z.string(),
    NODE_ENV: z.enum(["development", "test", "production"]),
    STRIPE_SECRET_KEY: z.string(),
    STRIPE_WEBHOOK_SECRET: z.string(),
    SUPABASE_SECRET_KEY: z.string(),
    RESEND_KEY: z.string(),
  },

  /**
   * Specify your client-side environment variables schema here. This way you can ensure the app
   * isn't built with invalid env vars. To expose them to the client, prefix them with
   * `NEXT_PUBLIC_`.
   */
  client: {
    NEXT_PUBLIC_SUPABASE_URL: z.string().min(1),
    NEXT_PUBLIC_ANON_KEY: z.string().min(1),
    NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: z.string(),
    NEXT_PUBLIC_PROD_URL: z.string(),
  },

  /**
   * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
   * middlewares) or client-side so we need to destruct manually.
   */
  runtimeEnv: {
    DATABASE_URL: process.env.DATABASE_URL,
    NODE_ENV: process.env.NODE_ENV,
    NEXT_PUBLIC_SUPABASE_URL: process.env.NEXT_PUBLIC_SUPABASE_URL,
    NEXT_PUBLIC_ANON_KEY: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
    DIFF_BOT: process.env.DIFF_BOT,
    OPEN_AI: process.env.OPEN_AI,
    NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY:
      process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,
    STRIPE_SECRET_KEY: process.env.STRIPE_SECRET_KEY,
    STRIPE_WEBHOOK_SECRET: process.env.STRIPE_WEBHOOK_SECRET,
    SUPABASE_SECRET_KEY: process.env.SUPABASE_SECRET_KEY,
    NEXT_PUBLIC_PROD_URL: process.env.NEXT_PUBLIC_PROD_URL,
    RESEND_KEY: process.env.RESEND_KEY,
  },
});

If I just make NODE_ENV public will I cause any problems?

18 replies

TTCTheo's Typesafe Cult

•Created by rovrav on 8/24/2023 in #questions

Error Management / Error Tracking tools/service for T3?

I’m working on a SaaS app and am not familiar with the space of error tracking, error handling tools. Is there any that you would recommend?

2 replies

TTCTheo's Typesafe Cult

•Created by rovrav on 7/2/2023 in #questions

Easy way to add rate limiter into t3 stack / trpc?

Is there any recommended way to add a rate limiter into a t3 stack project / trpc?

10 replies

TTCTheo's Typesafe Cult

•Created by rovrav on 5/29/2023 in #questions

useInfiniteQueryBug - queries to the end of page

I set up infinite scroll using the infinite query function in trpc. I have this bug right when the page loads, if you scroll super quick enough to the bottom of the webpage it'll cause a continuous retrigger until it's gone through the entire db. It seems like it's a race condition but I don't know the source of it. Below is my route

import { z } from "zod";

import { createTRPCRouter, protectedProcedure } from "../trpc";

export const historyItemsRouter2 = createTRPCRouter({
  infinitePosts: protectedProcedure
    .input(
      z.object({
        limit: z.number().min(1).max(100).nullish(),
        cursor: z.string().nullish(), // <-- "cursor" needs to exist, but can be any type
      })
    )
    .query(async ({ input, ctx }) => {
      // const { limit, cursor } = input;
      const { cursor } = input;
      const limit = input.limit ?? 50;
      const items = await ctx.prisma.historyItems.findMany({
        take: limit + 1, // get an extra item at the end which we'll use as next cursor
        cursor: cursor ? { id: cursor } : undefined, // assuming 'id' is the cursor field
        orderBy: {
          id: "asc", // assuming 'id' is the cursor field
        },
        where: {
          user_id: ctx.user.id,
        },
      });

      let nextCursor: typeof cursor | undefined = undefined;
      if (items.length > limit) {
        const nextItem = items.pop();
        nextCursor = nextItem?.id; // assuming 'id' is the cursor field
      }

      return {
        items,
        nextCursor,
      };
    }),
});

import { z } from "zod";

import { createTRPCRouter, protectedProcedure } from "../trpc";

export const historyItemsRouter2 = createTRPCRouter({
  infinitePosts: protectedProcedure
    .input(
      z.object({
        limit: z.number().min(1).max(100).nullish(),
        cursor: z.string().nullish(), // <-- "cursor" needs to exist, but can be any type
      })
    )
    .query(async ({ input, ctx }) => {
      // const { limit, cursor } = input;
      const { cursor } = input;
      const limit = input.limit ?? 50;
      const items = await ctx.prisma.historyItems.findMany({
        take: limit + 1, // get an extra item at the end which we'll use as next cursor
        cursor: cursor ? { id: cursor } : undefined, // assuming 'id' is the cursor field
        orderBy: {
          id: "asc", // assuming 'id' is the cursor field
        },
        where: {
          user_id: ctx.user.id,
        },
      });

      let nextCursor: typeof cursor | undefined = undefined;
      if (items.length > limit) {
        const nextItem = items.pop();
        nextCursor = nextItem?.id; // assuming 'id' is the cursor field
      }

      return {
        items,
        nextCursor,
      };
    }),
});

Here is the react code

import { useSupabaseClient, useUser } from "@supabase/auth-helpers-react";
import { type NextPage } from "next";
import Head from "next/head";
import { api, type RouterOutputs } from "~/utils/api";
// import { Header } from "~/components/Header";
import React, { useState, useRef, useCallback, useEffect } from "react";
import InfiniteScroll from "react-infinite-scroll-component";
// import Image from "next/image";
import useIntersectionObserver from "../hooks/IntersectionObserver";

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "../components/ui/table";

// there's an error of too many queries taking it to the end of the page out of nowhere
const Content: React.FC = () => {
  const user = useUser();

  const { data, fetchNextPage, isFetchingNextPage, hasNextPage } =
    api.historyItemsV2.infinitePosts.useInfiniteQuery(
      {
        limit: 100,
      },
      {
        getNextPageParam: (lastPage) => lastPage.nextCursor,
      }
    );

  const handleFetchNextPage = () => {
    if (
      document.documentElement.scrollHeight <=
      document.documentElement.clientHeight
    ) {
      return;
    }

    if (hasNextPage && !isFetchingNextPage) {
      void fetchNextPage();
    }
  };

  const dataLength =
    data?.pages.reduce((acc, page) => acc + page.items.length, 0) || 0;
  const toShow = data?.pages.flatMap((page) => page.items) || [];

  return (
    <div>
      <h1>History Items:</h1>
      <InfiniteScroll
        dataLength={dataLength}
        next={handleFetchNextPage}
        hasMore={!!hasNextPage}
        loader={<h4>Loading...</h4>}
        endMessage={
          <p style={{ textAlign: "center" }}>
            <b>Yay! You have seen it all</b>
          </p>
        }
        scrollThreshold={0.75}
      >
        // table component goes here
      </InfiniteScroll>
    </div>
  );
};

export default Content;

import { useSupabaseClient, useUser } from "@supabase/auth-helpers-react";
import { type NextPage } from "next";
import Head from "next/head";
import { api, type RouterOutputs } from "~/utils/api";
// import { Header } from "~/components/Header";
import React, { useState, useRef, useCallback, useEffect } from "react";
import InfiniteScroll from "react-infinite-scroll-component";
// import Image from "next/image";
import useIntersectionObserver from "../hooks/IntersectionObserver";

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "../components/ui/table";

// there's an error of too many queries taking it to the end of the page out of nowhere
const Content: React.FC = () => {
  const user = useUser();

  const { data, fetchNextPage, isFetchingNextPage, hasNextPage } =
    api.historyItemsV2.infinitePosts.useInfiniteQuery(
      {
        limit: 100,
      },
      {
        getNextPageParam: (lastPage) => lastPage.nextCursor,
      }
    );

  const handleFetchNextPage = () => {
    if (
      document.documentElement.scrollHeight <=
      document.documentElement.clientHeight
    ) {
      return;
    }

    if (hasNextPage && !isFetchingNextPage) {
      void fetchNextPage();
    }
  };

  const dataLength =
    data?.pages.reduce((acc, page) => acc + page.items.length, 0) || 0;
  const toShow = data?.pages.flatMap((page) => page.items) || [];

  return (
    <div>
      <h1>History Items:</h1>
      <InfiniteScroll
        dataLength={dataLength}
        next={handleFetchNextPage}
        hasMore={!!hasNextPage}
        loader={<h4>Loading...</h4>}
        endMessage={
          <p style={{ textAlign: "center" }}>
            <b>Yay! You have seen it all</b>
          </p>
        }
        scrollThreshold={0.75}
      >
        // table component goes here
      </InfiniteScroll>
    </div>
  );
};

export default Content;

Any ideas what could be causing the problem?

2 replies

TTCTheo's Typesafe Cult

•Created by rovrav on 10/18/2022 in #questions

Pointing to object in array giving me an undefined error in console.log

5 replies

Gaming

Programming