Slewt•2mo ago

ConvexQueryCacheProvider Behavior

I switched to using ConvexQueryCacheProvider in order to keep query subscriptions active for views that are closed and opened frequently. I get nice instant load times now on the screens/components I use it on. But if I check the network tab in chrome I’m seeing a request to the server going out every single time the page/components loads. Part of my goal was to freely call the cache without re-calling the convex server for data every single time. Am I doing something wrong or is this intended behavior?

18 Replies

Convex Bot•2mo ago

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 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!

SlewtOP•2mo ago

My expectation/desired behavior would be that subsequent useQuery calls while using the cache provider would not send more requests and just use the cached data. And the data would stay dynamically updated from socket updates for the subscription. Anyone have guidance here? If you repeatedly call ConvexQueryCacheProvider it seems to send a new network request every time instead of depending on the cache.

Clever Tagline•2mo ago

I believe what you're seeing is intended behavior. Even though there's still a request being made, the cache provider is what supplies the data to the app as long as there hasn't been a change in any of the documents related to the query.

SlewtOP•2mo ago

But the cache provider is being kept up to date by the a socket subscription. So the additional request being sent every time a page loads/reloads is redundant. That’s kind of the point of caching something for me, to avoid redundant calls to the server. So it sounds like I need to write my own solution to get the expected cache behavior and avoid the redundant server calls.

lee•2mo ago

this doesn't repro for me if i use ConvexQueryCacheProvider and then unmount & remount a component that does a useQuery, there is no activity on the websocket in the network tab are you importing useQuery from the right place? it should be

import { useQuery } from "convex-helpers/react/cache";

import { useQuery } from "convex-helpers/react/cache";

SlewtOP•2mo ago

Your totally right, my mistake. I wasn’t checking the socket communication and defaulted to looking at the normal network request 🤦‍♂️

Mez•2mo ago

Is there a stack post on using the ConvexQueryCacheProvider? Where did you find the docs? I'd like to learn about it.

Clever Tagline•2mo ago

@Mez https://stack.convex.dev/magic-caching

Can your database do this? Ep. 1: Magic caching

With Convex's magic query cache, Convex's powerful subscriptions are cached, not merely values. So you get fast, jank-free renders with no cache consi...

Mez•2mo ago

Got around to trying out the cache from convex-helpers and it worked nicely! Can this replace tanstack's useQuery? The following snippet seems to give you the same experience, which is intended. Would this be considered the best practice? They both seem to be caching. Has anyone thought about the differences?

import { makeUseQueryWithStatus } from "convex-helpers/react";
import { useQueries } from "convex-helpers/react/cache";

const useQueryCached = makeUseQueryWithStatus(useQueries);

import { makeUseQueryWithStatus } from "convex-helpers/react";
import { useQueries } from "convex-helpers/react/cache";

const useQueryCached = makeUseQueryWithStatus(useQueries);

ballingt•2mo ago

@Mez TanStack's useQuery already does this! Oh sorry I misunderstood your question looks like Sure, yeah this can replace tanstack's useQuery! The differences aren't big, I think this looks good! I'd say don't use TanStack Query unless you're using TanStack Start or you prefer it for some reason. The Convex React hooks are still the simplest way to use Convex with React. When you say "replace tanstack's useQuery" there are a lot of things that could mean, are there features you're looking for in particular? tanstack's useQuery has a lot of features, some of which don't make sense with Convex's live subscriptions but some of which could be useful

Mez•2mo ago

Thanks for the input @ballingt ! I agree this is the simplest way to use convex with react! Yeah, I was looking at the caching benefits and the status. But if they both are caching then I can stay with tanstack because I like the dev tool!

ballingt•2mo ago

The time a query is "cached" (less caching, more remaining subscribed to the query) is controlled by gcTime in query options, there's a bit about this at the bottom of https://docs.convex.dev/client/tanstack-query

Mez•2mo ago

if you don't specify the gcTime does it default to 10 secs? if you cache for say 5 min, will the subscription update when new data is added to the table?

ballingt•2mo ago

The default is 5 minutes! Chime in at https://github.com/get-convex/convex-react-query/issues/9 if you have thoughts on overriding that default. yes, if you're still subscribed to the query new results will be send down every time the query changes, e.g. new results being added to a table

Mez•2mo ago

If I understood the ticket you referenced, the main concern seems to be with gcTime of 5 min may grow the cache memory too large if a bunch of new queries are currently subscribed? If so, I think a decent stop gap is to update the document with a Defaults section that describes the use case and let the user think about changing the gcTime!

ballingt•2mo ago

@Mez the word "cache" is tricky here, it's not so much memory usage! gcTime for Convex queries causes the queries to stay subscribed. Makes sense, yeah we'll document this better too. It's more network usage / Convex function execution that's a concern here. @Mez feel free to chime in on that issue, that way you'll be notified of changes. I'd love to move some of these API discussions to the more durable locaiton of GitHub issues.

Mez•2mo ago

maybe 5 min is too long then lol!

ballingt•2mo ago

The argument in the other direction is generally TanStack Query has more aggressive defaults (like refreshing every query when the tab becomes active again) and once you start to tweak for performance and costs you dial these down, so something aggressive is nice. And that this way global changes to the default gcTime will be reflected in queries https://tanstack.com/query/latest/docs/framework/react/guides/important-defaults#:~:text=By%20default%2C%20%22inactive%22%20queries,1000%20*%2060%20*%205%20milliseconds.

TanStack | High Quality Open-Source Software for Web Developers

Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.

ConvexQueryCacheProvider Behavior

Did you find this page helpful?