Morioh
Login
Sérgio Oliveira

Sérgio Oliveira

6 months ago

Como fazer solicitação de exclusão no React

No contexto da comunicação na Web, uma solicitação DELETE é um método HTTP que instrui um servidor da Web a excluir um recurso específico. É um dos principais métodos usados em APIs da Web para gerenciamento de dados.

React Query é uma biblioteca popular de busca de dados e gerenciamento de estado para aplicativos React. Ele simplifica a busca, o armazenamento em cache e a atualização de dados, tornando-o uma ferramenta valiosa para a construção de aplicativos React modernos e eficientes.

Neste tutorial, ensinaremos como usar o gancho React Query useMutation para excluir dados do banco de dados no aplicativo React JS. Para realizar a solicitação de exclusão no React com mutação de consulta React, seguimos estas etapas

Índice

  • Etapa 1: construir o projeto React
  • Etapa 2: adicionar Axios & Consulta de reação
  • Etapa 3: registrar o Bootstrap
  • Etapa 4: configurando o React-Query
  • Etapa 5: Criar novo componente
  • Etapa 6: construir servidor back-end
  • Etapa 7: excluir dados do banco de dados
  • Etapa 8: registrar novo componente
  • Etapa 9: visualizar o aplicativo no navegador

Visualização:


 

Etapa 1: construir o projeto React

Abra o console, use o seguinte comando para criar e entrar na pasta do aplicativo.

npx create-react-app react-blog-app
cd react-blog-app

Etapa 2: adicionar Axios & Consulta de reação

Estamos agora na pasta do projeto, em seguida execute o comando para instalar o axios e a consulta React simultaneamente.

npm install @tanstack/react-query axios --legacy-peer-deps

Etapa 3: registrar o Bootstrap

Estamos instalando a biblioteca bootstrap no React para que possamos usar seus componentes de UI para criar a UI básica no React.

npm i bootstrap --legacy-peer-deps

A próxima etapa é adicionar ou importar CSS de bootstrap no arquivo src/App.js.

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
function App() {
  return <div></div>;
}
export default App;

Etapa 4: configurando o React-Query

A consulta React não funcionará a menos que registremos determinados módulos de consulta react no arquivo App.js. Certifique-se de substituir o código atual pelo código a seguir.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
// Create a client
const queryClient = new QueryClient();
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
);

Etapa 5: Criar novo componente

Vá até a pasta src/, crie uma nova pasta, nomeie-a components/ e crie o código fornecido para arquivo de função.Users.js

import React from 'react'
function Users() {
  return (
    <div>Users page</div>
  )
}
export default Users

Etapa 6: construir servidor back-end

Precisamos instalar globalmente o pacote json-server no React, portanto execute o comando sugerido.

sudo npm install -g json-server

Agora, precisamos de um arquivo que seja o ponto crucial para armazenar os dados da Fake API, crie o arquivo db.json na raiz do seu projeto React.

{
  "posts": [
    {
      "id": 1,
      "title": "Sunt aut facere repellat provident.",
      "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
    },
    {
      "id": 3,
      "title": "Ea molestias quasi exercitationem.",
      "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
    },
    {
      "id": 4,
      "title": "Eum et est occaecati",
      "body": "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit"
    },
    {
      "id": 5,
      "title": "Nesciunt quas odio.",
      "body": "repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor neque"
    }
  ]
}

Execute o servidor json a partir do terminal com a ajuda do comando fornecido.

json-server --watch db.json --port 3004

Etapa 7: excluir dados do banco de dados

Primeiro, estamos buscando os dados do banco de dados que criamos anteriormente usando o gancho useQuery.

Use o gancho useMutation para excluir os dados do banco de dados; depois de clicar em excluir, atualize a página para ver o efeito de exclusão de dados.

Insira o seguinte código no arquivo components/Users.js.

import React from "react";
import axios from "axios";
import { useQuery, useMutation } from "@tanstack/react-query";
async function getPosts() {
  const { data } = await axios.get("http://localhost:3004/posts");
  return data;
}
function Users() {
  const deletePost = useMutation((id) => {
    return axios.delete(`http://localhost:3004/posts/${id}`);
  });
  const { isLoading, isError, error, data } = useQuery(["posts"], getPosts);
  if (isLoading) {
    return <div>Loading...</div>;
  }
  if (isError) {
    return <div>Error! {error.message}</div>;
  }
  return (
    <ul className="list-group">
      {data.map((res, i) => {
        return (
          <li className="list-group-item mb-4" key={i}>
            <h3>{res.title}</h3>
            <p className="mb-3">{res.body}</p>
            <button
              type="button"
              className="btn btn-outline-danger"
              onClick={() => deletePost.mutate(res.id)}
            >
              Delete
            </button>
          </li>
        );
      })}
    </ul>
  );
}
export default Users;

Etapa 8: registrar novo componente

Para ver a solicitação de exclusão em ação; certifique-se de registrar o novo componente no arquivo App.js.

import React from "react";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import Users from "./components/Users";
function App() {
  return (
    <div className="container mt-5">
      <h2 className="mb-4">React Query useMutation Hook Delete Data from Database Example</h2>
      <Users />
    </div>
  );
}
export default App;

Etapa 9: visualizar o aplicativo no navegador

Finalmente chegamos ao destino final. Agora, iniciaremos o servidor React com o seguinte comando para abrir o aplicativo no navegador.

npm start
http://localhost:3000

Conclusão

Nesta postagem, vimos como usar o React Query de maneira eficiente para executar uma solicitação Delete Mutation usando o gancho useMutation no aplicativo da web React.

1.55 GEEK