[Q/A] I realized I do not have to use the query fn returned from layout/page.ts for ssr?

[laneme]

Thank you for the awesome lib :)

So in your ssr example, you returned the query function from page.ts

// page.ts->load()
return {
    foo: await client.greeting.createServerQuery('foo')
}

And then used used the returned function instead of greeting.createQuery

  export let data: PageData;

  const foo = data.foo();

I realized once i called createServerQuery inside layout load, my createQuery was doing ssr fine. So is there a reason you did this the way you did it

client.greeting.createQuery('foo')

One more question, my queries seem to refetch on mount regardless of what i set to createServerQuery or createQuery, is this related to this adapter? Can you point me to where should i look to resolve this?

refetchOnMount: false,
refetchOnReconnect: false,
refetchOnWindowFocus: false,
staleTime: Infinity,
enabled: false,

[vishalbalaji]

Hi @laneme, glad you found this library useful!

Basically, for SSR to happen for a query, the query should either receive explicit initialData or the data could be prefetched on the server using the query client. The createServer(*) functions are essentially just wrappers that call queryClient.prefetch for a query with the given input to populate the query client's cache and returns a query created with those parameters.

In SvelteKit, this is the order of execution:
+layout.ts (server) -> +page.ts (server) -> +page.svelte (client)

So, queryClient.prefetch was called on the server in your layout load and the cache was populated. These methods return the created query as a measure of convenience, but technically you are free to call createQuery again in your .svelte files again and the cache will still be populated.

As for the re-retching on mount issue, I was not able to re-create this issue on my end. If you are just using createQuery and set enabled to false, then the query should not fetch any data until you explicitly enable it. Are you also calling createServerQuery alongside your createQuery? A little more clarification regarding your setup here, if possible a reproduction on codesandbox or stackblitz will really help me diagnose the issue.

[laneme]

Thank you for willing to take a look and the nice explanation, which i understood.

I set up a repo for you https://github.com/laneme/trpc-svelte-adapter-sample. May contain few junk but you can start here apps/web/src/routes

pnpm i
pnpm dev

Visit http://localhost:4500. Or if you prefer stackblitz (takes forever)

Even though i have refetchOnMount: false on both createServerQuery and createQuery, it still makes one request. Which i suppose comes from the createServerQuery

[vishalbalaji]

@laneme Just from looking at the code, it seems that this is working as it should be.

createServerQuery by default, will always fetch the data once on the server. If it is disabled and it does not fetch the data on the server, then isn't it just a regular client-side query?

Does this happen if you comment out the createServerQuery and have enabled as false on the client query?

[laneme]

No, if I comment out the createServerQuery, and enabled: false to the client query doesnt fetch anything. Which is correct.

But, enabled: false to both server/client queries (without commenting out) does not stop it from fetching on the browser. The below code should not fetch on the browser at all if my understanding is correct. But it does :/

// +layout.ts
await trpc(queryClient).greet.createServerQuery(undefined, {
    refetchOnMount: false,
})

// +page.svelte
const query = trpc().greet.createQuery(undefined, {
    refetchOnMount: false,
    enabled: false,
})

So this code above makes total of 2 requests, once on the server, once on the browser. What could i be missing here

[vishalbalaji]

Hi @laneme, sorry for the super delayed response, been a little busy with work over the past couple of weeks.

I looked at your demo and was not able to re-create it on my end, when using trpc-sveltekit. However, I noticed that this duplicate request was happening even if I imported the trpc proxy client directly into +layout/+page.ts and called the query there like so:

await proxyClient.greet.query();

I have updated your stackblitz demo with the same, hope you don't mind that I edited it.

This indicates that there might be some issue with the way that you have setup tRPC in your project and therefore not related to this library. I am closing this issue now, but will continue to look into this and let you know if I am able to figure out why this might be happening.