Requerimientos

• React

Configuracion del Proyecto

npm create vite react-query-crud

• Framework: React
• Language: Javascript

cd react-query-crud
npm i
npm run dev

Luego instalaremos bibliotecas como:

npm i @tanstack/react-query
# or
pnpm add @tanstack/react-query
# or
yarn add @tanstack/react-query

Luego modifica el index.js:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
import { QueryClientProvider, QueryClient } from "@tanstack/react-query";

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>
);

• https://tanstack.com/query/v4/docs/installation

Añadiendo dev tools

npm i @tanstack/react-query-devtools
# or
pnpm add @tanstack/react-query-devtools
# or
yarn add @tanstack/react-query-devtools

Luego en index.js:

import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  </React.StrictMode>
);

Creando API Client

npm i axios
pnpm add axios
yarn add axios

en src/api/productsApi.js:

import axios from 'axios';

const productsApi = axios.create({
  baseURL: 'http://localhost:3000/api/products',
});

export const getProducts = () => productsApi.get('/');

export const getProductById = (id) => productsApi.get(`/${id}`);

export const createProduct = (product) => productsApi.post('/', product);

export const updateProduct = (id, product) => productsApi.put(`/${id}`, product);

export const deleteProduct = (id) => productsApi.delete(`/${id}`);

export default productsApi;

• https://tanstack.com/query/v4/docs/devtools

Creación del Backend

Para este proyecto crearemos una API REST Falsa usando json-server, el modulo de npm para crear REST APIs de pruebas.

crea una carpeta llamada db, en la raiz de directorios de tu proyecto, en db/products.json

{
  "products": [
    {
      "id": 1,
      "name": "Product 1",
      "price": 100,
      "quantity": 1,
      "description": "Product 1 description"
    },
    {
      "id": 2,
      "name": "Product 2",
      "price": 200,
      "quantity": 2,
      "description": "Product 2 description"
    },
    {
      "id": 3,
      "name": "Product 3",
      "price": 300,
      "quantity": 3,
      "description": "Product 3 description"
    },
    {
      "id": 4,
      "name": "Product 4",
      "price": 400,
      "quantity": 4,
      "description": "Product 4 description"
    }
  ]
}

Una vez creado simplemente ejecuta el siguiente comando:

npm i json-server
json-server db/products

npx json-server db/products.json

o si usas pnpm:

pnpm exec json-server db/products.json 

Fetch Data

components/Products.jsx

import { useQuery } from "@tanstack/react-query";
import { getProducts } from "../api/productsApi";

const Products = () => {
  const {
    isLoading,
    data: products,
    isError,
    error,
  } = useQuery({
    queryKey: ["products"],
    queryFn: getProducts,
  });

  if (isLoading) return <div>Loading...</div>;
  else if (isError) return <div>{error.message}</div>;

  return JSON.stringify(products);
};

export default Products;

• https://tanstack.com/query/v4/docs/guides/queries

A partir de aqui tambien se añadiran mutaciones para crear, actualizar y eliminar datos.