Sara•8mo ago

Disable caching of queries

How do I disable cache in my frontend queries?

7 Replies

Hey @Sara , can you say more about what you are trying to do? Feel free to open a thread in #support-community

SaraOP•8mo ago

I had an incident where the queries got cached, and they were showing deleted records from the function queries, so I had to filter them out on the frontend like so:

export const viewer = query({
  args: {},
  handler: async (ctx) => {
    try {
      const userId = await auth.getUserId(ctx);
      const channelUsers = await ctx.db
        .query("channelUsers")
        .withIndex("userId", (q) => q.eq("userId", userId!))
        .collect();
      const channelIds = channelUsers.map((cu) => cu.channelId);
      // Todo: get the last message with author
      const channels = await Promise.all(channelIds.map((id) => ctx.db.get(id)));
      return channels.filter(i=> i!==null);
    } catch (e) {
      throw new ConvexError("something wrong happened while fetching messages");
    }
  },
});

export const viewer = query({
  args: {},
  handler: async (ctx) => {
    try {
      const userId = await auth.getUserId(ctx);
      const channelUsers = await ctx.db
        .query("channelUsers")
        .withIndex("userId", (q) => q.eq("userId", userId!))
        .collect();
      const channelIds = channelUsers.map((cu) => cu.channelId);
      // Todo: get the last message with author
      const channels = await Promise.all(channelIds.map((id) => ctx.db.get(id)));
      return channels.filter(i=> i!==null);
    } catch (e) {
      throw new ConvexError("something wrong happened while fetching messages");
    }
  },
});

so I had to also filter it in my frontend:

interface Props{
  chats:(Doc<"channels">|null)[];
}
export const Chats = ({chats}:Props)=>{

  return (<div className="w-full h-full grid grid-flow-row auto-rows-auto min-h-min">
    {chats.length ? chats.filter(Boolean).map((chat,idx)=> <span className="w-full h-full max-h-12 p-2 hover:cursor-pointer hover:underline transition-all" key={idx}>#{"  "}{chat?.name}</span>):<span>No new chats</span>}
  </div>)
}

interface Props{
  chats:(Doc<"channels">|null)[];
}
export const Chats = ({chats}:Props)=>{

  return (<div className="w-full h-full grid grid-flow-row auto-rows-auto min-h-min">
    {chats.length ? chats.filter(Boolean).map((chat,idx)=> <span className="w-full h-full max-h-12 p-2 hover:cursor-pointer hover:underline transition-all" key={idx}>#{"  "}{chat?.name}</span>):<span>No new chats</span>}
  </div>)
}

Michal Srb•8mo ago

This is not caused by caching. Convex has "perfect caching", it cannot give you stale results. What's likely happening here is that you have users with channel IDs corresponding to deleted channels.

SaraOP•8mo ago

and in the logs it says it is cached:

SaraOP•8mo ago

this is exactly what is happening!

Michal Srb•8mo ago

Yeah, so you have to decide whether that's ok for your app, or whether when a channel is deleted the user should be deleted too. Or prevent channel deletion when there exists a user with the channel ID. Does that make sense? (And once you handle the nulls correctly you can remove the try {} catch around your query)

SaraOP•8mo ago

yep that makes great sense, I thought that when the channel is deleted anything associated with it will be gone as well, soI'll rewrite the logic to remove the user, thanks! sure thing, every snippbit I saw doesn't require them, but I just write them by default, I'll remove them soon

Disable caching of queries

Did you find this page helpful?