API Call React

yoshisugestions.md

Api Service.tsx

import axios from 'axios';

const apiService = {
 get: function<T = any>(url: string, options: T = {}): Promise<AxiosResponse<T>> {
   return axios.get<T>(url, options);
 },
 post: function<T = any>(url: string, data: T, options: T = {}): Promise<AxiosResponse<T>> {
   return axios.post<T>(url, data, options);
 },
 put: function<T = any>(url: string, data: T, options: T = {}): Promise<AxiosResponse<T>> {
   return axios.put<T>(url, data, options);
 },
 delete: function<T = any>(url: string, options: T = {}): Promise<AxiosResponse<T>> {
   return axios.delete<T>(url, options);
 }
};

export default apiService;

useYoshiOnNini.tsx

import { useQuery } from '@tanstack/react-query';
import apiService from './apiService';

const useApiData = (url, options) => {
  return useQuery(['apiData', url], () => apiService.get(url, options), {
    // Opções do React Query, como refetchOnWindowFocus, staleTime, etc.
  });
};

export default useApiData;

Como vc esta utilizando o React Query, sugiro ser feito dessa forma.

Caso vc queira ter multiplas funcoes envolvendo um unico contexto nesse hook

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import apiService from './apiService';

const useApi = () => {
  const queryClient = useQueryClient();

  // Função para chamadas GET
  const fetchData = (url, options) => {
    return useQuery(['apiData', url], () => apiService.get(url, options));
  };

  // Função para chamadas POST
  const createData = () => {
    return useMutation((data) => apiService.post(data.url, data.body), {
      onSuccess: () => {
        queryClient.invalidateQueries(['apiData']);
      },
    });
  };

  // Função para chamadas DELETE
  const deleteData = () => {
    return useMutation((data) => apiService.delete(data.url), {
      onSuccess: () => {
        queryClient.invalidateQueries(['apiData']);
      },
    });
  };

  return { fetchData, createData, deleteData };
};

export default useApi;

nicole-component.tsx

import React from 'react';
import useApiData from './useApiData';

const MyComponent = () => {
  const { data, isLoading, error } = useApiData('https://api.exemplo.com/dados');

  if (isLoading) return <div>Carregando...</div>;
  if (error) return <div>Erro ao carregar dados</div>;

  return (
    <div>
      {/* Renderizar dados aqui */}
    </div>
  );
};

nicole-component-2.tsx

import React from 'react';
import useApi from './useApi';

const MyComponent = () => {
  const { fetchData, createData, deleteData } = useApi();
  const { data, isLoading, error } = fetchData('https://api.exemplo.com/dados');

  // Exemplo de como usar createData e deleteData
  const mutationPost = createData();
  const mutationDelete = deleteData();

  const handlePost = () => {
    mutationPost.mutate({ url: '/post-endpoint', body: { /* dados */ } });
  };

  const handleDelete = () => {
    mutationDelete.mutate({ url: '/delete-endpoint' });
  };

  // Renderizar seu componente...
};