T
TanStack•3y ago
absent-sapphire

How to control the error when return undefined from a fetch?

I am getting this console error: Query data cannot be undefined. Please make sure to return a value other than undefined from your query function. Affected query key: ["Jockey"]. I am fetching without turn on the backend and I want to know how to control that error. 
export const getJockeys = async () => {
  try {
    const response = await fetch("http://localhost:3001/jockeys");

    if (!response.ok) {
      throw new Error(response.statusText);
    }

    const result = await response.json();
    return result;
  } catch (error) {
    console.log(error);
  }
};
export const getJockeys = async () => {
  try {
    const response = await fetch("http://localhost:3001/jockeys");

    if (!response.ok) {
      throw new Error(response.statusText);
    }

    const result = await response.json();
    return result;
  } catch (error) {
    console.log(error);
  }
};
  const { data, status, isLoading } = useQuery({
    queryKey: ["Jockey"],
    queryFn: api.getJockeys,
  });
  const { data, status, isLoading } = useQuery({
    queryKey: ["Jockey"],
    queryFn: api.getJockeys,
  });
5 Replies
passive-yellow
passive-yellow•3y ago
I don't think you want the await before response.json, just before fetch? But the docs do say, "Must return a promise that will either resolve data or throw an error. The data cannot be undefined." (https://tanstack.com/query/v4/docs/react/reference/useQuery) Anyway, I don't use try/catch blocks for my query functions.
absent-sapphire
absent-sapphireOP•3y ago
@ƘЄѴɬƝ perfect. The code is gonna be? 
export const getJockeys = async () => {
  const response = await fetch("http://localhost:3001/jockeys");

  if (!response.ok) {
    throw new Error(response.statusText);
  }

  const result = response.json();
  return result;
};
export const getJockeys = async () => {
  const response = await fetch("http://localhost:3001/jockeys");

  if (!response.ok) {
    throw new Error(response.statusText);
  }

  const result = response.json();
  return result;
};
Is necessary if (!response.ok)?
like-gold
like-gold•3y ago
this is the problem in the original code: 
  } catch (error) {
    console.log(error);
  }
  } catch (error) {
    console.log(error);
  }
this catches the error, but doesn't re-throw it. Since your function is async, and a promise must be returned, this implicitly returns a Promise with undefined data, basically being equivalent to: 
  } catch (error) {
    console.log(error);
    return Promise.resolve(undefined)
  }
  } catch (error) {
    console.log(error);
    return Promise.resolve(undefined)
  }
and that's why undefined shows up in your query cache, and that is not allowed. This gotcha is so common that I have added it to my FAQ blog post: https://tkdodo.eu/blog/react-query-fa-qs#logging
React Query FAQs
Answering the most frequently asked React Query questions
absent-sapphire
absent-sapphireOP•3y ago
@TkDodo 🔮 good to know. Actually, I am learning and implement tanstack to the project, so, I have to refactor. my final code so will be: 
export const getJockeys = async () => {
  const response = await fetch("http://localhost:3001/jockeys");
  return response.json();
};
export const getJockeys = async () => {
  const response = await fetch("http://localhost:3001/jockeys");
  return response.json();
};
@TkDodo 🔮 @ƘЄѴɬƝ thanks for your help
like-gold
like-gold•3y ago
please also see: https://tkdodo.eu/blog/react-query-fa-qs#the-fetch-api
React Query FAQs
Answering the most frequently asked React Query questions

Did you find this page helpful?