test_1 Posts - Answer Overflow

test_1

Explore posts from servers

KPCKevin Powell - Community TtRPC TTCTheo's Typesafe Cult DTDrizzle Team

Posts Comments

TTCTheo's Typesafe Cult

•Created by test_1 on 9/21/2024 in #questions

Created a fresh new T3 app and I get a warning in browser's console:

5 replies

TTCTheo's Typesafe Cult

•Created by test_1 on 6/24/2023 in #questions

whats the url of deployed socket.io server

i have a nodejs socket.io server idk the url to my websocket server in nodejs I do const io = new Server(1001, { cors: { origin: ["https://deployedclient.vercel.app", "http://localhost:3000"] } }) and client knows that the websocket is hosted on localhost:1001 but in deployed server, the domain of the server would be something like deployedserver.com but client cant connect to deployedserver.com:1001

9 replies

TTCTheo's Typesafe Cult

•Created by test_1 on 6/23/2023 in #questions

socket.io + tRPC

I have a socket.io backend with nodejs/express, and a frontend with react. I have a list of posts that users can delete. Everytime a user deletes a post, it will send a websocket broadcast to all the other users so it will delete that post from everyone else's screen as well. My question is how should I implement this? Here is a few options I've considered: option 1. Instead of using normal trpc routes, when the user presses delete the frontend will send a websocket, and in the websocket on the server it will delete the post, and if its successful then it will broadcast to everyone else, entirely skipping the need for an API delete fetch. option 2: The frontend will send a fetch delete to the API, and if its successful then the frontend will then send a websocket which will broadcast to everyone else (there seems to be extra steps here) option 3: The frontend will send a fetch delete to the API, and if its successful then the backend will send a websocket broadcast to everyone else ( I don't know if its possible to do this because socket.io websockets are inside their own "io.on" function and seperate from the trpc routes. )

4 replies

TTCTheo's Typesafe Cult

•Created by test_1 on 6/18/2023 in #questions

If I make a cross platform website/app with nextJS + react native, how does the backend work?

i havent used nextJS before so its a gray area for me , will my react-native app share the same backend of my nextJS website or will i have seperate backend that both can share?

16 replies

TTCTheo's Typesafe Cult

•Created by test_1 on 6/18/2023 in #questions

when i deploy frontend trpc fails to compile

6 replies

TTCTheo's Typesafe Cult

•Created by test_1 on 6/18/2023 in #questions

how to rate limit in trpc express/nodejs server (not nextjs)

7 replies

TTCTheo's Typesafe Cult

•Created by test_1 on 6/16/2023 in #questions

i want to display amount of comments a post has before fetching all the comments

6 replies

TTCTheo's Typesafe Cult

•Created by test_1 on 6/14/2023 in #questions

help with basic ts error

5 replies

TTCTheo's Typesafe Cult

•Created by test_1 on 6/13/2023 in #questions

Do any of you use .output in trpc procedures to validate server's returned data?

just curious. no follow up questions

2 replies

TTCTheo's Typesafe Cult

•Created by test_1 on 6/13/2023 in #questions

Can I create a website + native app that uses the same frontend code?

I hear a lot about react native and sharing codebase or something but I never understand the phrasing Is it possible to have a website + app that use the same frontend code or do I always need 2 separate, because last time I tried react-native I saw that it doesnt use CSS and HTML , and I can't worry about responsiveness on screens that arent mobile

8 replies

TTCTheo's Typesafe Cult

•Created by test_1 on 6/13/2023 in #questions

How to access trpcClient like in react-query: queryClient.fetchQuery ?

In react-query, the queryClient is exported and I can use it in certain situations like so const posts = await queryClient.fetchQuery( ... but with tRPC boilerplate code, I don't have access to the client and I can't emulate the behavior above. Btw I am not using Next.JS, i am using normal react frontend . Here is my boilerplate (feel free to give suggestions): TrpcProvider.tsx

import { useState } from 'react'
import type { AppRouter } from '../../server'
import { createTRPCReact } from '@trpc/react-query'
import { httpBatchLink } from '@trpc/client'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server"
import { BASE_URL } from '.'

export const trpc = createTRPCReact<AppRouter>()
export type RouterInputs = inferRouterInputs<AppRouter>
export type RouterOutputs = inferRouterOutputs<AppRouter>

export const TrpcProvider = ({ children }: any) => {
    const [queryClient] = useState(() => new QueryClient())
    const [trpcClient] = useState(() => {
        return trpc.createClient({
            links: [
                httpBatchLink({
                    url: BASE_URL + "/trpc",
                }),
            ],
        })
    })

    return (
        <trpc.Provider client={trpcClient} queryClient={queryClient}>
            <QueryClientProvider client={queryClient}>
                {children}
            </QueryClientProvider>
        </trpc.Provider>
    )
}

import { useState } from 'react'
import type { AppRouter } from '../../server'
import { createTRPCReact } from '@trpc/react-query'
import { httpBatchLink } from '@trpc/client'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server"
import { BASE_URL } from '.'

export const trpc = createTRPCReact<AppRouter>()
export type RouterInputs = inferRouterInputs<AppRouter>
export type RouterOutputs = inferRouterOutputs<AppRouter>

export const TrpcProvider = ({ children }: any) => {
    const [queryClient] = useState(() => new QueryClient())
    const [trpcClient] = useState(() => {
        return trpc.createClient({
            links: [
                httpBatchLink({
                    url: BASE_URL + "/trpc",
                }),
            ],
        })
    })

    return (
        <trpc.Provider client={trpcClient} queryClient={queryClient}>
            <QueryClientProvider client={queryClient}>
                {children}
            </QueryClientProvider>
        </trpc.Provider>
    )
}

Index.ts

import ReactDOM from 'react-dom/client'
import './index.css'
import { App } from './App'
import { TrpcProvider } from './TrpcProvider'


export const BASE_URL = window.location.hostname.includes("localhost") ? "http://localhost:3001" : "https://deployed.com"


ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
    <TrpcProvider>
        <App />
    </TrpcProvider>
)

import ReactDOM from 'react-dom/client'
import './index.css'
import { App } from './App'
import { TrpcProvider } from './TrpcProvider'


export const BASE_URL = window.location.hostname.includes("localhost") ? "http://localhost:3001" : "https://deployed.com"


ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
    <TrpcProvider>
        <App />
    </TrpcProvider>
)

