TripleSpeeder•12mo ago

Caching behaviour of HttpClient

I'm seriously confused now, trying to understand how/why convex HttpClient is caching responses. I have this convex query:

export const getUserByUsername = query({
  args: {
    username: v.string(),
  },
  handler: async (ctx, { username }) => {
    console.log(`getUserByUsername ${username}...`);
    const result = await ctx.db
      .query("users")
      .withIndex("by_clerk_username", (q) =>
        q.eq("clerkUser.username", username),
      )
      .unique();
    console.log(
      `getUserByUsername ${username} result description:`,
      result?.description,
    );
    return result;
  },
});

export const getUserByUsername = query({
  args: {
    username: v.string(),
  },
  handler: async (ctx, { username }) => {
    console.log(`getUserByUsername ${username}...`);
    const result = await ctx.db
      .query("users")
      .withIndex("by_clerk_username", (q) =>
        q.eq("clerkUser.username", username),
      )
      .unique();
    console.log(
      `getUserByUsername ${username} result description:`,
      result?.description,
    );
    return result;
  },
});

The query is logging the description field of the username. Now I modify the description field by a mutation. But when rendering the profile page for that user ( using ConvexHTTPclient, not the useQuery hook), I still get the old value. Initially I thought that this is an issue with next.js caching, but after drilling through all layers I think the problem is on convex side? My next dev terminal logs the following console output:

[CONVEX Q(users:getUserByUsername)] [LOG] 'getUserByUsername mike...'
[CONVEX Q(users:getUserByUsername)] [LOG] 'getUserByUsername mike result description:' 'bbbbbbb'

[CONVEX Q(users:getUserByUsername)] [LOG] 'getUserByUsername mike...'
[CONVEX Q(users:getUserByUsername)] [LOG] 'getUserByUsername mike result description:' 'bbbbbbb'

But i have changed the description to 'XXXXXXX' before! When I run the same query through npx convex run i get the expected result 'XXXXXXX' My understanding is that by seeing the CONVEX Q... log in my terminal that indeed the convex DB is hit, so any internal caches of next.js are not involved anymore. But looking at the convex dashboard logs, there is no according log entry created, so where is the output in my terminal coming from? It seems for me that the convex-internal DB cache is not invalidated by my mutation that updates the users table. But why do i get the correct result through npx convex run then? Pls halp 🙂

7 Replies

TripleSpeederOP•12mo ago

I can hit F5 in the browser and always get the stale result logged in the next dev terminal, but no log entry in the convex dashboard. Only when hitting Shift+F5, I get the correct result, and matching logs both in my terminal and in the convex dashboard. Or maybe it's still a next.js caching issue/topic? It all points to next.js, because I only get the stale data in the next dev terminal and browser. But seeing the log output from the convex query function with stale data totally confuses me. Does this mean my convex queries are running actually on the client (meaning my local next process)? How else could dev next log out the [CONVEX Q... lines? I think have a serious misunderstanding of the convex architecture 😕

ballingt•12mo ago

console.log output from Convex functions is cached along with the query result for development Convex deployments (but not production ones) so that this output can be displayed in the browser or Next.js server logs. Seeing these logs does not necessarily mean your Convex deployment is being hit with this request. To know if Convex is actually being hit you need to look for the query in the logs panel of the dashboard. Since you don't see it there, it sounds like this is Next.js caching.

my convex queries are running actually on the client (meaning my local next process)?

If look at the network request made by ConvexHttpClient from a browser you'll see the response includes these logs so don't worry: Convex queries only run on your Convex deployment.

TripleSpeederOP•12mo ago

Thank you, this clears things up 👍 Will look more into how in invalidate nexts cache then.

TripleSpeederOP•12mo ago

Dang, found it. 🤦‍♂️ I wrongly called revalidatePath with the additional "page" parameter, which should only be used if you want to revalidate a complete dynamic route (e.g. the path is something like /blog/[blogId]), instead of just one "route entry" (like /blog/123456). Removing the "page" parameter makes everything work as expected, as I only provide a specific path for the dynamic route. Next.js docs have this covered at https://nextjs.org/docs/app/api-reference/functions/revalidatePath. Sorry for bothering you guys with this 😇

Next.js by Vercel - The React Framework | Next.js by Vercel - The R...

Next.js by Vercel is the full-stack React framework for the web.

jamwt•12mo ago

glad to hear it's sorted out!

Michal Srb•12mo ago

Hey @TripleSpeeder, Convex 1.8 includes a simplified SDK for interacting with Convex from Next.js server: https://news.convex.dev/announcing-convex-1-8/

Convex News

Announcing Convex 1.8

Happy New Year! At Convex we’re kicking the year off with another release! Highlights: * New simpler API for loading and preloading data from Convex in Next.js server-side * Team usage breakdown by function on dashboard convex/nextjs for Next.js A new entrypoint in the convex package provides an

TripleSpeederOP•12mo ago

Wow, this really looks promising! Will try it asap 🙂