athhb•12mo 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