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

Question

当我添加 pageProps dehydratedState 时，我收到错误Property 'dehydratedState' does not exist on type '{}' 。 我正在尝试使用 tanstack 网站https://tanstack.com/query/v4/docs/react/guides/ssr#using-hydration中提供的文档为 React Query 配置 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,
};

类型“{}”上不存在属性“dehydratedState”错误来自。 因为 pageProps object 类型中不存在变量“dehydratedState”。 Typescript中如何给pageProps添加dehydratedState？

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

Answer 1

您收到错误是因为您没有从页面文件中传递pageProps 。

当您使用getStaticProps或getServerSideProps获取数据时，您将传递道具，即可能是来自 API 调用的数据。 然后你通过道具将它传递给你的页面组件。 该道具在_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