Baris•9mo ago

Duplicate function calls

Hi everyone!, we log all of our query functions to make sure everything works correctly. When refreshing the page, we see in the browser console that 9 useQuery calls are made and all of them are logged. However, when I look at the Convex dashboard logs, I see 22 function calls. Also, when checking the usage, it shows 22 calls have been used. Since this is an additional more than 100% usage, I wanted to ask you if this is normal behavior or related to caching?

18 Replies

sshader•9mo ago

Stab in the dark -- are you using React with strict mode (which effectively renders every component twice)?

BarisOP•9mo ago

No, strict mode disabled for that reason

sshader•9mo ago

Well this isn't expected behavior (useQuery should result in one function call until something changes requiring it to recompute). I did check with a very simple example app and I'm not getting the same behavior. Other stab in the dark -- any server rendering happening here with next? And in terms of debugging a little further, I'd try passing in + logging some random identifier from the client to confirm that the double calls are all coming from the same client

BarisOP•9mo ago

Yes, some components are server components but I only make queries in client components. Other than that, I'm the only client using it so we can eliminate that possibility.

BarisOP•9mo ago

I created an empty page to simplify things, and I put only one useQuery in it. And a new query without any filters just collect() from table. It appears once in the browser log and three times in the convex dashboard logs. Additionally, to prevent things that might arise from strict mode, I built and ran the production version. I will try again with a completely new project later.

Michal Srb•9mo ago

Any chance you're getting multiple ConvexReactClients instatiated? What does your new ConvexReactClient code look like?

BarisOP•9mo ago

@Michal Srb It's possible. Here's my ConvexReactClient code:

"use client";

import { ConvexReactClient } from "convex/react";
import { ClerkProvider, useAuth } from "@clerk/clerk-react";
import { ConvexProviderWithClerk } from "convex/react-clerk";

const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL);

export default function ConvexClientProvider({ children }) {
  return (
    <ClerkProvider publishableKey="pk_test_...">
      <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
        {children}
      </ConvexProviderWithClerk>
    </ClerkProvider>
  );
}

"use client";

import { ConvexReactClient } from "convex/react";
import { ClerkProvider, useAuth } from "@clerk/clerk-react";
import { ConvexProviderWithClerk } from "convex/react-clerk";

const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL);

export default function ConvexClientProvider({ children }) {
  return (
    <ClerkProvider publishableKey="pk_test_...">
      <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
        {children}
      </ConvexProviderWithClerk>
    </ClerkProvider>
  );
}

Michal Srb•9mo ago

Hmm, that looks standard I don't see any problem there. I would definitely kill the Next.js server and retry if you haven't yet. Can't trust that server for anything 😄 Also check the callsite of ConvexClientProvider, that it is not included multiple times somehow.

BarisOP•9mo ago

@Michal Srb I don't know what to do. This is most likely related to me because I just ran npm create convex@latest and tried nextjs quickstarter without changing a single line of code. With React strict mode on, 3 queries were logged on convex logs, and when turned off, 2 were logged. But there is only 1 query on the page. I restarted my computer and everything 🤦‍♂️ Can somebody help me?

jamwt•9mo ago

just to get all details, which platform are you on?

BarisOP•9mo ago

Latest version MacOS I'm on localhost and using VSCode

jamwt•9mo ago

so, I just tried the next.js quick start. this was my run: https://www.dropbox.com/scl/fi/za80wlcxi9ok1gadn3o6p/multiple-calls.mp4?rlkey=mgiwbnuoi9qlb4kenje8sn0cz&e=1&st=8ywvxtyj&dl=0

Dropbox

multiple-calls.mp4

Shared with Dropbox

jamwt•9mo ago

I didn't see any extraneous calls unfortunately, but maybe it would help to see what I did so we could understand what or if you did anything different

BarisOP•9mo ago

Thanks for the video, Jamie. I think I found the issue. When I select authentication none like you did, the issue is resolved, but when I choose Clerk, it happens again. I tested it again to confirm.

Michal Srb•9mo ago

Ah! This is working as intended. The query gets called immediately on page load, and then again after authenticating. You can prevent this by wrapping your components in Authenticated, as described at the in step 9 of the Clerk setup guide: https://docs.convex.dev/auth/clerk#get-started

Convex & Clerk | Convex Developer Hub

Clerk is an authentication platform providing login via

BarisOP•9mo ago

Yes, correct. But in the nextjs quickstarter (with clerk), it's already wrapped inside <Authenticated> by default. Yet it sends 2 queries. Do you have a chance to check?

Michal Srb•9mo ago

The client immediately reauthenticates to ensure that the token it uses is a new one (and that way it knows when to refetch another one). But since the fields in the JWT don't change, the queries are cached.

BarisOP•9mo ago

Okay, it's not an issue since it only occurs during page loads. I just wanted to make sure of that, thank you for your help.

Duplicate function calls

Did you find this page helpful?