Next.js: with-apollo-app rendering twice

[Enalmada]

Examples bug report

Example name

with-apollo-app

Describe the bug

PostList is rendering twice

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Edit components/PostList.js and add console.log at the top of the render function
2. Refresh screen
3. Note that console output prints twice

Expected behavior

Console log output only shows once.

System information

• OS: Windows 10
• Browser: Chrome
• Version of Next.js: 6.1.1

Additional context

I am completely new to react/next/apollo and trying to learn how to do things right from the wonderful examples. If you could please take a moment to fix the example so that it only renders once, that would make new users much more comfortable knowing they are following the right pattern. Thank you very much for your help.

[timneutkens]

If you could please take a moment to fix the example so that it only renders once, that would make new users much more comfortable knowing they are following the right pattern.

There's nothing to fix here, it's the way Apollo works:

https://www.apollographql.com/docs/react/features/server-side-rendering.html#getDataFromTree

Apollo recursively traverses the React render tree looking for Apollo query components. When it has done that, it fetches all these queries and then passes the result to a cache. This cache is then used to render the data on the server side (another React render). This is the reason you're seeing 2 renders being executed.

Thanks for taking the time to try and improve the example for everyone though 🙏🙌 Feel free to send a pull request with this additional context to the example readme

[Enalmada]

Thank you so much for taking the time to confirm that. When I know next/apollo better I am sure I will do a facepalm for asking that. Your confirmation of that really helps me feel more comfortable getting started now with next!

[timneutkens]

:pray: