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

Continue the conversation

Join the Discord to ask follow-up questions and connect with the community

tRPC

Move Fast & Break Nothing. End-to-end typesafe APIs made easy.

4,951 Members

Join

Why not create queryClient and trpcClient outside of React?

Why not create queryClient and trpcClient outside of React?

Continue the conversation

tRPC

Continue the conversation

tRPC

Similar Threads