Search code examples
reactjsnext.jsreact-querytanstackreact-query

useQuery (tanstack/react-query) is not a function - TypeError

TypeError: (0 , tanstack_react_query__WEBPACK_IMPORTED_MODULE_4_.useQuery) is not a function. Everything is imported correctly and I am still getting this error.

Code:

import { useQuery } from "@tanstack/react-query";
import Stripe from "stripe";

export default async function useFetchProducts() {
  async function getStripeProducts() {
    const stripe = new Stripe(process.env.STRIPE_SECRET ?? "", {
      apiVersion: "2023-10-16",
    });

    const res = await stripe.prices.list({
      expand: ["data.product"],
    });

    const prices = res.data;
    return prices;
  }

  return useQuery({ queryKey: ["stripeProducts"], queryFn: getStripeProducts });
}

I was expecting it not to throw an error that useQuery is not a function.

Solution

  • try to pass reference for queryFn instead of calling it

    return useQuery({ queryKey: ["stripeProducts"], queryFn: getStripeProducts });