#Tanstack Router and Convex queries

11 messages · Page 1 of 1 (latest)

dense sun
#

I've started to use Tanstack Router after I converted my Next.js project to Tanstack Start.

Before I used this function to not make my queries run all the time:

export const useStableQuery = ((globalKey, query, ...args) => {
const { status, data, error } = useQuery(query, ...args)
const convex = useConvex()
const cache = ((convex as any).cache ??= {})

if (status === "success" && data !== undefined) {
cache[globalKey] = data
}

return {
status,
data: cache[globalKey],
error,
isSuccess: status === "success",
isPending: status === "pending",
isError: status === "error",
}
}) as QueryWithGlobalCacheKey

Is there a similar way of implementing this behaviour? I have looked at query keys, but I'm not sure if that will work when using Convex?

sonic mulchBOT
#

Thanks for posting in #1088161997662724167.
Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets.

    - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.)
    - Use [search.convex.dev](https://search.convex.dev) to search Docs, Stack, and Discord all at once.
    - Additionally, you can post your questions in the Convex Community's #1228095053885476985 channel to receive a response from AI.
    - Avoid tagging staff unless specifically instructed.

    Thank you!
chrome mantle
#

@dense sun Looks like the behavior you want is keeping the old result when the arguments to the useQuery change, and use that instead of loading state? You want to add placeholderData: keepPreviousData, to your query options.

https://tanstack.com/query/latest/docs/framework/react/guides/migrating-to-v5#removed-keeppreviousdata-in-favor-of-placeholderdata-identity-function

Note that this isn't quite how you described it,

Before I used this function to not make my queries run all the time
sounds like you'd expect the queries to run less frequently? They'll still run the same amount, but they won't go to a loading state when their arguments change.

#

I have looked at query keys, but I'm not sure if that will work when using Convex?
Query keys will pretty much work as normal, the query key constructed for convexQuery(api.foo.bar, {}) is something like "convexQuery|foo:bar|{}". Here this is in the React Query devtools.

image.png
dense sun
#

Thank you for the suggestions. It’s as always very appreciated. I Think my main concern is, when I for instance make a query to fetch user data in the home page, then navigate to another page where I need the same data, that I don’t make a new query. Will the query keys then take care of that?

chrome mantle
#

@dense sun re "dont' make a new query," gcTime is for staying subscribed to a query, so you'll still get updates if for example fetch user data and the user data changes.

#

I don't fully understand your goals here, do you want to prevent loading states or make fewer functions calls?

dense sun
#

Ah okay. I believe the goal is a bit of both. I would like to make sure the users are seeing less loading elements if the data is already there, and at the same time making sure I don’t query for data that I already have.

chrome mantle
#

@dense sun TanStack Query hooks will do this, by default for 5 minutes. They way they do it is by staying "subscribed" to the query, which means that if the data changes the query function will re-run.