Why not create queryClient and trpcClient outside of React?

From the docs: https://trpc.io/docs/client/react/setup#4-add-trpc-providers

Relevant excerpt:

export function App() {
  const [queryClient] = useState(() => new QueryClient())
  const [trpcClient] = useState(() =>
    trpc.createClient({ /* ... */ }),
  )

  // ...

export function App() {
  const [queryClient] = useState(() => new QueryClient())
  const [trpcClient] = useState(() =>
    trpc.createClient({ /* ... */ }),
  )

  // ...

What are the downsides to moving these two clients outside the component? Does it break hot reloading or something?
E.g.

const queryClient = new QueryClient()
const trpcClient = trpc.createClient({ /* ... */ })

export function App() {
  // ...

const queryClient = new QueryClient()
const trpcClient = trpc.createClient({ /* ... */ })

export function App() {
  // ...

Solution

I'm so goddamn stupid, i literally asked the same question this June already: No Access
And also they even explain this in the docs below the code snippet... I AM INCAPABLE OF READING

Jump to solution

tRPC•2y ago•

3 replies

functiondj

Why not create queryClient and trpcClient outside of React?

From the docs: https://trpc.io/docs/client/react/setup#4-add-trpc-providers

Relevant excerpt:

export function App() {
  const [queryClient] = useState(() => new QueryClient())
  const [trpcClient] = useState(() =>
    trpc.createClient({ /* ... */ }),
  )

  // ...

export function App() {
  const [queryClient] = useState(() => new QueryClient())
  const [trpcClient] = useState(() =>
    trpc.createClient({ /* ... */ }),
  )

  // ...

What are the downsides to moving these two clients outside the component? Does it break hot reloading or something?
E.g.

const queryClient = new QueryClient()
const trpcClient = trpc.createClient({ /* ... */ })

export function App() {
  // ...

const queryClient = new QueryClient()
const trpcClient = trpc.createClient({ /* ... */ })

export function App() {
  // ...

Solution

I'm so goddamn stupid, i literally asked the same question this June already: No Access
And also they even explain this in the docs below the code snippet... I AM INCAPABLE OF READING

Jump to solution

Why not create queryClient and trpcClient outside of React?

Similar Threads

Why not create queryClient and trpcClient outside of React?

Similar Threads

Similar Threads

Similar Threads