done 2

src/productTable.tsx

@@ -46,7 +46,30 @@ interface ProductTableProps {
 
 const ProductTable = React.memo(({ onChangeQuantity, storeId }: ProductTableProps) => {
   return (
-    <div>Product table</div>
+    <Query query={queries.getStore} skip={!storeId} variables={{ "storeId": storeId }}>
+      {({ data }: any) => {
+        //const products = data && data.store && data.store.products;
+        //console.table(products);
+        return (<Table>
+          <tbody>
+            {
+              data && data.store && data.store.products.map(({ description, id, name, price }: Product) => {
+                return <Tr key={id}>
+                  <td>
+                    <div>{name}</div>
+                    <Description>{description}</Description>
+                  </td>
+                  <PriceTd>€ {price.toFixed(2)}</PriceTd>
+
+                </Tr>
+              })
+            }
+          </tbody>
+        </Table>)
+      }
+
+      }
+    </Query >
   );
 });
 

src/queries.graphql

@@ -3,4 +3,16 @@ query getStores{
     id,
     name
   }
+}
+
+query getStore($storeId: String!){
+  store (id:$storeId){
+    id,
+    name,
+    city,
+    number,
+    postalCode,
+    street,
+    products {id,description,name,price}
+  }
 }

src/storeSelect.tsx

@@ -26,7 +26,7 @@ const StoreSelect = React.memo(({ value, onChange }: StoreSelectProps) => {
 
   return (
     <Query query={queries.getStores}>
-      {({ data: { stores = [] } }) => (
+      {({ data: { stores = [] } = {} }) => (
         <Select value={value} onChange={onChangeStore}>
           <option key="default" value="">Select a store</option>
           {stores.map(({ id, name }: Store) => {