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

Question

I got the error Property 'dehydratedState' does not exist on type '{}' when I added a pageProps dehydratedState.当我添加 pageProps dehydratedState 时，我收到错误Property 'dehydratedState' does not exist on type '{}' 。 I was trying to configure the NextJs app for react Query using the documentation given in tanstack website https://tanstack.com/query/v4/docs/react/guides/ssr#using-hydration我正在尝试使用 tanstack 网站https://tanstack.com/query/v4/docs/react/guides/ssr#using-hydration中提供的文档为 React Query 配置 NextJs 应用程序

My Application is NextJS Typescript. Below is my configuration file我的应用程序是 NextJS Typescript。下面是我的配置文件

_app.tsx _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,
};

Property 'dehydratedState' does not exist on type '{}' Error is coming from.类型“{}”上不存在属性“dehydratedState”错误来自。 Because the variable "dehydratedState" doesn't exists in pageProps object type.因为 pageProps object 类型中不存在变量“dehydratedState”。 How to add dehydratedState to pageProps in Typescript? Typescript中如何给pageProps添加dehydratedState？

I tired to google and seach for this error solution.我厌倦了谷歌和搜索这个错误解决方案。 I did not found.我没有找到。

Answer 1

You are getting the error because you didn't pass the pageProps from your page file.您收到错误是因为您没有从页面文件中传递pageProps 。

When you fetch the data using getStaticProps or getServerSideProps then you pass props ie may be the data from API call.当您使用getStaticProps或getServerSideProps获取数据时，您将传递道具，即可能是来自 API 调用的数据。 Then you pass it via props to your Page Component.然后你通过道具将它传递给你的页面组件。 That props is represented as pageProps in _app.tsx .该道具在_app.tsx 中表示为 pageProps pageProps

// pages/posts.tsx
import { dehydrate, QueryClient, useQuery } from '@tanstack/react-query';

export async function getStaticProps() {
  const queryClient = new QueryClient()

  await queryClient.prefetchQuery(['posts'], getPosts)

  return {
    props: {
      // this was passed as pageProps in the _app.jsx
      dehydratedState: dehydrate(queryClient),
    },
  }
}

function Posts() {
  const { data } = useQuery({ queryKey: ['posts'], queryFn: getPosts })

  const { data: otherData } = useQuery({ queryKey: ['posts-2'], queryFn: getPosts })
}

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

问题描述

1 个解决方案

解决方案1
0 2023-01-12 12:00:52

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

问题描述

1 个解决方案

解决方案1 0 2023-01-12 12:00:52

解决方案1
0 2023-01-12 12:00:52