How To Post And Fetch Data Using React-query

Photo by Markus Spiske on Unsplash

Introduction

In this article, you will learn how to setup react-query to fetch and post data in your applications written in typescript/javascript and react functional components. Furthermore, you will learn what react-query is and its advantages.

What is react-query?

React-query is a great library that solves the problem of managing server state and caching in applications, according to the official documentation “React Query is often described as the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronizing, and updating server state in your React applications a breeze.” For more information, see react-query.

Advantages of using react-query

Improves application performance with data caching. Furthermore, allows for data to be fetched in the background whenever there is an update(background updating),refetches data when a window is refocused, and also provides defaults that retry a failed query request three(3) times in cases where there is an error.

Firstly, let’s install react-query version 3.5.12 with npm or yarn

npm i react-query
or
yarn add react-query

Install material ui, mui-datatables, and react-hook-form which will be used for styling, listing, and form validation, for more information please visit the respective docs.

npm install @material-ui/core
npm install mui-datatables --save
npm install react-hook-form

Install React Query Devtools with the snippet below, this is optional.

yarn add react-query-devtools

Configure client provider

Now let’s configure the app.tsx component by wrapping QueryClientProvider because it needs to be on top of components that are responsible for fetching data. QueryClientProvider should take an instance of QueryClient, QueryClient can be used to configure and interact with QueryCache and MutationCache instances.

Posting data with axios

Let’s jump in and create the component called employeeForm.tsx responsible for posting data, We are going to use a dummy rest api called beeceptor for the post request with axios. Learn about beeceptor.

Create a function that contains the post request like in the code snippet below.

const createEmployee = async (data: Employee) => {
const { data: response } = await axios.post('https://employee.free.beeceptor.com/create', data);
return response.data;
};

Now create an employee interface of any number of fields.

interface Employee{
    name:string;
    job:string;
    id:string;
}

In our functional component, we are going to import a hook from react-query called useQueryClient which returns a QueryClient instance. useQueryClient hook will be used to invalidate queries, after this happens a query is considered stale and can also be refetched in the background if it is currently being rendered through related hooks.

import {useQueryClient} from 'react-query'
const queryClient = useQueryClient()

Next, we import useMutation hook which is used for any CRUD operations in your application. We will destructure mutate and isLoading from the useMutation hook, the hook will take a parameter which is a function responsible for posting, and several options. The options that will use are onSuccess, onError, and onSettled.

onSuccess will be triggered every time a mutation is a success, onError will be triggered when there is an error during a mutation and onSettled will be triggered either when the mutation is a success or not.

const { mutate, isLoading } = useMutation(createEmployee, {
   onSuccess: data => {
      console.log(data);
      const message = "success"
      alert(message)
},
  onError: () => {
       alert("there was an error")
},
  onSettled: () => {
     queryClient.invalidateQueries('create')
}
});

After the above steps have been completed, your emloyeeForm component will look like the code snippet below.

employeeForm

Fetching data with axios

Create a functional component called employeeList that will be fetching and list data. Fetching is simple and straight forward, react-query provides a hook called useQuery which takes a key and function responsible for fetching data. Import the hook called useQuery from react-query.

import { useQuery } from 'react-query';

Create a function responsible for fetching data from a dummy rest api called restapiexample. Learn about restapiexample.

const getEmployee = async () => {
const { data } = await axios.get('http://dummy.restapiexample.com');
return data.data;
};

Destructure data which is returned by the hook with several other returns available from the useQuery hook. useQuery provides several options to choose from. Learn about useQuery options.

const { data } = useQuery('create', getEmployee);

The complete employeeList should look like the snippet below.

Check out the git repo for the other configurations that we did not focus on but appear in the article. Feel free to ask me any questions on twitter, am available to help you get started.