react-query does not return queries when used within a seperate function in Next.js

[eigen-spaced]

I am not sure if this a Next.js issue. I have the following query:

  const {
    isLoading,
    isError,
    error,
    data: course,
  } = useQuery(["courses", id], fetchCourseDetails(id), {
    staleTime: 60 * 60 * 1000,
  });

fetchCourseDetails() is a seperate function that rests outside the main component. This is what it looks like:

  const fetchCourseDetails = async id => {
    try {
      const res = await axios.get(
        `{BASE_URL}/api/educator/course/${id}`
      );

      return res;
    } catch (err) {
      console.log(err);
    }
  };

For some reason, when I do it like this, it never fetches the data properly. There is always some sort of error popping up. Either its a 400 (the api works alright) or, something like this;

XML Parsing Error: syntax error Location: http://localhost:3000/api/educator/course/undefined

or, the most recent one, which just says Missing queryFn. Its been driving me up the wall. This however works fine without any complaints;

  const {
    isLoading,
    isError,
    error,
    data: course,
  } = useQuery(
    ["courses", id],
    async () =>
      axios
        .get(`http://localhost:3000/api/educator/course/${id}`)
        .then(res => res.data),
    {
      staleTime: 60 * 60 * 1000,
    }
  );

Notice the change here is that the fetch function is directly used in the useQuery hook. I would greatly appreciate it if someone could help me with this.

[eigen-spaced]

Ok nevermind I solved the main issue. Really silly, but all I had to do was use another function call as below;

  const {
    isLoading,
    isError,
    error,
    data: course,
  } = useQuery(["courses", id], () => fetchCourseDetails(id), {
    staleTime: 60 * 60 * 1000,
  });

While the page loads with all the components, its still not fetching the data. This is what it shows in the devtools.

[kowalski21]

Have you tried clicking on the query key in the dev tools

[eigen-spaced]

You mean refetch? Sure. What I noticed was that it does return the data, which I can view in the devtools. But it does not populate the components with that data. I have a feeling this might have something to do with the way the page is being loaded or the initial request

[Sugaml]

Yes

…

On Fri, 24 Sep 2021, 8:52 am Magnuscake, ***@***.***> wrote: Ok nevermind I solved the main issue. Really silly, but all I had to do was use another function call as below; const { isLoading, isError, error, data: course, } = useQuery(["courses", id], () => fetchCourseDetails(id), { staleTime: 60 * 60 * 1000, }); While the page loads with all the components, its still not fetching the data. This is what it shows in the devtools. [image: react-query-no-fetch] <https://user-images.githubusercontent.com/24540399/134612059-b396499c-0155-4023-9f5b-585c43ecd8fc.png> — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#2714 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AL4TYEPXP5X2QKZJEGR6ZNTUDPTQFANCNFSM5EU6SJDA> .

[TkDodo]

Since you catch the error in the queryFn to log it, you transform errors to resolved promises. Either rethrow thw error so RQ can pick it up or better: use the onError callback for logging and remove the try/catch

[eigen-spaced]

Thank you for your response. I have changed my code at your suggestion. This is what it looks like now;

const fetchCourseDetails = async id => {
  const res = await fetch(`/api/educator/course/${id}`);

  if (res.ok) {
    return res.json();
  }

  throw new Error("Network response error");
};

This works fine and fetches the data exactly how I want it. But I think useQuery makes two requests, as in the picture posted above, there an initial request without the id, which is extracted from the url using useRouter from Next.js, and then the second request which passes the proper id. I'm not sure if that is correct and would appreciate it if you could shed some light there. Also does react-query not work with axios? I changed axios to fetch in the fetch function and it works fine, but when I use axios.get, it just throws an error/

[TkDodo]

set enabled: !!id to disable the query until you have an id :)

[eigen-spaced]

That completely disabled the query and does not fetch anything :(

[TkDodo]

It disables queries that have no id. If your component rerenders with an id, the query will enable. A codesandbox reproduction would be helpful at this point :)

[eigen-spaced]

I figured out the problem. It had to do with Next js. Thank you for your help

[eigen-spaced]

Putting this here for an lost souls who stumble upon this in the future. For the first problem, where I was trying to call an external function inside the useQuery instead of

const {
    isLoading,
    isError,
    error,
    data: course,
  } = useQuery(["courses", id],  fetchCourseDetails(id), {
    staleTime: 60 * 60 * 1000,
  });

we do pass that function through an anonymous function like this

const {
    isLoading,
    isError,
    error,
    data: course,
  } = useQuery(["courses", id], () => fetchCourseDetails(id), {
    staleTime: 60 * 60 * 1000,
  });

For my second problem, where the url param was being queried twice, this was a Next.js problem. There is a long discussion about this here that you can checkout. Essentially, since useRouter is a react hook, it catches up to the current query on ReactDOM.hydrate. The solutions was to use isReady from useRouter as outlined here in the discussion. Ensure this is inserted before the useQuery call.