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 .