Theo's Typesafe Cult•13mo ago

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>
)

1 Reply

rocawear•13mo ago

import { trpc } from "@/utils/trpc"; const utils = trpc.useContext()

Gaming

Programming

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