SSR + NextJS does not seem to Hydrate data #1661

export default function App({ Component, pageProps }) {
  // console.log here confirms dehydrated state exists and data has been populated
  return (
    <React.Fragment>
      <QueryClientProvider client={queryClient}>
        <Hydrate state={pageProps.dehydratedState}>
          <Component {...pageProps} />
        </Hydrate>
      </QueryClientProvider>
    </React.Fragment>
  );
}

export async function getServerSideProps(context) {
  const { query: { id } } = context;
  const queryClient = new QueryClient();
  
  const api = getAPI(context);
  await api.reAuthenticate();
  
  await queryClient.prefetchQuery(
    [ 'resources', id ],
    () => api.getResource(id)
  );
  
  return {
    props: { dehydratedState: dehydrate(queryClient) }
  };

}

export default function Component() {
  const router = useRouter();
  
  // user query client confirms here that dehydrated data is not present
  const { data } = useQuery(
    [ 'resources', router.query.id ],
    () => getAPI().getResource(router.query.id)
  );
  
  // breaks because data is not loaded initially
  return (
    <div>{data.id}</div>
  );
}