Integration with _app.js

[jgoux]

Hello,

the doc seems to indicate that it's possible to wrap the App (from _app.js) with withUrqlClient if we don't mind losing static optimization, which is my case.

I just tried and I get this error :

Error: ReactDOMServer does not yet support Suspense.
[0]     at ReactDOMServerRenderer.read (/home/jgoux/Projects/oss/typezafe/node_modules/react-dom/cjs/react-dom-server.node.development.js:3550:25)
[0]     at renderToString (/home/jgoux/Projects/oss/typezafe/node_modules/react-dom/cjs/react-dom-server.node.development.js:4245:27)
[0]     at render (/home/jgoux/Projects/oss/typezafe/node_modules/next/dist/next-server/server/render.js:82:16)
[0]     at Object.renderPage (/home/jgoux/Projects/oss/typezafe/node_modules/next/dist/next-server/server/render.js:323:20)
[0]     at /home/jgoux/Projects/oss/typezafe/.next/server/static/development/pages/_document.js:795:21
[0]     at Generator.next (<anonymous>)
[0]     at asyncGeneratorStep (/home/jgoux/Projects/oss/typezafe/.next/server/static/development/pages/_document.js:239:24)
[0]     at _next (/home/jgoux/Projects/oss/typezafe/.next/server/static/development/pages/_document.js:261:9)
[0]     at /home/jgoux/Projects/oss/typezafe/.next/server/static/development/pages/_document.js:268:7
[0]     at new Promise (<anonymous>)
[0]     at new F (/home/jgoux/Projects/oss/typezafe/node_modules/core-js/library/modules/_export.js:36:28)
[0]     at /home/jgoux/Projects/oss/typezafe/.next/server/static/development/pages/_document.js:257:12
[0]     at Function.getInitialProps (/home/jgoux/Projects/oss/typezafe/.next/server/static/development/pages/_document.js:805:7)
[0]     at Object.loadGetInitialProps (/home/jgoux/Projects/oss/typezafe/node_modules/next/dist/next-server/lib/utils.js:58:29)
[0]     at Object.renderToHTML (/home/jgoux/Projects/oss/typezafe/node_modules/next/dist/next-server/server/render.js:328:36)
[0]     at runMicrotasks (<anonymous>)

Everything works fine when I wrap my pages instead of _app! 👍

[parkerziegler]

🤔 Hmmm interesting. I'll spin up a CodeSandbox using _app.js and see if I can get a reproduction this weekend.

[nghiepdev]

Same issue. @parkerziegler You need download it from CodeSandbox , you will see.

[nghiepdev]

If we upgrades urql@1.7.0 and next-urql@0.2.2 to latest then we will be another problem

Cannot read property 'replace' of undefined
TypeError: Cannot read property 'replace' of undefined
    at /**/node_modules/isomorphic-unfetch/index.js:3:36

[parkerziegler]

@nghiepit yep I can repro the above. I've hit this same error before, but I can't quite remember what the fix was. Doing some more digging now. Thanks all for being patient, I've had other things on my plate recently but I hope to be able to figure this out now with some dedicated time for it.

[parkerziegler]

So some progress! After digging around in node_modules, logging some things out, and examining the stack trace, it's clear that when using _app.js the first call to executeFetch here: https://github.com/FormidableLabs/urql/blob/99375ff1ce418dfd8d28347695ee29c5cbde6f5f/src/exchanges/fetch.ts#L105 is receiving an operation with no url in its context:

operation {
  key: 2072880159,
  query: {
    kind: 'Document',
    definitions: [ [Object] ],
    loc: { start: 0, end: 190 },
    __key: 407398015 },
  variables: { first: 20 },
  operationName: 'query',
  context: {
    url: undefined, // Yikes, this is coming in as undefined.
    fetchOptions: undefined,
    fetch: undefined,
    requestPolicy: 'cache-first',
    pollInterval: undefined,
    meta: {
      cacheOutcome: 'miss'
    }
  }
}

I'm not positive why that it is. I'll do a little more digging and consult with some folks here, since this seems like pretty strange behavior.

[BjoernRave]

this also happens to me with the nextjs example from the urql repo

[parkerziegler]

Yeah, I'm thinking there may be some discrepancies between how Next handles getInitialProps calls for pages and components, and how it handles it for _app.js and _document.js. _app.js getInitialProps apparently gets called before any other getInitialProps, even those on _document.js: https://spectrum.chat/next-js/general/app-js-getinitialprops-explained~539bdc35-a8b0-4dfa-972b-0dd9a0f1ac67 It could also be an issue with react-ssr-prepass and latest React: FormidableLabs/react-ssr-prepass#28

[parkerziegler]

Should be released in v0.2.3. Let me know if you're still experiencing issues 😄 Cheers!