Skip to content

Conversation

@fkoessler
Copy link

Hello Robin,

As requested, this is a PR to have the project use client only routes for private portions of the site and use @reach/router for navigation as recommanded in the GatsbyJS docs.

Also I added two small fixes:

  • deleted the App component which seem to be unused
  • unsubscribe from firebase listener when unmounting component

Let me know what you think.

@rwieruch
Copy link
Member

Hi @fkoessler thanks for your work. I checked out the branch. Everything works like expected. However, there is one error showing up in the developer console which isn't there for the master version. Do you know anything about it?

Uncaught (in promise) Error: permission_denied at /users: Client doesn't have permission to access the desired data. at errorForServerCode (Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/@firebase/database/dist/index.cjs.js:647) at onComplete (Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/@firebase/database/dist/index.cjs.js:9114) at Object.eval [as onComplete] (Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/@firebase/database/dist/index.cjs.js:12681) at eval (Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/@firebase/database/dist/index.cjs.js:11797) at PersistentConnection.onDataMessage_ (Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/@firebase/database/dist/index.cjs.js:12052) at Connection.onDataMessage_ (Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/@firebase/database/dist/index.cjs.js:11337) at Connection.onPrimaryMessageReceived_ (Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/@firebase/database/dist/index.cjs.js:11331) at WebSocketConnection.eval [as onMessage] (Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/@firebase/database/dist/index.cjs.js:11232) at WebSocketConnection.appendFrame_ (Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/@firebase/database/dist/index.cjs.js:10837) at WebSocketConnection.handleIncomingFrame (Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/@firebase/database/dist/index.cjs.js:10887) at WebSocket.mySock.onmessage (Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/@firebase/database/dist/index.cjs.js:10784) errorForServerCode @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/@firebase/database/dist/index.cjs.js:647 onComplete @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/@firebase/database/dist/index.cjs.js:9114 (anonymous) @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/@firebase/database/dist/index.cjs.js:12681 (anonymous) @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/@firebase/database/dist/index.cjs.js:11797 PersistentConnection.onDataMessage_ @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/@firebase/database/dist/index.cjs.js:12052 Connection.onDataMessage_ @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/@firebase/database/dist/index.cjs.js:11337 Connection.onPrimaryMessageReceived_ @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/@firebase/database/dist/index.cjs.js:11331 (anonymous) @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/@firebase/database/dist/index.cjs.js:11232 WebSocketConnection.appendFrame_ @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/@firebase/database/dist/index.cjs.js:10837 WebSocketConnection.handleIncomingFrame @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/@firebase/database/dist/index.cjs.js:10887 mySock.onmessage @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/@firebase/database/dist/index.cjs.js:10784 Promise.then (async) componentDidMount @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/src/components/Home/index.js:64 componentDidMount @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/react-hot-loader/dist/react-hot-loader.development.js:570 commitLifeCycles @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/react-dom/cjs/react-dom.development.js:14685 commitAllLifeCycles @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/react-dom/cjs/react-dom.development.js:15905 callCallback @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/react-dom/cjs/react-dom.development.js:145 invokeGuardedCallbackDev @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/react-dom/cjs/react-dom.development.js:195 invokeGuardedCallback @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/react-dom/cjs/react-dom.development.js:248 commitRoot @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/react-dom/cjs/react-dom.development.js:16075 completeRoot @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/react-dom/cjs/react-dom.development.js:17463 performWorkOnRoot @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/react-dom/cjs/react-dom.development.js:17391 performWork @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/react-dom/cjs/react-dom.development.js:17295 performSyncWork @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/react-dom/cjs/react-dom.development.js:17267 requestWork @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/react-dom/cjs/react-dom.development.js:17155 scheduleWork @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/react-dom/cjs/react-dom.development.js:16949 enqueueSetState @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/react-dom/cjs/react-dom.development.js:11623 Component.setState @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/react/cjs/react.development.js:413 (anonymous) @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/@reach/router/es/index.js:143 unstable_deferredUpdates @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/@reach/router/es/index.js:59 (anonymous) @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/@reach/router/es/index.js:141 Promise.then (async) (anonymous) @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/@reach/router/es/index.js:140 (anonymous) @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/@reach/router/es/lib/history.js:77 navigate @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/@reach/router/es/lib/history.js:76 onClick @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/@reach/router/es/index.js:493 callCallback @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/react-dom/cjs/react-dom.development.js:145 invokeGuardedCallbackDev @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/react-dom/cjs/react-dom.development.js:195 invokeGuardedCallback @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/react-dom/cjs/react-dom.development.js:248 invokeGuardedCallbackAndCatchFirstError @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/react-dom/cjs/react-dom.development.js:262 executeDispatch @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/react-dom/cjs/react-dom.development.js:593 executeDispatchesInOrder @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/react-dom/cjs/react-dom.development.js:615 executeDispatchesAndRelease @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/react-dom/cjs/react-dom.development.js:713 executeDispatchesAndReleaseTopLevel @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/react-dom/cjs/react-dom.development.js:724 forEachAccumulated @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/react-dom/cjs/react-dom.development.js:694 runEventsInBatch @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/react-dom/cjs/react-dom.development.js:855 runExtractedEventsInBatch @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/react-dom/cjs/react-dom.development.js:864 handleTopLevel @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/react-dom/cjs/react-dom.development.js:4857 batchedUpdates$1 @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/react-dom/cjs/react-dom.development.js:17498 batchedUpdates @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/react-dom/cjs/react-dom.development.js:2189 dispatchEvent @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/react-dom/cjs/react-dom.development.js:4936 interactiveUpdates$1 @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/react-dom/cjs/react-dom.development.js:17553 interactiveUpdates @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/react-dom/cjs/react-dom.development.js:2208 dispatchInteractiveEvent @ Users/mydspr/Developer/Repos/gatsby-firebase-authentication/node_modules/react-dom/cjs/react-dom.development.js:4913 16:00:20.736 

The other warning about "can't set state on unmounted component" happened before, but in this version it seems to happen more often than before. I am not sure why that's the case.

Do you think it's better in general to have everything handled by the client routes now? It seemed to work perfectly with the server-side handled routes before. Maybe I would add this PR as reference to the README.md but keep the original version for now. What do you think?

@fkoessler
Copy link
Author

Hello @rwieruch,

The permission denied error happens when you try a read / write on the database where you don't have permission.
Did you set your firebase credentials in firebase.js and check your database rules?
I am not having this error.

Concerning the warning can't set state on unmounted component.
I think this is caused when leaving the homepage before the promise returned by onceGetUsers gets resolved. Does that make sense?
I just pushed a commit to fix this. There might be more similar cases to fix.

I don't think client routes are inherently better, I think it's a design choice.
Besides, I don't have much experience yet to have a strong opinion on those matters.

Feel free to merge the PR or not, both are fine with me :)

@rwieruch
Copy link
Member

rwieruch commented Oct 1, 2018

Hi @fkoessler thanks for your input! 💯 I played a bit more around with Gatsby over the weekend and had to refactor the project (#11), because gatsby build didn't work with Firebase. Now it should work, because firebase gets lazy imported. Not sure whether this was a problem in your PR too.

Regarding the client/server routes, I would keep them as server routes now. Both versions work and I would keeo your PR as reference to it. However, since Gatsby's primary goal is to work with server routes, I would keep it that way for now.

Thanks again for your input. Helped me a lot to figure things out :)

PS.: I have seen that the App component I had before was redundant, because it was actually never used.

@rwieruch rwieruch closed this Oct 1, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

2 participants