T
tRPC

How to make LoaderAndError component which is type safe?

How to make LoaderAndError component which is type safe?

Aathhb
View on Discord
8/25/2023
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 ?

Looking for more? Join the community!

T
tRPC

How to make LoaderAndError component which is type safe?

Join Server
Recommended Posts
TRPC vanilla client load failed when called on mobile browserHi, I have created a vanilla client to use TRPC without hooks in a NextJS project: ``` import { cre`createCaller` and RSC - with next-authI've been upgrading my trpc routers and handlers to support edge+app router with drizzle and next-auuseQuery always fetching when active on pageHi, I was call my procedure like this, using NextJs (page directory) const { isLoading, isError, isSnextjs app router `fetchRequestHandler`'s createContext doesn't run.Hey there, I have the following code: ```ts // /src/app/api/trpc/[trpc]/route.ts import { fetchRequ