Max
Max
Explore posts from servers
TtRPCTTCTheo's Typesafe Cult
PostsComments
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