Max Posts - Answer Overflow

Max

Explore posts from servers

•Created by Max on 4/1/2024 in #❓-help

Confused by the many examples and docs of implementing trpc, next.js (app router), and clerk.

To show an examples of the many variants an implementations here is an example: In TRPC Docs: https://trpc.io/docs/v10/client/nextjs/ssr, I see they recommend using import { createTRPCNext } from '@trpc/next'; And this is for nextjs Page router.
In the T3-OS/create-t3-turbo https://github.com/t3-oss/create-t3-turbo/blob/main/apps/nextjs/src/trpc/react.tsx, which uses app router instead of page router, they are using import { createTRPCReact } from "@trpc/react-query"; The T3-OS seems to be the closest to what I want, but they don't use clerk. And The repo the reference for clerk auth is out of date.
Main Concern: I'm getting overwhelmed by so many variants of implementation. Many are out of date. Can't seem to find an up to date repo example of ssr and client side requests using. trpc v10, nextjs 14, clerk, and prisma.
Main Question: Anyone have an example repo of ssr and client side requests using. trpc v10, nextjs 14, clerk, and prisma.

18 replies

TTCTheo's Typesafe Cult

•Created by Max on 10/24/2023 in #questions

Render layout and page. Optimize data calls.

Using app router. Trying to Optimizing where data is called.
Page - Page works great, get my data on the server side and then render a "ClientView" component in the browser.
My Layout - renders on the client - has a general layout that needs to be client side rendered. - but has a List component inside of it that needs data. - So this will render in the browser then goes back to the server to get data and re-renders again. - Question: How can I grab "list data" server side optimally - Don't want to block page async get data - Don't want to block the rest of layout rendering. How does this look?
Do I create a server component for layout and pass that as props to layout? And use dynamic somehow:

import dynamic from "next/dynamic";

import dynamic from "next/dynamic";

Do I use the preload pattern inside of layout? https://nextjs.org/docs/app/building-your-application/data-fetching/patterns#preloading-data - not sure if this will block pages or the general client side part of my layout.

1 replies

TTCTheo's Typesafe Cult

•Created by Max on 10/20/2023 in #questions

trcp sub routes?

Dose anyone know how to create subrouters? for example with sudo code.

export const watchlistRouter = createTRPCRouter({
  createDefaultWatchListConfig,
  createWatchListConfig,
  getUserWatchListConfigsLists,
  getUserWatchListConfig,
  deleteWatchListConfig,

  StockChartContentItemRouter: {
    // sub routes here
  }
})

export const watchlistRouter = createTRPCRouter({
  createDefaultWatchListConfig,
  createWatchListConfig,
  getUserWatchListConfigsLists,
  getUserWatchListConfig,
  deleteWatchListConfig,

  StockChartContentItemRouter: {
    // sub routes here
  }
})

3 replies

TTCTheo's Typesafe Cult

•Created by Max on 9/18/2023 in #questions

anyone else think app directory is not worth?

Seems like app just breaks a lot of things in the t3 stack. Seems little community support. Just doesn't seem worth the time to try and debug and rewrite a ton of code for the same results.
Are most of yall still using the pages directory?

21 replies

TTCTheo's Typesafe Cult

•Created by Max on 9/18/2023 in #questions

nextjs 13.4 app, converting _app and _document to layout.

How would I go about changing my _app to work with the root layout in my app directory? _app.tsx

import "~/styles/globals.css";

import { ClerkProvider } from "@clerk/nextjs";
import CssBaseline from "@mui/material/CssBaseline";
import { CacheProvider, EmotionCache } from "@emotion/react";
import createEmotionCache from "../utils/createEmotionCache";

import { ThemeProvider } from "@mui/material/styles";
import { type AppProps, type AppType } from "next/app";
import * as React from "react";
import { api } from "~/utils/api";
import Script from "next/script";

import { DrawerProvider } from "~/context/drawerContext";

const clientSideEmotionCache = createEmotionCache();

interface MyAppProps extends AppProps {
  emotionCache?: EmotionCache;
}
import ThemeContext, {
  ThemeProvider as ThemeProviderInternal,
} from "~/context/themeContext";
import { themeLight, themeDark } from "~/utils/theme/index";

const Providers = (props: MyAppProps) => {
  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
  return (
    <CacheProvider value={emotionCache}>
      <Script type="text/javascript" src="https://s3.tradingview.com/tv.js" />
      <ThemeProviderInternal>
        <ThemeContext.Consumer>
          {({ theme }) => (
            <>
              <ThemeProvider theme={theme == "light" ? themeLight : themeDark}>
                <CssBaseline />
                <DrawerProvider>
                  <ClerkProvider {...pageProps}>
                    <Component {...pageProps} />
                  </ClerkProvider>
                </DrawerProvider>
              </ThemeProvider>
            </>
          )}
        </ThemeContext.Consumer>
      </ThemeProviderInternal>
    </CacheProvider>
  );
};

export default api.withTRPC(Providers);

import "~/styles/globals.css";

import { ClerkProvider } from "@clerk/nextjs";
import CssBaseline from "@mui/material/CssBaseline";
import { CacheProvider, EmotionCache } from "@emotion/react";
import createEmotionCache from "../utils/createEmotionCache";

import { ThemeProvider } from "@mui/material/styles";
import { type AppProps, type AppType } from "next/app";
import * as React from "react";
import { api } from "~/utils/api";
import Script from "next/script";

