No QueryClient set, use QueryClientProvider to set one [Fix]

So I am a big dumb dumb. I have a couple of projects all using react-query, and some using @tanstack/react-query.

On one of those I encountered those errors, and here's the code.

"use client";

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

interface RootClientComponentProps {
	children: React.ReactNode;
}

// This makes sure this component and its children are rendered on the client-side
export default function RootClientProvider({ children }: RootClientComponentProps) {
	const queryClient = new QueryClient();

	return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
}

And here's where I'm using the useQuery.

import {useQuery} from "react-query";

const { data } = useQuery({
   queryKey: ["yadayada"],
   queryFn: async () => {
      whatever();
   }
});

Notice the error?

It's basically because on one side I'm importing as

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

While the other is:

import {useQuery} from "react-query";

If your project uses one or the other, pick one and use it, don't mix two imports. If you're working with the newest version, just import everything from @tanstack/react-query.

That is it.

Like what you see? Check out my projects and my youtube channel, or give me a thanks on Twitter.