(next-urql) - Node crashes with { ssr: true }

[longfellowone]

urql version & exchanges:

  "dependencies": {
    "@urql/exchange-graphcache": "^4.3.6",
    "@urql/exchange-refocus": "^0.2.5",
    "graphql": "^15.8.0",
    "next": "^12.1.0",
    "next-urql": "^3.3.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-is": "^17.0.2",
    "urql": "^2.1.3"
  },

Steps to reproduce

1. git clone https://github.com/longfellowone/tools.git
2. cd tools/web
3. git checkout bug
4. npm install
5. npm run dev
6. Navigate to http://localhost:3000/
7. Page should work load ok
8. In tools/web/components/EmployeeOption.tsx uncomment line 18 // const [{ data }] = useEmployeeListQuery()
9. Page does not load / Node crashes

Might have something to do with useEmployeeListQuery() needing to be deduped as its called within a loop

Expected behavior

Should work

Actual behavior

Page does not load / Crash

[JoviDeCroock]

We often ask for a minimal reproducible example as we can't really go through the full code of everyone 😅 hence I made a small repro already here and will try to shed some light on the difference betweeen ssr: true and not.

As you might have noticed the new next method getXProps are happening outside of React land which makes us do a lot of passing stuff through to each other, this was not always the case. Before this getInitialProps was the way to go, this method had access to the React tree and we can invoke react-ssr-prepass which allows us to resolve all the useQuery calls. So this option is basically a more automated way but does not protect the user of making unintentional waterfalls

EDIT: I tried your repo and it just works for me, might be your node version

$ node -v
v16.7.0

[longfellowone]

my node version is 16.14.0

I just tried with 16.7.0 and am getting the same results. Did you do the step below?

8. In tools/web/components/EmployeeOption.tsx uncomment line 18 // const [{ data }] = useEmployeeListQuery()

useEmployeeListQuery() is generated from graphql-code-generator if you use const [{ data }] = useQuery({ query: EmployeeListDocument }) in its place I still get the same result. (node hangs, and page does not load)

I also tried deploying to vercel and the page will not load. the only difference is commenting/uncommenting const [{ data }] = useQuery({ query: EmployeeListDocument }). I tried to slim down what I could to reproduce the issue

[JoviDeCroock]

Well I think it is because as alluded to you are causing a 38 request waterfall and afaik next api functions (ssr) times out in 15 seconds 😅

EDIT: hmm looking into it as essentially these should be identical queries... hard to dive into the project as there's some redundant logic too 😅 this seems to be caused by the new use-sync-external-store this works on the pre 2.1.0 version of urql

[longfellowone]

Well I think it is because as alluded to you are causing a 38 request waterfall and afaik next api functions (ssr) times out in 15 seconds 😅

EDIT: hmm looking into it as essentially these should be identical queries... hard to dive into the project as there's some redundant logic too 😅 this seems to be caused by the new use-sync-external-store

Correct, they are all duplicate queries, so should it not be deduped? or does the dedup exchange have no effect with ssr?

redundant logic? sorry I am still new to this 😅 I'm open to suggestions

[JoviDeCroock]

My best guess is currently that in prepass for concurrently running queries this line https://github.com/FormidableLabs/urql/blob/main/packages/react-urql/src/hooks/useQuery.ts#L84 should move into the scope of getSnapshot

EDIT: yup that's it