Closed laneme closed 5 months ago
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.
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
@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?
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
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.
Thank you for the awesome lib :)
So in your ssr example, you returned the query function from
page.ts
And then used used the returned function instead of
greeting.createQuery
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 itOne more question, my queries seem to refetch on mount regardless of what i set to
createServerQuery
orcreateQuery
, is this related to this adapter? Can you point me to where should i look to resolve this?