athhb
athhb11mo ago

How to make LoaderAndError component which is type safe?

I i have a query like this const { data, isLoading, isError } = trpc.settings.get.useQuery(); Now I have a LoaderAndErrorComponent like below
import React from 'react'
import { Loader } from './Loader'
import { PiSmileySadLight } from 'react-icons/pi';

interface LoaderAndErrorProps {
loading: boolean,
error: boolean
children?: React.ReactNode
}

export const LoaderAndError: React.FC<LoaderAndErrorProps> = ({ error, loading, children }) => {


if (loading) {
return <div className='flex items-center justify-center flex-1'><Loader /></div>
}

if (error) {
return <div className='flex items-center justify-center flex-1 gap-2'><PiSmileySadLight /> Some Error Getting Data!</div>
}

return (
<>{children}</>
)
}
import React from 'react'
import { Loader } from './Loader'
import { PiSmileySadLight } from 'react-icons/pi';

interface LoaderAndErrorProps {
loading: boolean,
error: boolean
children?: React.ReactNode
}

export const LoaderAndError: React.FC<LoaderAndErrorProps> = ({ error, loading, children }) => {


if (loading) {
return <div className='flex items-center justify-center flex-1'><Loader /></div>
}

if (error) {
return <div className='flex items-center justify-center flex-1 gap-2'><PiSmileySadLight /> Some Error Getting Data!</div>
}

return (
<>{children}</>
)
}
Now when i am wrapping this LoaderAndError component around a Component and trying to access the data in Component the type is WhateverDataType | undefined basically TS doesn't know that the Component won't be reached with undefined data What is a good way to do this ?
0 Replies
No replies yetBe the first to reply to this messageJoin