Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Hacker News Clone Using GraphQL and React

github.com

Post reply on HN
Print view View original

81–90 of 187 posts

Re: Hacker News Clone Using GraphQL and React

#81

Post by chrisco255 »

whalesalad wrote: post #65

I really dislike the tendency to couple graphql queries with components. Is this idiomatic? If you are comfortable with side effects in your presentation layer i’d much rather manage data at a higher level and have a component request the data it needs from that. As opposed to actually making HTTP requests. What happens when two components used in two totally different areas of a single page need common data? Relying…

Apollo manages your data store automatically. It uses Redux internally. Because Apollo wraps the queries and mutations, it smartly caches data and only fetches the minimal amount necessary to build the page. Apollo reduces the amount of Redux CRUD boiler plate dramatically (by as much as 2/3 or more).

There are no traps there, everything is configurable. The documentation is really clean. Highly recommend Apollo.

Once you have this stack wired up, it empowers you to be quite nimble with your development.

Re: Hacker News Clone Using GraphQL and React

#82

Post by 10-6 »

hasenj wrote: post #77

Clicking on comments results in a weird flicker effect where the page appears empty for a split second before being filled with content. Also, the comment collapse button doesn't seem to work. Is there really any benefit to implement HN as a JS driven web application? IMO, Hacker News is simple enough such that implementing it as JS-Driven app actually makes it slower than the original.

The weird flicker/initial empty page (might) be because all the components are being mounted synchronously on page load. The new version of react introduced async rendering of new components: https://medium.com/behind-the-screens/dont-load-all-your-web...

Re: Hacker News Clone Using GraphQL and React

#85

Post by hellofunk »

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.

Re: Hacker News Clone Using GraphQL and React

#86

Post by hellofunk »

10-6 wrote: post #82
hasenj wrote: post #77

Clicking on comments results in a weird flicker effect where the page appears empty for a split second before being filled with content. Also, the comment collapse button doesn't seem to work. Is there really any benefit to implement HN as a JS driven web application? IMO, Hacker News is simple enough such that implementing it as JS-Driven app actually makes it slower than the original.

The weird flicker/initial empty page (might) be because all the components are being mounted synchronously on page load. The new version of react introduced async rendering of new components: https://medium.com/behind-the-screens/dont-load-all-your-web...

Are you sure it is not due to the fetching of content form the server rather than the UI synchronicity? I'm quite certain it is just latency for the download. The components might be fetching that data during their mounting if the architecture was set up that way, but the actual mounting shouldn't be the cause; React's UI is much faster than latency caused by that alone.

It would be better if the components showed a waiting indicator during the download, if the components are responsible for the download. Alternately, the page itself could show that loader before mounting its sub components. Actually, there are many "alternately"s because frankly this site's approach isn't ideal.

Re: Hacker News Clone Using GraphQL and React

#87

Post by velmu »

md224 wrote: post #84

I'm curious if we'll see a highly-opinionated framework arise that encapsulates all of the technologies used here under the umbrella of a single configurable library... or does that already exist?

Is like to see this as well, because I like core decisions and the boilerplate side by a framework. I've done some exploration here.

Next.js is a framework that does roughly all of this, except it's currently missing (or not making) decisions for you regarding GraphQL as a data layer. More information here: https://malloc.fi/building-decoupled-sites-and-apps-with-gra...

For a fully integrated GraphQL option I looked into Gatsby.js, which started out as a static site generator. It is still this at it's core, but the move for GraphQL for everything seems like a good move: https://react-etc.net/entry/gatsby-is-a-static-site-generato...

Re: Hacker News Clone Using GraphQL and React

#88

Post by joshribakoff »

whalesalad wrote: post #65

I really dislike the tendency to couple graphql queries with components. Is this idiomatic? If you are comfortable with side effects in your presentation layer i’d much rather manage data at a higher level and have a component request the data it needs from that. As opposed to actually making HTTP requests. What happens when two components used in two totally different areas of a single page need common data? Relying…

The components are coupled to the structure of the data, not the graphql query. Where would you rather make the http requests? Somewhere in the redux layer? That's basically what Apollo client does anyways, it just reduces boilerplate.

Although I think coupling components with data structures is the smaller benefit. The real benefit of graphQL is not the client architecture, the real benefit is decoupling frontends from backends, unifying disjointed backends, and efficiency.

In the name of efficiency though, graph QL is projecting a graph into a tree which involves denormalizing & duplicating data in the response. This is where netflix's falcor is cleaner. Check out my little graphQL demo repo / read me https://github.com/joshribakoff/graphql-demo I write more about the benefits of using graphQL, and also the down sides.

Re: Hacker News Clone Using GraphQL and React

#89

Post by reacthate »

scottmf wrote: post #61
reacthate wrote: post #34

Earlier quoted context omitted.

This is why the JS community is so fucked. They take what should be a simple website and needlessly complicate it by (poorly) reimplementing what web browsers can already do.

You’ve completely missed the point.

I would consider that a win, personally.

Re: Hacker News Clone Using GraphQL and React

#90

Post by [deleted] »

reacthate wrote: post #34
reacthate wrote: post #28

Hey, so, uh... all you need to clone HN is Postgres and some HTML/CSS and a smidgen of JavaScript. Good God, must we pull in the entire JavaScript ecosystem for a simple forum now?

This is why the JS community is so fucked. They take what should be a simple website and needlessly complicate it by (poorly) reimplementing what web browsers can already do.

[deleted]
Post reply on HN