TypeError: Cannot read property 'edges' of undefined

Examples bug report

Example name

with-react-relay-network-modern

Describe the bug

The server side render cycle seems to be unable to get the graphql data when it tries to evaluate props.viewer.allBlogPosts.edges: TypeError: Cannot read property ‘edges’ of undefined. Simply adding a check if props.viewer.allBlogPosts is defined seems to resolve this. However, during debugging, the first time this render happens, the prop seem to be valid, only the second time it yields undefined causing the error.

To Reproduce

1. Follow the installation instructions of this sample using the yarn create next-app flow
2. Follow the link to http://localhost:3000
3. Refreshing the page results in the error

Expected behavior

An error free list of Blog posts after refreshing the page

System information

• OS: Debian Linux - 4.15
• Browser: Chrome, console
• Version of Next.js: latest (from package.json)

Additional context

There seems to be another issue in this example’s README.md file: the npm / yarn setup uses the name with-react-relay-network-modern while the manual download instructions use the with-relay-modern example - confusing!

TypeError: Cannot read property 'edges' of undefined
BlogPosts
./components/BlogPosts.js:9
   6 | console.log(props.viewer.allBlogPosts)
   7 | return (
   8 |   <div>
>  9 |     <h1>Blog posts</h1>
  10 |     {props.viewer.allBlogPosts.edges.map(({ node }) => (
  11 |       <BlogPostPreview key={node.id} post={node} />
  12 |     ))}
View compiled
▼ 14 stack frames were expanded.
processChild
/with-react-relay-network-modern-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:2888:14
resolve
/with-react-relay-network-modern-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:2812:5
ReactDOMServerRenderer.render
/with-react-relay-network-modern-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:3202:22
ReactDOMServerRenderer.read
/with-react-relay-network-modern-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:3161:29
renderToString
/with-react-relay-network-modern-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:3646:27
render
/with-react-relay-network-modern-app/node_modules/next-server/dist/server/render.js:81:16
renderPage
/with-react-relay-network-modern-app/node_modules/next-server/dist/server/render.js:230:20
_callee2$
./node_modules/next/dist/pages/_document.js:4
tryCatch
/with-react-relay-network-modern-app/node_modules/regenerator-runtime/runtime.js:45:40
Generator.invoke [as _invoke]
/with-react-relay-network-modern-app/node_modules/regenerator-runtime/runtime.js:271:22
Generator.prototype.(anonymous function) [as next]
/with-react-relay-network-modern-app/node_modules/regenerator-runtime/runtime.js:97:21
asyncGeneratorStep
./node_modules/@babel/runtime-corejs2/helpers/asyncToGenerator.js:5
_next
./node_modules/@babel/runtime-corejs2/helpers/asyncToGenerator.js:27
(anonymous function)
/with-react-relay-network-modern-app/.next/server/static/development/pages/_document.js:301:7
▲ 14 stack frames were expanded.

[4levels]

Hi @kmjennison, thanks for referencing this in your project! Looks very promising to me how you setup Relay to use a different artifact directory. I’ll be giving this a try asap and give feedback here.

[kenips]

Running into same issue here going to 9.x. I don’t think it’s reasonable for a Relay application not to have generated files alongside pages. For now we are moving all the queries to another folder called page_queries, but having them in different location is definitely an inconvenience.