Configuração de Middleware em React Query

O React Query é uma biblioteca para gerenciamento de dados em aplicativos React, que oferece recursos incríveis como cache de dados, gerenciamento de erros e suporte a paginadores. Mas, você sabia que também é possível personalizar o comportamento da solicitação de API através da criação de middlewares?

Neste artigo, vamos discutir como configurar middlewares em React Query e mostrar alguns exemplos para ilustrar ainda mais a funcionalidade do React Query.

O que são middlewares em React Query?

Os middlewares em React Query são funções que interceptam e processam solicitações de API antes de serem enviadas para o servidor. É como se fosse uma camada de proteção que permite que você adicione lógica adicional para lidar com situações específicas, como autenticação ou cache.

Como criar middlewares em React Query?

Para criar um middleware em React Query, você precisa passar uma função para o método useQuery, useMutation, ou useInfiniteQuery. Essa função é executada antes da solicitação ser enviada para o servidor. O middleware pode modificar a solicitação, adicionando cabeçalhos personalizados ou manipulando os dados de entrada.

Exemplos de middlewares em React Query

• Adicionando um cabeçalho de autorização em todas as solicitações:

import { useQuery } from 'react-query';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      middleware: [
        (query) => {
          query.headers = {
            Authorization: `Bearer ${localStorage.getItem('token')}`,
            ...query.headers
          };
          return query;
        }
      ]
    }
  }
});

function App() {
  const { data } = useQuery('todos', () => fetch('/api/todos'));
  // ...
}

• Manipulando os dados de entrada antes de enviar para o servidor:

import { useMutation } from 'react-query';

function App() {
  const [formValues, setFormValues] = useState({});

  const { mutate } = useMutation((data) => fetch('/api/users', {
    method: 'POST',
    body: JSON.stringify(data),
    headers: { 'Content-Type': 'application/json' },
  }));

  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = { ...formValues, password: md5(formValues.password) };
    mutate(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" onChange={(e) => setFormValues({ ...formValues, email: e.target.value })} />
      <input type="password" onChange={(e) => setFormValues({ ...formValues, password: e.target.value })} />
      <button type="submit">Enviar</button>
    </form>
  );
}

• Adicionando um cabeçalho personalizado a uma solicitação específica:

import { useQuery } from 'react-query';

function App() {
  const { data } = useQuery('todos', () => fetch('/api/todos', {
    headers: { 'X-Custom-Header': 'hello world' },
  }), {
    // Aqui estamos adicionando uma opção adicional de solicitação para adicionar um cabeçalho personalizado
    headers: { 'Authorization': 'Bearer token' }
  });

  // ...
}

Conclusão

Os middlewares em React Query são uma maneira poderosa de personalizar o comportamento de solicitação de API em seu aplicativo. Com a configuração correta do middleware, você pode otimizar seu aplicativo para atender às necessidades específicas do seu projeto. É possível adicionar cabeçalhos personalizados, manipular dados de entrada, lidar com erros específicos e muito mais.

Neste artigo, discutimos como criar middlewares em React Query e demos alguns exemplos para ilustrar seu funcionamento. Lembre-se de experimentar diferentes abordagens e encontrar a melhor solução para o seu projeto. Esperamos que este artigo tenha sido útil para você entender como configurar middlewares em React Query e como eles podem ser aplicados em diferentes situações.