Course Introduction

GraphQL is becoming the new way to use APIs in modern web and mobile apps. GraphQL is strongly typed. Using typed language like Typescript or ReScript along with GraphQL will help us build end-to-end type safe applications which are less error prone.

In this course we will learn how to integrate GraphQL into ReScript React applications.

We will explore the fundamentals of GraphQL and the things that make GraphQL especially suitable for modern applications, like its realtime capabilities! The course is light on opinions so that once you grok the fundamentals you can go on to choose your favorite libraries, tools and tailor your workflow.

Key topics and takeways:

  • GraphQL vs REST
  • GraphQL queries, mutations, subscriptions
  • Setting up a Apollo GraphQL client in ReScript React app
  • Integrating GraphQL queries in your ReScript React app
  • Integrating GraphQL mutations with query variables to handle form input
  • Updating local state after a GraphQL mutation (form input) using Apollo cache
  • Optimistic updates to local state and UI after GraphQL mutations for a slick UX
  • Integrating subscriptions in ReScript React app
  • Building a real-time feed with notifications using mutations and subscriptions

What will we be building?

We will be building a realtime todo app using authenticated GraphQL APIs.

Try this deployed version of the app to see what we'll be building: https://learn-hasura-todo-app.netlify.com/

Will this course teach React and ReScript concepts as well?

No, we will be simulating a scenario where we already have a GraphQL API and the basic UI of a ReScript React app built. Our task in this scenario is to integrate the GraphQL APIs into our ReScript React app to build a complete and working app.

If you're new to React and ReScript, we recommend going through the official docs of React and ReScript and then coming back here!

What do I need to take this tutorial?

You need to have npm/yarn & node 8+ running.

How long will this tutorial take?

Less than 2 hours

Other courses

Frontend: GraphQL for: Vue, Angular, Elm, ReasonReact

Mobile: GraphQL for: React Native, iOS, Android, Flutter

Backend: Building a realtime GraphQL backend with Hasura in 30 mins (ideal for frontend, backend or fullstack developers)

About the community authors

Kiran Abburi
Kiran AbburiTwitter IconGithub Icon
Consultant
Close

Get Started with GraphQL Now

Hasura Cloud gives you a fully managed, production ready GraphQL API as a service to help you build modern apps faster.
Ready to get started?
Start for free on Hasura Cloud or you could contact our sales team for a detailed walk-through on how Hasura may benefit your business.
Stay in the know
Sign up for full access to our community highlights, new features, and occasional baby animal gifs! Oh, and we have a strict no-spam rule. ✌️