Next.js: example with-apollo-auth is broken

[ultrox]

Bug report

Missing prop on withData

Describe the bug

A clear and concise description of what the bug is.

To Reproduce

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

1. yarn dev

1. Watch the console

on canary branch

Expected behavior

To not have a warning.

A clear and concise description of what you expected to happen.

Screenshots

System information

• Linux (Manjaro)
• Chrome
• Node [v11.15.0]

Additional context

Add any other context about the problem here.

[timneutkens]

Feel free to send a PR.

[ultrox]

@timteeling I took a peek, and I found out with-apollo from @lfades is broken as well, along with every apollo example that uses withApollo.js (it appears they share this code). Only thing is it others don't useprop-types to validate the prop.

I'm just starting with apollo so I don't understand internals very well, hopefully, I fix it down the line, when I do, I'll send PR.

[lfades]

@ultrox Not all Apollo examples have been entirely updated, but you can use with-apollo. It's working and is also updated to use hooks.

[ultrox]

@lfades Thanks! I actually used your next-with-apollo package to solve my problem. I'll update to use hooks for sure.

[lfades]

@ultrox My package doesn't work with hooks and I don't know why, I already tried 3 hours to update it without success 😢 , if you need hooks use the examples in this repo 👍

[rafaelalmeidatk]

For some reason, calling getDataFromTree with AppTree is rendering the withApollo HOC without the props that getInitialProps returns, so apolloState is undefined in this first render, and you see the warning. This only happens in the first time (the second render has everything in place) so the app still works fine, but I am not sure this is intended behavior. The other examples (with-apollo-and-redux and with-apollo-and-redux-saga) don't use AppTree so they are fine.

[tabomors]

My understanding of the issue. I might be totally wrong:(https://github.com/zeit/next.js/blob/canary/examples/with-apollo-auth/lib/withApollo.js#L20):
Warning occurs because apolloState was not passed explicitly to AppTree's props (apolloState is not a part of the appProps!). You can see how props for App is building, check the return statement of getInitalProps method.

return {
        ...appProps,
        apolloState
      }

Thus, we can't see any warnings after getDataFromTree call, because all necessary props were passed in the getInitalProps method (appProps + apolloState), the same cannot be said for getDataFromTree(<AppTree {...appProps} apolloClient={apollo} />) (apolloState will be passed after getDataFromTree call). The current workaround is to provide an additional prop for AppTree. Something like this: getDataFromTree(<AppTree {...appProps} apolloClient={apollo} /> apolloState={apollo.cache.extract()}) or just provide the defaultProps.

During my investigation i found that this code await getDataFromTree(<AppTree {...appProps} apolloClient={apollo} />) returns the content of 404 page. Could someone explain me why it happens? Thanks!

[tabomors]

@ultrox Hi! Are you working on this issue? I have just created a small patch where i possibly fixed it and moved the code to apollo hooks api. I would like to send a PR if you don't mind.

[rafaelalmeidatk]

@tabomors yes, the issue is that apolloState isn't a prop of AppTree.

Before some changes, the param of getDataFromTree was App, that is the component that withApollo receives as the first argument. Running getDataFromTree would render App and all the tree bellow it, get the result from the queries, and insert it in the apolloState prop, where it is taken on the render method of our withApollo HOC (it is only rendered after all that!).

Now we use AppTree with getDataFromTree, I don't know exactly what it does but looking at the source, it wraps the App with some contexts, which makes sense because I recall seeing something about hooks. I am not 100.000% sure, but the App that AppTree wraps seem to be the entire _app.js file, _including_ our HOC, and when we call getDataFromTree with it, it will start rendering the components searching for queries and will render our HOC that expects the apolloState to be there, but it isn't yet because it was rendered before expected.

TL;DR: AppTree renders the withApollo HOC without apolloState, so we should remove the propTypes validation because it isn't accurate (the with-apollo example doesn't have it btw) or pass an empty object to AppTree (apolloState={{}}), which is confusing and I wouldn't do.

During my investigation i found that this code await getDataFromTree() returns the content of 404 page. Could someone explain me why it happens? Thanks!

Perhaps the browser is requesting for chunks that aren't built yet or requesting a resource that doesn't even exist in the current project (for example, service workers are shared within the same domain name).

[tabomors]

@rafaelalmeidatk that is a good catch, but i'm not sure that we should remove proptypes validation because this HOC should receive this prop and it receives (but not in the first call of getDataFromTree). You can see it in the devtools:

I decided to go with defaultProps https://github.com/tabomors/next.js/commit/87046bf9d9386778fb7ac825037ecb7eda30f0fd#diff-546863eba6d13c08499d6a929a5a3231R20

[ultrox]

@rafaelalmeidatk @lfades. I thought it might be helpful to keep with-apollo & with-apollo-auth in 'sync', so I cloned latest with-apollo, and on top of it added all changes from with-apollo-auth, and finally I added all @tabomors changes converting components to work with hooks.

There was a lot of manual work involved but I sort it nicely. However, I did this in isolation.
here and I don't know how to merge it to canary without deleting commit logs.