#ConvexQueryCacheProvider Behavior

33 messages · Page 1 of 1 (latest)

signal cipher
#

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?

winged coralBOT
#

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!
signal cipher
#

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.

signal cipher
#

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.

dense steppe
#

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.

signal cipher
forest patrol
#

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";
signal cipher
#

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

median geyser
#

Is there a stack post on using the ConvexQueryCacheProvider? Where did you find the docs?

#

I'd like to learn about it.

dense steppe
median geyser
#

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);
tidal frigate
#

@median geyser 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

median geyser
#

Thanks for the input @tidal frigate ! 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!

tidal frigate
median geyser
#

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?

tidal frigate
tidal frigate
median geyser
#

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!

tidal frigate
#

@median geyser 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.

#

@median geyser 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.

median geyser
tidal frigate
# median geyser maybe 5 min is too long then lol!

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 default%2C "inactive" queries,1000 * 60 * 5 milliseconds.

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.

dusty smelt