Closed smaven closed 3 months ago
@smaven Great catch! This is something I realized about a month ago, but I have been a bit busy with work lately and haven't been able to work on this lib all that much. Expect this to be fixed in the update.
Hi @smaven, thank you for opening this issue! This feature has been pushed and is available from v2.3.0
onward.
@vishalbalaji, I tried out the feature and I feel one thing is missing in the implementation. Currently, the query only re-runs if the input changes to a truthy value. I think the query should re-run whenever the input changes, no matter what its value is. Consider the following:
<!-- +page.svelte -->
<script lang="ts">
import type { PageData } from './$types';
export let data: PageData;
let filter: string | null = 'foo';
let switch = true;
// input is `undefined` when no filter has been set. Query should still re-run.
$: users = data.users(filter ? { name: filter } : undefined);
// input is changed to `false`. Query should still re-run.
$: status = data.status(switch)
</script>
<input type="text" bind:value={filter} placeholder="Filter users" />
<input type="checkbox" bind:checked={switch} />
...
The assumption is that the tRPC procedures can be configured to run with any input and the query should always re-run whenever the input changes even if the value is falsy.
Thanks for implementing this feature BTW! 🙌
@smaven Thanks for pointing this out! Fix has been pushed in v2.3.1
.
@vishalbalaji I've noticed another issue:
createServerQuery
and its inputs change.Expected behaviour: The query should respect the stale time and make a network request if data is stale.
It works fine if I do a client-side navigation to a different page and then back to the page with the query. But does not work when the page first loads.
Hey @smaven, sorry for the late reply, have been a bit busy this past week.
I looked into this issue and its mainly happening because I am disabling refetchOnMount
by default for the server query functions to prevent them re-running on the client.
So for now, if you are using staleTime
, make sure to also set refetchOnMount
to true
for that query.
Let's say I'm using
createServerQuery
to prefetch a list of users on the server and pass the query to the client:I can use the query result to display content accordingly:
Now I want to filter the list of users as someone types in an input field. This requires me to send an input to the query. My guess was I would be able to pass the input to
data.users()
just like I can pass the input totrpc($page).user.all.createQuery(input)
but this does not work and I could not find an example to achieve this.I might be missing something really obvious here as this seems to me like a very common use case: fetching data on the server, passing it to the client so that the client doesn't have to load it again when it hydrates and then the subsequent loading of data happens on the client when inputs vary depending on user actions.
Apologies if this has been already answered somewhere, I dug into the README and issues but couldn't find anything.