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