continuing-cyan

axios.get is success but useQuery throw "undefined" error

I'm using useQuery with axios in many case. In most case, everything is ok. But in a specific case, useQuery throw "got undefined" error. It's wired because when see server and frontend log, api response is ok. When data is passed to useQuery from axios, undefined erorr throw from here(https://github.com/TanStack/query/blob/8969dc1649e4f7c49103032ef565b076f05a9ee6/packages/query-core/src/query.ts#L466) I don't know why error throw. My guess is only this useQuery has a different option with my other queries that { suspense: true, useErrorBoundary: false .

GitHub

query/query.ts at 8969dc1649e4f7c49103032ef565b076f05a9ee6 · TanSta...

🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query. - query/query.ts at 8969dc1649e4f7c49103...

5 Replies

metropolitan-bronze•3y ago

it means your queryFn has returned a resolved Promise with the value undefined, which needs to be fixed. maybe you tried to catch an error for logging it and haven't transformed that to a rejected Promise. Impossible to tell without seeing the code pro tip: just have your queryFunction be: return Promise.resolve({ some: 'test json' }) and see if it still occurs

continuing-cyanOP•3y ago

Thanks for quick response. I think queryFn handle promise well like other queryFns in my app. When see the undefined error logs, all network payload is correct and then onSuccess of useQuery is fired with the correct data (not undefined). The wired thing is error throwing by core-query. As I said, I guess the problem is query options. My all queries has options { suspense: true, useErrorBoundary: true } but this error query has another option { suspense: true, useErrorBoundary: false } . I think this another option maybe throw error when trying to settle promise because suspense option. I'm using these code in in-app browser(webview) and most case is ok but some kind of user got undefined always. Unfortunately server data is correct. The problem query

// query
const myUseQuery = () => useQuery({
  queryKey: ['my-unique-key'],
  queryFn: () => axios.get(), // not async-await but it's ok in most case.
  onSuccess: (data) => {
    log(typeof data, data) // to debug. logs 'object' { content: [...] }
    return data;
  },
  onError: (error: any) => {
    log(error);
    return error;
  },
  suspense: true, // ** here is the problem?? **
  useErrorBoundary: false,
});

// Components
const ChildComponent = () => {
  const { data, isError, error ) = myUseQuery();
  
  if (isError && error) return null; 
  if (!data) return null;

  return <div>{data}</div>;
};

const ParentComponent = () => {
  return (
    <>
       <Suspense>
         <OtherCompoentUsingQuery />
       </Suspense>

       <ChildComponent /> 
    </>
  );
};

const RootComponent = () => {
  return (
    <ErrorBoundary> // catch "undefined" from myUseQuery but all logger shows data is correct not undefined
      <Suspense> // myUseQuery of ChildComponent waiting
        <ParentComponent />
      </Suspense>
    </ErrorBoundary>
  );
};

// query
const myUseQuery = () => useQuery({
  queryKey: ['my-unique-key'],
  queryFn: () => axios.get(), // not async-await but it's ok in most case.
  onSuccess: (data) => {
    log(typeof data, data) // to debug. logs 'object' { content: [...] }
    return data;
  },
  onError: (error: any) => {
    log(error);
    return error;
  },
  suspense: true, // ** here is the problem?? **
  useErrorBoundary: false,
});

// Components
const ChildComponent = () => {
  const { data, isError, error ) = myUseQuery();
  
  if (isError && error) return null; 
  if (!data) return null;

  return <div>{data}</div>;
};

const ParentComponent = () => {
  return (
    <>
       <Suspense>
         <OtherCompoentUsingQuery />
       </Suspense>

       <ChildComponent /> 
    </>
  );
};

const RootComponent = () => {
  return (
    <ErrorBoundary> // catch "undefined" from myUseQuery but all logger shows data is correct not undefined
      <Suspense> // myUseQuery of ChildComponent waiting
        <ParentComponent />
      </Suspense>
    </ErrorBoundary>
  );
};

Do I change the option from { suspense: true, useErrorBoundary: false } to { suspense: false, useErrorBoundary: false } to handle error well? Maybe there is no edge case throwing error when resume rendering with data fetching in useQuery suspense?

metropolitan-bronze•3y ago

Can you show this behavior in a codesandbox reproduction?

continuing-cyanOP•3y ago

@TkDodo 🔮 thanks for your help! it's resolved. It not about options like suspense or useErrorBoundary. It because my other api really return undefined. But I have struggled to debug what is the problem because this is reported only in production and there is no clue which query is undefined.

continuing-cyanOP•3y ago

So I make PR to enhance error message. please check this out. https://github.com/TanStack/query/pull/5253

GitHub

refactor: enhance error undfined message by DylanJu · Pull Request ...

In production, it's hard to debug if got undefined data because error message don't tell which query is the problem. To find the query or api, a developer should look many network logs. It&...

Gaming

Programming

axios.get is success but useQuery throw "undefined" error

Did you find this page helpful?