useQuery results in having this error: TypeError: url__WEBPACK_IMPORTED_MODULE_0__.URLSearchParams

This is my first time using react query, and I seem to be running into some difficulties, some help would be appreciated.

I have an api endpoint that when I call manually, results in valid data being returned: (see screenshot 1)

The code for this in short is:

const currentStandings = await getCurrentWorldsStandings();

console.log(currentStandings);

const currentStandings = await getCurrentWorldsStandings();

console.log(currentStandings);

const currentStandings = await getCurrentWorldsStandings();

console.log(currentStandings);

const currentStandings = await getCurrentWorldsStandings();

console.log(currentStandings);

When I try convert this into a query, as so:

"use client" //at the top

const { data: currentStandings } = useGetCurrentWorldsStandings();

console.log(currentStandings); //results in undefined

"use client" //at the top

const { data: currentStandings } = useGetCurrentWorldsStandings();

console.log(currentStandings); //results in undefined

"use client" //at the top

const { data: currentStandings } = useGetCurrentWorldsStandings();

console.log(currentStandings); //results in undefined

"use client" //at the top

const { data: currentStandings } = useGetCurrentWorldsStandings();

console.log(currentStandings); //results in undefined

hook:

import { useQuery } from "@tanstack/react-query";
import { getCurrentWorldsStandings } from "@/api/esports/queries/standings/worlds";

export const useGetCurrentWorldsStandings = () => {
  return useQuery({
    queryKey: ["getCurrentWorldsStandings"],
    queryFn: getCurrentWorldsStandings,
  });
};

import { useQuery } from "@tanstack/react-query";
import { getCurrentWorldsStandings } from "@/api/esports/queries/standings/worlds";

export const useGetCurrentWorldsStandings = () => {
  return useQuery({
    queryKey: ["getCurrentWorldsStandings"],
    queryFn: getCurrentWorldsStandings,
  });
};

import { useQuery } from "@tanstack/react-query";
import { getCurrentWorldsStandings } from "@/api/esports/queries/standings/worlds";

export const useGetCurrentWorldsStandings = () => {
  return useQuery({
    queryKey: ["getCurrentWorldsStandings"],
    queryFn: getCurrentWorldsStandings,
  });
};

import { useQuery } from "@tanstack/react-query";
import { getCurrentWorldsStandings } from "@/api/esports/queries/standings/worlds";

export const useGetCurrentWorldsStandings = () => {
  return useQuery({
    queryKey: ["getCurrentWorldsStandings"],
    queryFn: getCurrentWorldsStandings,
  });
};

browser throw error of

TypeError: url__WEBPACK_IMPORTED_MODULE_0__.URLSearchParams is not a constructor

TypeError: url__WEBPACK_IMPORTED_MODULE_0__.URLSearchParams is not a constructor

TypeError: url__WEBPACK_IMPORTED_MODULE_0__.URLSearchParams is not a constructor

TypeError: url__WEBPACK_IMPORTED_MODULE_0__.URLSearchParams is not a constructor

What am I doing wrong? I am using Next js.

I will also mention that, when I change the api code to return a simple array:

return [10, 20, 30]

return [10, 20, 30]

return [10, 20, 30]

return [10, 20, 30]

Then, the query returns the array as expected.

useQuery results in having this error: TypeError: url__WEBPACK_IMPORTED_MODULE_0__.URLSearchParams

Similar Threads

Similar Threads

Similar Threads