import { DrawerProvider } from "~/context/drawerContext";

const clientSideEmotionCache = createEmotionCache();

interface MyAppProps extends AppProps {
  emotionCache?: EmotionCache;
}
import ThemeContext, {
  ThemeProvider as ThemeProviderInternal,
} from "~/context/themeContext";
import { themeLight, themeDark } from "~/utils/theme/index";

const Providers = (props: MyAppProps) => {
  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
  return (
    <CacheProvider value={emotionCache}>
      <Script type="text/javascript" src="https://s3.tradingview.com/tv.js" />
      <ThemeProviderInternal>
        <ThemeContext.Consumer>
          {({ theme }) => (
            <>
              <ThemeProvider theme={theme == "light" ? themeLight : themeDark}>
                <CssBaseline />
                <DrawerProvider>
                  <ClerkProvider {...pageProps}>
                    <Component {...pageProps} />
                  </ClerkProvider>
                </DrawerProvider>
              </ThemeProvider>
            </>
          )}
        </ThemeContext.Consumer>
      </ThemeProviderInternal>
    </CacheProvider>
  );
};

export default api.withTRPC(Providers);

3 replies

TTCTheo's Typesafe Cult

•Created by Max on 9/10/2023 in #questions

zustand + next trpc/client. With slightly more complex feature. Vanilla client?

The problem i'm having is that trpc are hooks and not async functions that i can call in my zustand slice. And handle the logic in one place to keep thing less convoluted. My feature is tracking crud operations on lists and items in a list. Tracking which item and list is selected. And voiding the top level get call for this data to make sure the data is up to date. As other users can have access to shared lists. I see useContext, that changes it into a async function with the added fetch method. Should I use the vanilla client for this?

6 replies

TTCTheo's Typesafe Cult

•Created by Max on 7/17/2023 in #questions

t3 stack with a node/typescript/module example?

Trying add a node service that is typed but when i import import { prisma } from "@acme/db"; say that package can't import env.mjs. anyone have an example of this working?

4 replies

TTCTheo's Typesafe Cult

•Created by Max on 7/16/2023 in #questions

planet scale cost confusion.

I'm new to wanting to work with big data, and I don't have a huge budget. Ideally $100 or less...hoping for someone with experience can advise here. - I want to use prisma with mySQL on planet scale but I plan on storing 2+ terabytes of data. - I see that is says $2.50 per extra GB which seems expensive? $2,500 = 1000gb - While AWS General Purpose SSD is about 0.23 USD per gb = $230 = 1000gb Questions: - Wondering if I'm missing something here on pricing and it's cheaper? - Other hosting cheaper options? - Host db on a spare computer with external hard drive?

3 replies

TTCTheo's Typesafe Cult

•Created by Max on 7/13/2023 in #questions

t3 turbo firebase functions

So I converted my t3 app to t3 turbo using this https://github.com/t3-oss/create-t3-turbo as my base. Everything is working great. Now I'm trying to add firsbase functions. via the fire base cli firebase init functions. But after i install and run the basic command "serve": "pnpm run build && firebase emulators:start --only functions", I get about 63 errors that say something like this ../../node_modules/@types/react-native/globals.d.ts:337:15 - error TS2300: Duplicate identifier 'URLSearchParams'. which isn't being used.
Anyone have experience adding firebase functions to t3 turbo app?

5 replies

TTCTheo's Typesafe Cult

•Created by Max on 7/11/2023 in #questions

t3 turbo boilerplate for existing t3 app: next.js, clerk, trpc, prisma...

Looking for a boiler plate code base to convert my t3 app that uses clerk into a turbo mono repo. I want t add other apps such as a fire base cron jobs.
Or a good tutorial on how I can do this on my own.
I saw this one https://github.com/clerkinc/t3-turbo-and-clerk. But doesn't seem active? is this the best option right now?

3 replies

TTCTheo's Typesafe Cult

•Created by Max on 7/10/2023 in #questions

how do I get the types from data off of a use query???

const { data, isLoading: isGetListDataLoading } = api.list.getLists.useQuery() im using this code in a context provider and I want to pass this data down but I can't cause typescript.

5 replies

TTCTheo's Typesafe Cult

•Created by Max on 12/22/2022 in #questions

electron

I decided to build a mono repo with a desktop app built in nextron (electron + next.js). Found that nextAuth TwitchProvider doesn't work in chromium browser. Twitch website is not compatable with nextAuth TwitchProvider. Is there anyway around this? Or do I need to say goodbye to nextAuth

1 replies

TTCTheo's Typesafe Cult

•Created by Max on 12/19/2022 in #questions

Multiple nextjst apps mono repo

Does it make sense to have 3 nextjs repos with t3 apps/... blog-site marketing-site api And then share the api between blog-site and marketing-site?

4 replies

TTCTheo's Typesafe Cult

•Created by Max on 12/19/2022 in #questions

mono repo with multiple next.js apps sharing one nextjs api example?

Does anyone have an example of a mono repo, one app with the t3 stack, another with nextron?
Currently: apps/nextron app/full-stack.
full-stack has all t3 boiler plate, but I would like to reuse the same trpc, prisma, nextjs api code for both apps. Just trying to figure out a good way to approach this.

12 replies

Gaming

Programming