Exemplo de uso do react-query

carrinho.js

import { useMutation, useQuery, useQueryClient } from 'react-query';
import { getStorageItem, setStorageItem } from '@/helpers/localStorage';

const getCart = () => {
  return new Promise((resolve) => {
    setTimeout(async () => {
      const cart = getStorageItem('carrinho') || [];

      resolve(cart);
    }, 1000);
  });
};

const addToCart = async (item) => {
  return new Promise((resolve) => {
    setTimeout(async () => {
      const cart = await getCart();

      cart.push(item);

      setStorageItem('carrinho', cart);
      resolve();
    }, 1000);
  });
};

const removeToCart = async (id) => {
  return new Promise((resolve) => {
    setTimeout(async () => {
      const cart = await getCart();

      const newCart = cart.filter((item) => item.id != id);

      setStorageItem('carrinho', newCart);
      resolve();
    }, 1000);
  });
};

export const useCart = () => {
  return useQuery('cart', getCart);
};

export const useAddToCartMutation = () => {
  const queryClient = useQueryClient();

  return useMutation(addToCart, {
    onSuccess: () => {
      queryClient.invalidateQueries('cart');
    },
  });
};

export const useRemoveToCartMutation = () => {
  const queryClient = useQueryClient();

  return useMutation(removeToCart, {
    onSuccess: () => {
      queryClient.invalidateQueries('cart');
    },
  });
};

exemplo.jsx

import { Header } from './Header';
import { Button, Typography } from '@/fairplay';
import {
  useAddToCartMutation,
  useCart,
  useRemoveToCartMutation,
} from './carrinho';

function Exemplo() {
  const cart = useCart();

  const addToCartMutation = useAddToCartMutation();
  const removeToCartMutation = useRemoveToCartMutation();

  const handleAddToCart = () => {
    addToCartMutation.mutate({
      id: cart.data.length + 1,
      nome: 'Nome do produto',
    });
  };

  const handleRemoveToCart = (id) => {
    removeToCartMutation.mutate(id);
  };

  if (cart.isLoading) {
    return <Typography variant="heading">Carregando</Typography>;
  }

  return (
    <>
      <Header />
      <Typography variant="heading">
        Tem {cart.data?.length} produtos no carrinho
      </Typography>

      {cart.data?.map((item) => {
        return (
          <div style={{ padding: '50rem' }} key={item.id}>
            <Typography variant="heading">
              {item.nome} - {item.id}
            </Typography>
            <Button.Fill
              onClick={() => {
                handleRemoveToCart(item.id);
              }}
            >
              Remover
            </Button.Fill>
          </div>
        );
      })}

      <Button.Fill
        loading={addToCartMutation.isLoading}
        onClick={handleAddToCart}
      >
        Adicionar produto no carrinho
      </Button.Fill>
      {cart.isFetching && (
        <Typography variant="heading">Estou atualizando o carrinho</Typography>
      )}
    </>
  );
}

export default Exemplo;

Header.jsx

import styled from 'styled-components';
import { Typography } from '@/fairplay';
import { useCart } from './services/carrinho';

const StyledHeader = styled.div`
  width: 100%;
  height: 80rem;
  background: red;
  display: grid;
  place-items: center;
`;

export const Header = () => {
  const cart = useCart();

  return (
    <StyledHeader>
      <Typography variant="heading">
        Tem {cart.data?.length} produtos no carrinho
      </Typography>
    </StyledHeader>
  );
};