类型“{}”上不存在属性“deHydratedState”

Question

类型“{}”上不存在属性“deHydratedState”

adc*_*c 9 0 configuration reactjs next.js react-query

当我添加 pageProps deHydratedState 时，出现错误Property 'deHydratedState' does not exit on type '{}' 。我试图使用 tanstack 网站https://tanstack.com/query/v4/docs/react/guides/ssr#using-Hydration中给出的文档配置 NextJs 应用程序以进行反应查询

我的应用程序是 NextJS Typescript。下面是我的配置文件

_app.tsx

// Client-side cache, shared for the whole session of the user in the browser.
const clientSideEmotionCache = createEmotionCache();

// interface MyAppProps extends AppProps {
//   emotionCache?: EmotionCache;
// }

type CustomPage = NextPage & {
  requiresAuth?: boolean;
  redirectUnauthenticatedTo?: string;
  dehydratedState?: any;
};
interface CustomAppProps extends Omit<AppProps, "Component"> {
  Component: CustomPage;
  emotionCache?: EmotionCache;

}
type ThemeMode = "light" | "dark";

const reactQueryConfig = {
  defaultOptions: {
    queries: {
      staleTime: 1 * 60 * 60 * 1000,
      cacheTime: 5 * 60 * 60 * 1000,
      refetchOnWindowFocus: false
    }
  }
}


export default function MyApp(props: CustomAppProps, theme: ThemeMode) {
  console.log("MyApp Rendered");

  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
  const [queryClient] = useState(() => new QueryClient(reactQueryConfig))
  return (
    <>

      <CacheProvider value={emotionCache}>
        <Head>
          <meta name="viewport" content="width=device-width, initial-scale=1" />
        </Head>
        <ThemeModeProvider theme={theme}>

          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
          <CssBaseline />
          <QueryClientProvider client={queryClient}>
            {/* Redux Store */}
            <Provider store={store}>
              <Hydrate state={pageProps.dehydratedState}>
                <AuthProvider>
                  <Layout>
                    <Component {...pageProps} />
                    <ToastContainer position='top-center' hideProgressBar />
                  </Layout>
                </AuthProvider>
              </Hydrate>
            </Provider>
          </QueryClientProvider>
        </ThemeModeProvider>
      </CacheProvider>
    </>
  )
}

MyApp.propTypes = {
  Component: PropTypes.elementType.isRequired,
  emotionCache: PropTypes.object,
  pageProps: PropTypes.object.isRequired,
};

Run Code Online (Sandbox Code Playgroud)

类型“{}”上不存在属性“deHydratedState”，错误来自。因为 pageProps 对象类型中不存在变量“deHydratedState”。如何将 deHydratedState 添加到 Typescript 中的 pageProps 中？

我厌倦了谷歌和搜索这个错误的解决方案。我没有找到。

Answer 1

Art*_*hle 5

这应该有效，至少对于 Next.js 13.1.6 来说是这样。尝试用作AppPropsGeneric ，对我来说适用于 Next.js 13.1.6

我刚刚从这里复制了解决方案。

我认为通过这个计划，您可以根据自己的需要进行调整。祝你好运


// _app.tsx

import type { AppProps } from "next/app";
import { useState } from "react";
import {Hydrate,QueryClient,QueryClientProvider,type DehydratedState} from "react-query";

function App({ Component,pageProps,}: AppProps<{ dehydratedState: DehydratedState }>) {
  const [queryClient] = useState(() => new QueryClient());

  return (
    <QueryClientProvider client={queryClient}>
      <Hydrate state={pageProps.dehydratedState}>
        <Component {...pageProps} />
      </Hydrate>
    </QueryClientProvider>
  );
}

export default App;

Run Code Online (Sandbox Code Playgroud)

归档时间：	3 年前
查看次数：	1249 次
最近记录：	2 年，10 月前