Hacker News Clone Using GraphQL and React • Hacker News Board

Re: Hacker News Clone Using GraphQL and React

#151

Post by elnygren » Mon, Oct 02, 2017, 1:08 PM UTC

aocvr wrote: post #126

elnygren wrote: post #117

GraphQL is a very nice spec for building APIs that have many sources of data and then building a modern frontend with proper caching etc. on top of it. The ugliest part of it, or one requiring most hacky solutions, is optimising queries. For example, there are some nasty N+1 traps or "oops-I-joined-your-entire-database" problems when using SQL. JoinMonster helps with this, but it is a bit too much of a "full solution…

> You'll also lose a lot of control over your queries which was a big reason for me to move from Django/Rails/etc. style tools to trying out GraphQL. For restricting queries, an option is using persisted queries (e.g. https://dev-blog.apollodata.com/persisted-graphql-queries-wi... ). The idea is nice, having full control in development while locking down allowed queries in production. You'd still have to deal with th…

Actually, my point was about losing control over queries when using JoinMonster (say, you wanna do something fancy like Postgres' to_json, array_agg that JoinMonster doesn't support).

However, I totally understand the confusion in my sentence and actually this thing you're talking about is also useful to me :)

Re: Hacker News Clone Using GraphQL and React

#152

Post by elnygren » Mon, Oct 02, 2017, 1:10 PM UTC

arianvanp wrote: post #124

elnygren wrote: post #117

GraphQL is a very nice spec for building APIs that have many sources of data and then building a modern frontend with proper caching etc. on top of it. The ugliest part of it, or one requiring most hacky solutions, is optimising queries. For example, there are some nasty N+1 traps or "oops-I-joined-your-entire-database" problems when using SQL. JoinMonster helps with this, but it is a bit too much of a "full solution…

Can't you translate GraphQL queries to Joinmonster/Dataloader/Haxl calls? It's up to the implementor of the GraphQL backends layer to build these optimisations, and you could reuse those libraries for that. Haxl seems particularly suited for this (I think it's the same thing as Dataloader, both from facebook?) as it can efficiently batch and cache queries to multiple sources at the same time. It seems like a good lay…

It's certainly doable and has been done. However, it's not as pretty as the rest of GraphQL and there's still a lot of work to be done.

And comparing to something like Django/Rails - there's a lot more DIY involved.

Re: Hacker News Clone Using GraphQL and React

#153

Post by user5994461 » Mon, Oct 02, 2017, 1:20 PM UTC

SirHound wrote: post #120

techaddict009 wrote: post #115

Earlier quoted context omitted.

This is exactly what I feel. I get heavy request to build projects in React where their use case is pretty simple even wordpress can suffice.

Unless you're using a pre-made template I don't see how a WordPress installation is any simpler than an SSR React site.

Wordpress is free, takes unlimited traffic and comes with a lot of amazon templates ready to use in one click.

Re: Hacker News Clone Using GraphQL and React

#154

Post by sorenbs » Mon, Oct 02, 2017, 1:22 PM UTC

Hacker News is a really nice example when learning a new technology. It's simple enough that you spend very little time explaining the domain but complex enough that you can demonstrate how to deal with some of the more thorny issues that the technology is designed to address.

https://www.howtographql.com/ is a very comprehensive tutorial demonstrating how to use GraphQL with different frontend (Vue, Ember, React) and backend (js, java, elixir, python, ruby, graphcool) technologies.

The end result is not as feature-complete as this entry though as the main focus is on learning the technologies.

Re: Hacker News Clone Using GraphQL and React

#155

Post by maktouch » Mon, Oct 02, 2017, 1:33 PM UTC

jcun4128 wrote: post #129

maktouch wrote: post #127

I really like the Apollo stack, but if you're thinking of using it in production right now, you should wait a little! There's a massive bug where if your graphql outputs 1 small error, the whole component does not get loaded. Imagine a components that lists a bunch of items. If 19 returned correctly but 1 has an error, the "data" prop doesn't get passed, all you receive back is the error prop. It's pretty shitty for…

Do you know which one is bad? Then requery and exclude the bad one?

The kind of query where it fails (and where it especially hurts) is queries like `getLatestNotifications`. It would be a lot of cruft added to prevent this kind of bugs.

So, yes, you know which one is bad, but it's not a query that's failing, it's something inside the result.

Re: Hacker News Clone Using GraphQL and React

#156

Post by Bromskloss » Mon, Oct 02, 2017, 1:45 PM UTC

hellofunk wrote: post #85

Caveman_Coder wrote: post #6

Duplicate of the following... - https://news.ycombinator.com/item?id=15297922 - https://news.ycombinator.com/item?id=15134949 EDIT: Not sure why my comment is being downvoted for pointing out that this exact hobby project has been continually posted in the last couple of months.

> Not sure why my comment is being downvoted Because of the following reasons: 1) There's the subtle implication in comments like yours that this posting is not worthy because it was posted before. 2) It doesn't matter. Stuff is re-posted all the time, sometimes simultaneously. That's just the way the web works. 3) It's not your job to moderate or research this site for others.

