Error: "Query data cannot be undefined" after upgrading to v4. Why is this check necessary?

[iagoqo]

I'm upgrading from v3 to v4 and I get this error on tests that rely on returning undefined from useQuery.

"Query data cannot be undefined. Please make sure to return a value other than undefined from your query function. Affected query key ..."
Here's a link to the line of code:

query/packages/query-core/src/query.ts

Line 457 in 1614c31

if (typeof data === 'undefined') {

And this is some code of how I was using it:

const {
  data,
  isLoading,
} = useQuery<ResponseType | undefined>(
  ['myQuery', myParameter],
  () => {
    // myParameter can be undefined, skip call if that's the case
    if (!myParameter) return;
    return myApiCall(myParameter);
  },
);

Now I've resorted to using useQuery<ResponseType | null> instead and then using data like data ?? undefined.

Also, this should make TS fail by not allowing undefined as a possible useQuery type, instead of throwing console errors on dev environment.

What was the reason for adding this change? I couldn't find any info on why this check is necessary.

[TkDodo]

We've clarified here why this change was made:

https://tanstack.com/query/latest/docs/framework/react/guides/migrating-to-react-query-4#undefined-is-an-illegal-cache-value-for-successful-queries

Also, this should make TS fail by not allowing undefined as a possible useQuery type, instead of throwing console errors on dev environment.

yep, we tried that, but it's harder to do than it looks :)

[TkDodo]

you need to return something that is not undefined.

[LyghtCode]

figured it out, it was the console logs in the query, not the return! its in the link you sent but i feel it should be more clear that it is not what we're supposed to be doing.

[LyghtCode]

no console.logs! just pass the data. using superjson as transformer btw.

[showmeyourhits]

Link in original message is broken - https://tanstack.com/query/latest/docs/framework/react/guides/migrating-to-react-query-4#undefined-is-an-illegal-cache-value-for-successful-queries

[VesperQuartz]

getSoldNFTs: publicProcedure.query(({}) => {
    const nfts = alchemy.nft
      .getNftsForContract("0x37538882aCC82700c5f28e5E40865A919285BCfb")
      .then(console.log);
      console.log(nfts);
    return nfts;
  }),

i am using tRPC what would i need to do to fix this query?

getting valid response object on the server side

Same. in my case it was orpc and for the past 3 days I have been battling this like my code seems correct i am even returning static data but i kept on getting the undefined error. but using Superjson as you suggested fixed it. Thanks bro

[ryanleecode]

this is dumb

[Hexi1997]

this is dumb

[rozam007]

I am facing the same issue

[NemanjaMandic]

This is dumb af.