import React, { useState } from 'react';
import { QueryResult } from '@apollo/react-common';
import { useQuery } from '@apollo/react-hooks';
import { GET_PRODUCTS } from './queries';

import * as ApolloTypes from './__generated__/GetProducts';

import Products from './components/Products';

const App: React.FC = () => {
  const {
    data,
    loading,
    error,
    refetch,
    networkStatus,
    client,
  }: QueryResult<ApolloTypes.GetProducts> = useQuery<ApolloTypes.GetProducts>(GET_PRODUCTS);

  const refetching = networkStatus === 4;

  if (loading && !refetching) return <h2>Loading...</h2>;
  if (error) return <h2>{`Error: ${error}`}</h2>;

  return (
    <div>
      <Products 
        products={ data && data.allProductsSearch && data.allProductsSearch.products ? data.allProductsSearch.products : [] } 
      />
    </div>
  );
};

export default App;