index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

import { QueryClient, QueryClientProvider } from "react-query";

// create a query client
const queryClient = new QueryClient();

ReactDOM.render(
  // wrap the app in the query client provider
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>,
  document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

User.js

import React, { useState } from "react";
import { useMutation, useQueryClient } from "react-query";
import axios from "axios";

const gender = ["male", "female"];
const status = ["active", "inactive"];
const random = (array) => array[Math.floor(Math.random() * array.length)];

export default function User() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");
  const queryClient = useQueryClient();

  const createUser = async (input) => {
    Object.assign(input, { gender: random(gender), status: random(status) });

    const response = await axios.post(
      "https://gorest.co.in/public/v1/users",
      input,
      {
        headers: {
          Authorization: `Bearer ${process.env.REACT_APP_ACCESS_TOKEN}`,
        },
      }
    );

    setMessage(response.data);
  };

  const { isLoading, error, isError, mutate } = useMutation(createUser, {
    onSuccess: async () => queryClient.invalidateQueries("users"),
  });

  return (
    <>
      <h1>Create a new user</h1>
      <form className="user" onSubmit={(e) => e.preventDefault()}>
        <div className="input">
          <label>Name:</label>
          <input
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
            required
          />
        </div>
        <div className="input">
          <label>Email:</label>
          <input
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            required
          />
        </div>

        <br />
        <div className="input">
          <button onClick={() => mutate({ name, email })}>Create</button>
        </div>
      </form>
      <p> Created a new User : {message && JSON.stringify(message?.data)}</p>

      <div style={{ color: isError ? "red" : "green" }}>
        {isLoading ? "saving.." : ""}
        {isError ? error.message : ""}
      </div>
    </>
  );
}

Users.js

import React from "react";
import { useQuery } from "react-query";
import axios from "axios";
import User from "./User";

export default function Users() {
  const fetchUsers = async () => {
    const response = await axios.get(
      `https://gorest.co.in/public/v1/users?page=66`
    );
    return response.data;
  };

  const { data, isLoading, error, isError } = useQuery("users", fetchUsers, {
    refetchOnWindowFocus: false,
  });

  if (isLoading) return <p>Loading...</p>;
  if (isError) return <p>Error {error.message}</p>;
  return (
    <div className="container">
      <User />
      <h1>Users</h1>
      <table>
        <tbody>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Status</th>
          </tr>
          {data?.data?.map((user) => {
            return (
              <tr key={user.id}>
                <td>{user.id} </td>
                <td>{user.name} </td>
                <td>{user.email} </td>
                <td>{user.status} </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}