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
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
Index.ts
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>
)
