Error on _app.tsx types using react query
on the latest version of nextjs i get this error
type NextPageWithLayout = NextPage & {
Layout?: React.ElementType
authenticate?: boolean
}
type AppPropsWithLayout = AppProps & {
Component: NextPageWithLayout
pageProps: { dehydratedState: DehydratedState }
}
const queryCache = new QueryCache()
const mutationCache = new MutationCache()
const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {
const queryClient: QueryClient = useMemo(() => new QueryClient({ queryCache, mutationCache }), [])
const Layout = Component.Layout ?? Noop
const authProps: boolean | undefined = Component.authenticate
return (
<QueryClientProvider client={queryClient}>
<Hydrate state={pageProps.dehydratedState}>
<AppSettings>
<UIProvider>
<ModalProvider>
<>
<DefaultSeo />
{authProps ? (
<PrivateRoute authProps={authProps}>
<Layout {...pageProps}>
<Component {...pageProps} />
</Layout>
</PrivateRoute>
) : (
<Layout {...pageProps}>
<Component {...pageProps} />
</Layout>
)}
<ToastContainer autoClose={2000} theme="colored" />
<ManagedModal />
</>
</ModalProvider>
</UIProvider>
</AppSettings>
<ReactQueryDevtools />
</Hydrate>
</QueryClientProvider>
)
}
type NextPageWithLayout = NextPage & {
Layout?: React.ElementType
authenticate?: boolean
}
type AppPropsWithLayout = AppProps & {
Component: NextPageWithLayout
pageProps: { dehydratedState: DehydratedState }
}
const queryCache = new QueryCache()
const mutationCache = new MutationCache()
const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {
const queryClient: QueryClient = useMemo(() => new QueryClient({ queryCache, mutationCache }), [])
const Layout = Component.Layout ?? Noop
const authProps: boolean | undefined = Component.authenticate
return (
<QueryClientProvider client={queryClient}>
<Hydrate state={pageProps.dehydratedState}>
<AppSettings>
<UIProvider>
<ModalProvider>
<>
<DefaultSeo />
{authProps ? (
<PrivateRoute authProps={authProps}>
<Layout {...pageProps}>
<Component {...pageProps} />
</Layout>
</PrivateRoute>
) : (
<Layout {...pageProps}>
<Component {...pageProps} />
</Layout>
)}
<ToastContainer autoClose={2000} theme="colored" />
<ManagedModal />
</>
</ModalProvider>
</UIProvider>
</AppSettings>
<ReactQueryDevtools />
</Hydrate>
</QueryClientProvider>
)
}
2 Replies
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
with that way i get another error
type NextPageWithLayout<T> = NextPage<T> & {
Layout?: React.ElementType
authenticate?: boolean
}
type AppPropsWithLayout<T> = AppProps<T> & {
Component: NextPageWithLayout<T>
pageProps: { dehydratedState: DehydratedState }
}
const queryCache = new QueryCache()
const mutationCache = new MutationCache()
const MyApp: NextPageWithLayout<AppPropsWithLayout<DehydratedState>> = ({
Component,
pageProps,
}: AppPropsWithLayout<DehydratedState>) => {...}
type NextPageWithLayout<T> = NextPage<T> & {
Layout?: React.ElementType
authenticate?: boolean
}
type AppPropsWithLayout<T> = AppProps<T> & {
Component: NextPageWithLayout<T>
pageProps: { dehydratedState: DehydratedState }
}
const queryCache = new QueryCache()
const mutationCache = new MutationCache()
const MyApp: NextPageWithLayout<AppPropsWithLayout<DehydratedState>> = ({
Component,
pageProps,
}: AppPropsWithLayout<DehydratedState>) => {...}
