import React, {useEffect, useState} from 'react';
import apiService  from '../utils/apiService';

const Products = () => {
    const [ products, setProducts] = useState();
    const [ isLoading, setLoading] = useState(true);
    
    useEffect(() => {
        const getProducts =  async () => {
            const products = await apiService.getProducts();
            if(products){
                setProducts(products)
            }
            setLoading(false);
        }
        getProducts();
    },[]);

    return (
        <div>
            <h2>Products</h2>
            {isLoading && <div>...loading</div>}
            { products && products.map( product => <div>{product.productName}</div>)}
        </div>
    )
};

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

const ProductsRQ = () => {
    const { data: products, isLoading } = useQuery(['products'], apiService.getProducts);
    
    return (
        <div>
            <h2>RQ Products</h2>
            { isLoading && <div>...loading</div> }
            { products && products.map( product => <div>{ product.productName }</div>)}
        </div>
    )
};

import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

const queryClient = new QueryClient();

const App => () => {
  return (
    <QueryClientProvider client={queryClient}>
     	<div>
		App Components
        </div>
      <ReactQueryDevtools initialIsOpen={false} position='bottom-right' />
    </QueryClientProvider>
  )
};

export default App;

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

const ProductsRQ = () => {
    const { data: products, isLoading } = useQuery(['products'], apiService.getProducts);
    const [ product, setProduct] = useState();
    const queryClient = useQueryClient() // gets the current client instance
    const { mutate } = useMutation(apiService.addProduct, {
        onSuccess: () => {
            queryClient.invalidateQueries(['products'])
          },
    });
    const addProduct = () => mutate(product);
   //......
};

export default ProductsRQ;