2 replies

TTCTheo's Typesafe Cult

•Created by test_1 on 6/10/2023 in #questions

how to handle tRPC errors with mutationAsync on my react frontend?

6 replies

TTCTheo's Typesafe Cult

•Created by test_1 on 6/9/2023 in #questions

How do I pass down the inferred type returned from tRPC data via react props?

5 replies

TTCTheo's Typesafe Cult

•Created by test_1 on 5/28/2023 in #questions

should I use react-query or tanstack-query?

im not on a framework yet like nextjs or t3, but i will be learning those in the future which library should i use to replace my vanilla useEffect fetching in a react project? note, I want to learn tRPC/t3 stack in the future, so ideally the library which will prepare me more towards these will be good

9 replies

TTCTheo's Typesafe Cult

•Created by test_1 on 1/3/2023 in #questions

instagram-reddit type app with socket io

so i am making an instagram/reddit type app where its just a bunch of posts and likes/dislikes/comments I want to implement web sockets so that you can see the likes and dislikes for every post updating live instead of having to refresh page so one way i can do that is when each time a person likes/dislikes then the server will emit to all the other clients and update their data but this isn't efficient because I imagine a big app like instagram has thousands of likes and dislikes per minute and the person loading the data isnt actually loading all the posts that exist so how do i only emit for the posts that the person is currently viewing so that his client only updates the likes/dislikes for them and not every post that exists?

4 replies

Gaming

Programming