Property 'dehydratedState' does not exist on type '{}'

Question

I got the error Property 'dehydratedState' does not exist on type '{}' when I added a pageProps dehydratedState. 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

My Application is NextJS Typescript. Below is my configuration file

_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. Because the variable "dehydratedState" doesn't exists in pageProps object type. How to add dehydratedState to pageProps in Typescript?

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.

When you fetch the data using getStaticProps or getServerSideProps then you pass props ie may be the data from API call. Then you pass it via props to your Page Component. That props is represented as pageProps in _app.tsx .

// 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 })
}

Property 'dehydratedState' does not exist on type '{}'

Question

1 answers

solution1
0 2023-01-12 12:00:52

Property 'dehydratedState' does not exist on type '{}'

Question

1 answers

solution1 0 2023-01-12 12:00:52

solution1
0 2023-01-12 12:00:52