blitz-js / legacy-framework

MIT License
3 stars 2 forks source link

dehydrateState does not apply server side props #54

Closed clgeoio closed 3 years ago

clgeoio commented 3 years ago

What is the problem?

The Prefetching suggests that if set up correctly, adding dehydratedState should render the result of a query in the server-side render.

The test case for the dehydrated state is invalid as this line should not waitForElementByCss, but instead should expect that this element is present immediately as a result of the SSR.

If the above line is removed, the test fails, when running the test with the browser enabled, the Suspense fallback text can be seen as the server-side render result.

Paste all your error logs here:

N/A

Paste all relevant code snippets here:

import getDate from "app/queries/getDate"
import {
  dehydrate,
  getQueryKey,
  GetServerSideProps,
  invokeWithMiddleware,
  QueryClient,
  useQuery,
} from "blitz"
import {Suspense} from "react"

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const queryClient = new QueryClient()
  const queryKey = getQueryKey(getDate, null)
  await queryClient.prefetchQuery(queryKey, () => invokeWithMiddleware(getDate, undefined, ctx))

  return {
    props: {
      dehydratedState: dehydrate(queryClient),
    },
  }
}

function Content() {
  const [date] = useQuery(getDate, undefined)
  return <p id="content">date is Date: {"" + (date instanceof Date)}</p>
}

function Page() {
  return (
    <Suspense fallback="Loading ...">
      <Content />
    </Suspense>
  )
}

export default Page

What are detailed steps to reproduce this?

N/A

Run blitz -v and paste the output here:

macOS Big Sur | darwin-x64 | Node: v14.16.1

blitz: 0.38.5 (local)

  Package manager: yarn
  System:
    OS: macOS 11.5
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Memory: 442.04 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.16.1 - /var/folders/hl/wl16kswj4dd9jvkvz2ykm16c0000gn/T/yarn--1627293289668-0.31100445211523553/node
    Yarn: 1.22.10 - /var/folders/hl/wl16kswj4dd9jvkvz2ykm16c0000gn/T/yarn--1627293289668-0.31100445211523553/yarn
    npm: 6.14.12 - ~/.nvm/versions/node/v14.16.1/bin/npm
    Watchman: Not Found
  npmPackages:
    @prisma/client: 2.26.0 => 2.26.0
    blitz: 0.38.5 => 0.38.5
    prisma: 2.26.0 => 2.26.0
    react: alpha => 18.0.0-alpha-cb8afda18-20210708
    react-dom: alpha => 18.0.0-alpha-cb8afda18-20210708
    typescript: ~4.3 => 4.3.5

Please include below any other applicable logs and screenshots that show your problem:

No response

I have reached out to @flybayer on Discord and raised this issue as a result of the discussion

clgeoio commented 3 years ago

I was looking into this a bit, managed to get the test working with some changes: https://github.com/blitz-js/blitz/pull/2617

However, it looks to revert the change: https://github.com/blitz-js/blitz/pull/2512