Summary

In this tutorial, you learned how to build a fully-featured Hackernews clone with React and urql. You implemented several features, such as displaying a list of links, signup and authentication, creating new links, voting on links, pagination as well as realtime updates with GraphQL subscriptions.

Feel free to extend this app, start a new one, or play around more with urql! If you have any closing questions or need some help, you can reach out to the urql community & team on Spectrum!

Both urql and @urql/exchange-graphcache are powerful yet minimal tools that have a lot more to offer than what we’ve shown you in this tutorial! If you’d like to learn more, maybe check out some of these links:

  • urql Architecture: More information on how urql works internally and how it’s structured
  • urql Guides: If you now want to write your own exchanges to extend urql, these are some useful guides to get started!
  • @urql/exchange-graphcache: Graphcache supports more than what you’ve seen! It can do optimistic updates, cache resolvers, and more!

Thank you for following along and congratulations on learning how to use React, urql, and GraphQL!

Node.js Server

To learn how to build the backend that you used for this tutorial, check out the Node.JS tutorial.

The backend was powered by graphql-yoga, a fast and simple GraphQL server library built on top of Express.js. It comes with several features, such as out-of-the-box support for GraphQL Playground and realtime GraphQL subscriptions.

The resolvers of your GraphQL server are implemented using the Prisma client that’s responsible for database access.

If you want to dive deeper and become part of the awesome GraphQL community, here are a few resource and community recommendations for you:

  • Prisma Blog: The blog regularly features new and interesting content about GraphQL, from community news to technical deep dives and various tutorials.
  • GraphQL Weekly: A weekly GraphQL newsletter with news from the GraphQL ecosystem
  • GraphQL Conf: The world’s biggest gathering of GraphQL enthusiasts happening in the heart of Berlin
  • Prisma Slack: A Slack team with vivid discussions around everything GraphQL & Prisma
Unlock the next chapter
Did you find this tutorial useful?
What tutorial?
Yes, I learned something!
No, I even forgot what I knew before!
Smoked Meats!