3 replies

tRPC loading state

Right now I am handling displaying a loading state like this

const query = ...;
const [loading, setLoading] = useState(true);
const {data:queryResult} = query.useQuery();
if(qury && loading) setLoading(false);

const query = ...;
const [loading, setLoading] = useState(true);
const {data:queryResult} = query.useQuery();
if(qury && loading) setLoading(false);

const query = ...;
const [loading, setLoading] = useState(true);
const {data:queryResult} = query.useQuery();
if(qury && loading) setLoading(false);

const query = ...;
const [loading, setLoading] = useState(true);
const {data:queryResult} = query.useQuery();
if(qury && loading) setLoading(false);

Is there a better way to handle a loading state?

Solution

Apparently tRPC returns

isFetching

isFetching

isFetching

isFetching which on first glance can be used as a loading state

const { data, isFetching } = api...useQuery();

const { data, isFetching } = api...useQuery();

const { data, isFetching } = api...useQuery();

const { data, isFetching } = api...useQuery();