Async TRPC query with ssr

hi;
I've got 2 trpc queries on a solid page

This is actually the first time for me working with the ssr of solid, so I'm not too sure when it's server rendering and when it isnt - but the same queries work when I disable ssr globally.

One query is async, that one doesnt render, one isn't async, that one renders.

const customers = trpc.craftboxx.allCustomers.useQuery()
const hello = trpc.example.hello.useQuery(() => ({ name: "from tRPC" }))

const customers = trpc.craftboxx.allCustomers.useQuery()
const hello = trpc.example.hello.useQuery(() => ({ name: "from tRPC" }))

const customers = trpc.craftboxx.allCustomers.useQuery()
const hello = trpc.example.hello.useQuery(() => ({ name: "from tRPC" }))

const customers = trpc.craftboxx.allCustomers.useQuery()
const hello = trpc.example.hello.useQuery(() => ({ name: "from tRPC" }))

<p>Query 1: Not Async</p>
{hello.data ?? "Loading tRPC query"} 
                    
<p>Query 2: Async</p>
{customers.data?.[0]?.name ?? "Loading tRPC query"}

<p>Query 1: Not Async</p>
{hello.data ?? "Loading tRPC query"} 
                    
<p>Query 2: Async</p>
{customers.data?.[0]?.name ?? "Loading tRPC query"}

<p>Query 1: Not Async</p>
{hello.data ?? "Loading tRPC query"} 
                    
<p>Query 2: Async</p>
{customers.data?.[0]?.name ?? "Loading tRPC query"}

<p>Query 1: Not Async</p>
{hello.data ?? "Loading tRPC query"} 
                    
<p>Query 2: Async</p>
{customers.data?.[0]?.name ?? "Loading tRPC query"}

As soon as the page reloads due to me saving the file, the query loads fine.

Not sure how to fix/debug this or even learn more about all of this, so I'd be super grateful if you have some pointers for me!

Async TRPC query with ssr

Similar Threads

Similar Threads

Similar Threads