React Query data can be undefined

Hello, any idea how could i make it so i know my data is not undefined when doing like this using react-query:

const queries = {
  query1: useGetSomething(),
  query2: useGetSomething2(),
};

const queriesValues = Object.values(queries)
const isPending = queriesValues.some((query) => query.isPending)
const isError = queriesValues.some((query) => query.isPending)

if(isPending){
  return <div>Loading...</div>
}

if(isError){
  return <div>Error...</div>
}
//data can be undefined
console.log(queries.query1.data)
console.log(queries.query2.data)

const queries = {
  query1: useGetSomething(),
  query2: useGetSomething2(),
};

const queriesValues = Object.values(queries)
const isPending = queriesValues.some((query) => query.isPending)
const isError = queriesValues.some((query) => query.isPending)

if(isPending){
  return <div>Loading...</div>
}

if(isError){
  return <div>Error...</div>
}
//data can be undefined
console.log(queries.query1.data)
console.log(queries.query2.data)

this works perfectly fine:

const queries = {
  query1: useGetSomething(),
  query2: useGetSomething2(),
};

if(queries.query1.isPending || queries.query2.isPending){
  return <div>Loading...</div>
}

if(queries.query1.isError || queries.query2.isError){
  return <div>Error...</div>
}

console.log(queries.query1.data)
console.log(queries.query2.data)

const queries = {
  query1: useGetSomething(),
  query2: useGetSomething2(),
};

if(queries.query1.isPending || queries.query2.isPending){
  return <div>Loading...</div>
}

if(queries.query1.isError || queries.query2.isError){
  return <div>Error...</div>
}

console.log(queries.query1.data)
console.log(queries.query2.data)

7 Replies

Eve•3mo ago

the problem is with .some() creating a closure. If you changed it to

let isError = false;
let isPending = false;

for (const query of queries) {
  if (query.isPending) isPending = true;
  if (query.isError) isError = true
}

let isError = false;
let isPending = false;

for (const query of queries) {
  if (query.isPending) isPending = true;
  if (query.isError) isError = true
}

you'd likely find that it works.

Neto•3mo ago

you can

if(isPending || !queries.query1.data){
  return <div>Loading...</div>
}

if(isPending || !queries.query1.data){
  return <div>Loading...</div>
}

or you can set the initial data

Neto•3mo ago

https://tanstack.com/query/latest/docs/framework/react/guides/initial-query-data

TanStack | High Quality Open-Source Software for Web Developers

Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.

Neto•3mo ago

(maybe its possible) you can pass a promise as prop (the inicial query data) and block it with use(Promise) to handle the data in a blocking way

Eve•3mo ago

Or you could just console.log(queries.query1.data ?? {}) to take care of the undefined case, that should never happen anyway.

Neto•3mo ago

in theory as well, you could use suspense boundaries to block the rendering before the null-ish case

Eve•3mo ago

TS doesn't understand suspense boundries though, and still complains 😆

Gaming

Programming

React Query data can be undefined