> There's the subtle implication in comments like yours that this posting is not worthy because it was posted before.

Well, it _is_ less worthy if it has been posted before, isn't it?

> It doesn't matter. Stuff is re-posted all the time, sometimes simultaneously. That's just the way the web works.

Being common doesn't make it desirable.

> It's not your job to moderate or research this site for others.

Is it a bad deed if it's not "your job"? In my eyes, someone needs to do it (and it would be great if we had mods to do it instead).

Re: Hacker News Clone Using GraphQL and React

#157

Post by rthomas6 » Mon, Oct 02, 2017, 1:49 PM UTC

As someone who is trying to learn modern web development, things like this make me feel overwhelmed. So many tools to learn and integrate! Why these tools over other ones? So many tools to choose from on every level of the stack!

What the hell is the "right way" to build a web app nowadays? That's what I want to learn. I've figured out how to put up a static page pretty well, but this is so different. Is this site what is best practice now? Or is it one of many choices?

Re: Hacker News Clone Using GraphQL and React

#158

Post by rthomas6 » Mon, Oct 02, 2017, 1:51 PM UTC

sdfjkl wrote: post #111

The original HN is one of the fastest loading sites I regularly visit. You fixed that pretty good. Disclaimer: I'm on terrible internet connections most of the time and it really makes you hate all this modern web crud. Often "dynamic" sites don't load at all because while the initial HTTP request eventually gets through, one or more of the following XMLHttpRequests or whatever fail, and a lot of the time there is no…

Is this because it's a quickly made demo vs a refined production-ready site, or is it a direct result of the way the sites are made? Can you use GraphQL, React, Express, etc. and make a very fast website?

Re: Hacker News Clone Using GraphQL and React

#159

Post by zero_shift » Mon, Oct 02, 2017, 1:54 PM UTC

rthomas6 wrote: post #158

sdfjkl wrote: post #111

The original HN is one of the fastest loading sites I regularly visit. You fixed that pretty good. Disclaimer: I'm on terrible internet connections most of the time and it really makes you hate all this modern web crud. Often "dynamic" sites don't load at all because while the initial HTTP request eventually gets through, one or more of the following XMLHttpRequests or whatever fail, and a lot of the time there is no…

Is this because it's a quickly made demo vs a refined production-ready site, or is it a direct result of the way the sites are made? Can you use GraphQL, React, Express, etc. and make a very fast website?

You can, but it's a lot harder than building a very fast website that just uses Express to render Pug templates and that caches HTML in a CDN.

Re: Hacker News Clone Using GraphQL and React

#160

Post by ccalvert » Mon, Oct 02, 2017, 1:56 PM UTC

zero_shift wrote: post #112

I feel a little mixed about projects like this. It's fantastic to see people share their knowledge, and turn theory into practice. It's very easy to spout on about best practices and good ideas without demonstrating how they can be implemented in the real world. And this application does demonstrate some good ideas. ...But some bad ideas also. I think one problem we have in the frontend world is that developers of ve…

As a teacher, I appreciate projects like this. The folks in my classes are "amateurs" learning to code. I can, and do, teach them quick ways to build websites, but that won't help them get jobs in the industry. Many people can build sites with those tools. Companies that hire developers are looking for more advanced skills, and examples like this help (hard working) students learn how to use them. It takes my students at least two quarters to get productive with a tool like React, but once they know it, they have a valuable skill and have hopefully learned some important lessons about the proper way to create a robust architecture.