Table of Content

What is React Query
Why React Query
How React Query Works
Installing React Query
Quick Start on querying data using React Query

What is React Query

React query is a new custom hooks for handling all forms of asynchronous functions in you react app. It essentially enables you to fetch, cache and update all your asynchronous data in react without tampering with any state in your app, this reduces the amount of codes and increases the efficiency of all the logical code you write to fetch data. React Query handles caching, background updates and stale data out of the box with zero-configuration. All these were extra codes and logical thinking before react query came around.

Why React Query

As mentioned earlier, it makes us write shorter codes and makes our code more efficient.

If one understand promises, and how asynchronous functions works already in javaScript, its easier to jump into react query and see the advantages that comes with it.

Most of it functionality can be performed without interacting with any form of state manager or reducers in our app.

How React Query Works

Configuring React Query and working with it is pretty easy for a beginner cause it comes almost ready to be used and with options to fit every beginners use case. It has designated hooks for infinite-loading, pagination and mutation, all this makes updating our data easy.

How to get Started with React Query

To get started with react query we need to install it on the project we are working on. This can be done using either NPM or Yarn

The syntax for the installation goes as follow

NPM

npm install react-query --save

Yarn

yarn add react-query

After this we can now go ahead to use react query in our project.

Quick Start

A quick start to querying data using use Query. In this guide we will source our data from jsonplaceholder.typicode and display the title of the data.

# 'We import react like we normally do'
import React from "react";
# 'We import use-query from react-query'
import { useQuery } from "react-query";


# 'We create our function that returns a value to the dom'
const Post = () => {

# 'we declare a variable called url and assign it the value of the
#link to where the data we want lies'
  const url = "https://jsonplaceholder.typicode.com/todos/1";

# 'Here, we create an asynchronous function to go fetch our data'
  const fetchPost = async () => {

# 'we will be using the javascript fetch method 
# and passing in the url variable we 
# declareds as its argument'
    let res = await fetch(url);

# 'we declare a variable called post and assign it the value of the
# returned value from the fetched date 
# which is a promise, hence we await the response'
    let post = await res.json();

# `And finally we return the post`
    return post;
  };

# 'We destructure out two constants 'data' and 'status' 
# from useQuery and we pass in two parameters 
# 1. The first parameter will be a string or key that 
# describes what our data is about. so here we called ours 'post'
# 2 . The second parameter will be the function that 
# we declared to grab our data'
  const { data, status } = useQuery("post", fetchPost);

  return (
    <div>
# We check to see if the status is successful then we can perform any task 
# with our data
      {status === "success" ? (
        <h1>{data.title}</h1>
      ) : (
# If our data is false we display the following text
        <div>
           <p>your data is still loading....</p>
        </div>
      )}
    </div>
  );
};

#we export our Post component
export default Post;

Beginners Guide To React Query