blitz-js / legacy-framework

MIT License
3 stars 2 forks source link

React query erroneously caches initial data during SSR #324

Closed sam3d closed 3 years ago

sam3d commented 3 years ago

What is the problem?

Potentially related to https://github.com/tannerlinsley/react-query/issues/70, React Query seems to be caching the value of initialData when server rendering

What are detailed steps to reproduce this?

https://github.com/sam3d/blitz-query-repro

  1. On the above reproduction repo, install the dependencies and run yarn dev
  2. Load the page in any web browser
  3. Refresh the page so that it loads again

The expected result is that the server rendered page will output the same value for both the query and initialData passed through props (as that would imply React Query is using the initialData each time). However, on the second page load, the server rendered and client rendered value disagree on the data from React Query. It appears as though the value from React Query on the server is using an earlier version of the data object from before the lifetime of the current request.

Run blitz -v and paste the output here:

macOS Big Sur | darwin-arm64 | Node: v16.6.2

blitz: 0.39.0 (global)
blitz: 0.39.0 (local)

  Package manager: yarn 
  System:
    OS: macOS 11.5.1
    CPU: (8) arm64 Apple M1
    Memory: 116.72 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.6.2 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.20.3 - /usr/local/bin/npm
    Watchman: Not Found
  npmPackages:
    @prisma/client: 2.29.1 => 2.29.1 
    blitz: ^0.39.0 => 0.39.0 
    prisma: 2.29.1 => 2.29.1 
    react: alpha => 18.0.0-alpha-b54f36f2b-20210803 
    react-dom: alpha => 18.0.0-alpha-b54f36f2b-20210803 
    typescript: ~4.3 => 4.3.5 

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

It seems as though both the server and the browser agree on what serverside props should be, which makes sense as both of those are strictly per request

However, while the browser's React Query instance correctly populates with the query data object with initialData, the React Query instance on the server (during rendering) appears to ignore initialData and falls back to an earlier version of that data before the server render, so it really does feel like it's caching it

This in itself is weird as I'm pretty sure React Query (per the above linked issue on RQ) has checks to see whether or not it's running on the server (typeof window === 'undefined') and completely disables the cache, so I don't know where this behaviour would be happening

image

image

image

flybayer commented 3 years ago

Thanks @sam3d. Open for someone to work on!

(@Skn0tt maybe you can take this one up if you have time.)