Booker atom needs a QueryClientProvider?

[WilliamMayor]

Hey. We're trying to add atoms to our Python/Flask stack, where we don't use react. We're not react developers, so we're finding it pretty rough in places.

The latest hurdle is that when we try to build an app that contains the Booker atom, we're seeing this error in the browser console:

Uncaught Error: No QueryClient set, use QueryClientProvider to set one

I've found some examples of how to add a query client, and I've now got to here:

export function BookerApp() {
    return (
        <QueryClientProvider queryClient={queryClient} contextSharing={true}>
            <Booker
                view="WEEK_VIEW"
                eventSlug="hardcoded-for-now"
                username="hardcoded-for-now"
                onCreateBookingSuccess={() => {
                    console.log("booking created successfully");
                }}
            />
        </QueryClientProvider>
    );
}

let container = document.getElementById("calcom-booker");
if (container) {
    createRoot(container).render(
        <StrictMode>
            <BookerApp />
        </StrictMode>,
    );
}

But I still get the same error message.

The other atoms (that use the CalProvider) work just fine. We've managed to embed those into our site. It's just this booker one.

Does any one have any general tips for easy way to embed react components into a site without having to use react for routing etc? We don't want a full react SPA, we just want to attach react to a few divs in our existing site and have it add the atoms inside them.

Does anyone know anything about the query provider stuff?

Finally, is it possible to just use the standard embed options, that we would get if we weren't using Platform? Do we have to use the Booker atom?

Thanks!

[dosubot[bot]]

Hey @WilliamMayor! I'm a bot designed to help you solve bugs, answer questions, and become a contributor. Feel free to ask me anything while waiting for a human maintainer.

To resolve the "No QueryClient set, use QueryClientProvider to set one" error when embedding the Booker atom in a non-React environment like a Python/Flask stack, you need to ensure that the QueryClientProvider is correctly set up in your React component. Here's a code snippet that demonstrates how to use QueryClientProvider:

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

export function BookerApp() {
    return (
        <QueryClientProvider client={queryClient}>
            <Booker
                view="WEEK_VIEW"
                eventSlug="hardcoded-for-now"
                username="hardcoded-for-now"
                onCreateBookingSuccess={() => {
                    console.log("booking created successfully");
                }}
            />
        </QueryClientProvider>
    );
}

let container = document.getElementById("calcom-booker");
if (container) {
    createRoot(container).render(
        <StrictMode>
            <BookerApp />
        </StrictMode>,
    );
}

Ensure that the QueryClientProvider is wrapping your Booker component and that a QueryClient instance is passed to it. This setup is necessary for using the react-query library, which manages server state in React applications ^[1].

If you prefer not to use the Booker atom and want to explore standard embed options, you might consider using any available embed scripts or APIs provided by Cal.com that do not require React. However, specific details on these options are not available in the current context.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[WilliamMayor]

This doesn't help, that code is almost identical to the code I had. The only difference is that it correctly uses the client prop to the QueryClientProvider where I had been using queryClient. Changing this in my code made no difference.

[WilliamMayor]

Reading an issue on the TanStack/query repo[0] pointed me to maybe there being multiple versions of react or react-query, and this meant there were two contexts being used, one with the client provider I was creating, and one (the one the atom uses) without it.

So I reinstalled everything, making sure to have only the version of react that atoms wants. This turns out to be 19.0.0.

Unfortunately, now my runtime error is this: Uncaught TypeError: can't access property "ReactCurrentOwner", e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED is undefined, which I've come to understand is an unsafe variable that has been renamed in react 19.

Downgrading to react 18 proved to be difficult because of conflicting peer dependencies where react-dom insisted on having react 19. Eventually I got everything to agree, but that gave me the same error as before, presumably because I'd just added another version of react or react-query back in.

So now I'm stuck again. I'm going to open an issue about using the __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED variable, and see if that part can be solved somehow.

[0] TanStack/query#7965

[WilliamMayor]

My main.jsx file now looks like this:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
import { Booker } from "@calcom/atoms";
import "@calcom/atoms/globals.min.css";

const queryClient = new QueryClient();

export function BookerApp() {
    return (
        <>
            <QueryClientProvider client={queryClient}>
                <Booker
                    view="WEEK_VIEW"
                    eventSlug="hardcoded-for-now"
                    username="hardcoded-for-now"
                    onCreateBookingSuccess={() => {
                        console.log("booking created successfully");
                    }}
                />
            </QueryClientProvider>
        </>
    );
}

let container = document.getElementById("calcom-booker");
if (container) {
    createRoot(container).render(
        <StrictMode>
            <BookerApp />
        </StrictMode>,
    );
}

[WilliamMayor]

My package.json file is:

    "name": "NAME",
    "private": true,
    "version": "0.0.0",
    "type": "module",
    "scripts": {
        "dev": "vite --host 0.0.0.0",
        "build": "vite build",
        "lint": "eslint .",
        "preview": "vite preview"
    },
    "dependencies": {
        "@calcom/atoms": "^1.0.84",
        "@vitejs/plugin-react": "^4.3.4",
        "vite": "^6.0.11"
    }
}