Relay debugging.
Extra-lightwill opened this issue · 9 comments
I'm frequently running into a situation where my application is syntactically correct but it is only rendering a blank screen (due to a Relay error).
The problem is that there's no indication of where the exact is occurring so it's very difficult to debug.
What is the best way to solve this issue (aside from rebuilding my app piece by piece until I locate the error since it's very inefficent)?
My first approach would be to look at the log, whether it actually successfully built (scroll up). After that, in the graphqlhttp setup, add after schema a function for formatError, that can help you with those kinds of ill formatted queries. Further, don't forget to install React debugging tools, they will also show you relay/graphql queries.
Apart from that you can also add logging (a PR is always appreciated).
Could you give more insight into what kind of relay errors are omitted?
Also, typing this from my phone, so description might be slightly off.
@Neitsch In answer to your question 'what relay errors are omitted?', here is an example of exactly what I'm describing: https://github.com/Extra-lightwill/graphql-sequelize-repo-test - I'd be really grateful if you could take a look!
If you start the application (npm install, npm start) and then navigate to http://localhost:4444/db-test you will see the issue - the App is rendering the main landing page (http://localhost:4444) but as soon as you navigate to the route with the Relay logic it renders nothing, but doesn't crash - no errors are shown. With a less complex setup, it might be adequate to identify the error through process of elimination, but given the fact it's Relay (which is fairly complex), it's difficult and time-consuming to deconstruct and retrace steps.
(I'm trying to implement a simple mutation using the graphql-sequelize package).
@Extra-lightwill haven't looked at your example atm.
Can you check the graphql requests in chrome dev tools these will show an error. If there are any errors on the initial route query your the page won't render.
@ncrmro ah i see, that seems to pinpoint the error which is what I was looking for - thanks!
One more thing, this seems stupid (and probably self-explanatory) but, just to be sure, what/where exactly is line/column (from the error) referring to in the application?
example error: locations :[{line: 7, column: 3}]
@Extra-lightwill tried to run the code in your repo with commit db766e1504b3ab57a0d75ce0a28b642bbbb14ee7, since that was the latest commit at the time of writing. It fails on schema.js:144
Again, I'd recommend looking into formatError, found in the docs (https://github.com/graphql/express-graphql)
@Neitsch I've added this, it works great. thanks for the advice :)
For anyone who might be experiencing the same,here's the code for including it:
https://github.com/Extra-lightwill/gql-sequelize-ver01/blob/master/server/index.js#L13 + https://github.com/Extra-lightwill/gql-sequelize-ver01/blob/master/server/index.js#L30
@Neitsch Also, pretty unrelated but in terms of SQL integration for Relay fullstack, I see you've done a dataloader PR - since SQL integration is still outstanding, maybe you'd be interested in helping me to finish my very basic application (https://github.com/Extra-lightwill/gql-sequelize-ver01) and adding dataloader logic? I'm simply looking to demonstrate a query, mutation and connection using Relay/GraphQL/MySQL (real db, not mock) + graphql-sequelize pkg. The schema/models/folder structure is pretty much set up + a very basic client-side page etc. I'm not sure there's that much work to do, but I think two minds is better than one (+ I've been trying to solve a GraphQL validation error for the last day or so!!) What do you think?
Thanks for the invite. Right now I'm fairly busy, I'll try to get around to it this weekend.
A while back I've tried a MongoDB integration (https://github.com/Neitsch/relay-fullstack/tree/mongo), but it's not great.
I was planning to stay away from sequelize, because I don't like ORMs (If you're interested http://www.yegor256.com/2014/12/01/orm-offensive-anti-pattern.html), but I might reconsider it, since it would provide a good abstraction for different database integrations.
@Neitsch Yeah exactly, I think it provides a good abstraction, especially with so many moving parts. Cool, look forward your contribution :)
@Extra-lightwill @Neitsch cool stuff, going to close for now!