GraphQL Hasura with React Query-Part 1

Photo by Ferenc Almasi on Unsplash

GraphQL

Get exactly what you need from your service

GraphQL is a query language for APIs and a runtime for providing all queries with your existing data. GraphQL APIs get all the data your app needs in a single request.

Hasura

Instant Realtime GraphQL on all your Postgres data.

The open-source Hasura.io GraphQL Engine gives you high performance GraphQL API’s over Postgres. Hasura.io GraphQL engine lets you setup a GraphQL server and event triggers over a Postgres database in minutes.
Best thing i love about Hasura is Role Based Access Control which removes the need to write permission logic.

We will be using Hasura cloud for our tutorial

Setup Hasura GraphQL cloud

• Sign Up and create account here
• Create New Project & follow setup instructions
• Copy GraphQL API url , will use later on

hasura cloud

• Click on `Launch Console` button and it will redirect to project Dashboard which we can use to create tables , modify data , query & mutation operations
• We can connect existing database or create new Database as mentioned below. We will be creating new Heroku DB for our tutorial purpose

connect DB

• After adding DB , create user table with fields name , email . Our basic Hasura setup is done now.

create table

React Query

Fetch, cache and update data in your React and React Native applications all without touching any “global state”

React Query has key concepts of Server State & Client State. This makes React Query goto library to manage state since all other state management patterns focuses only on client state.

It is zero-configuration with React as the only dependency, and fully customisable as per your app requirements.

We will be using create-using-app for our tutorial.

• Setup create-using-app

npx create-react-app hasura-react-query
cd hasura-react-query

• Install react-query as mentioned here

yarn add react-query

• For readability & convenience , will be using below folder structure

folder structure

React-Query has two basic core concepts-

• Queries — A query is a declarative dependency on an asynchronous source of data that is tied to a unique key. A query can be used with any Promise based method (including GET and POST methods) to fetch data from a server.
• Mutations -Unlike queries, mutations are typically used to create/update/delete data or perform server side-effects. For this purpose, React Query exports a useMutation hook.

In second part , we have covered above concepts in detail using code , have written hooks for query , mutation operations and have covered how react-query takes care of caching out of the box.

Read second part here