Add GQL query for fetching products from category

Author: w3bdesign

components/Category/Categories.component.jsx

@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import { v4 as uuidv4 } from 'uuid';
 
 /**
@@ -10,13 +11,18 @@ const Categories = ({ categories }) => {
     <>
       <section className="container mx-auto bg-white">
         <div className="flex ">
-          {categories.map(({ name }) => (
+          {categories.map(({ id, name, slug }) => (
             <div
               key={uuidv4()}
               className="flex flex-col justify-around p-6 cursor-pointer xs:w-1/2 md:w-1/3 xl:w-1/4"
             >
               <div className="flex items-center justify-center w-full h-16 text-center border border-gray-300 rounded-lg shadow hover:shadow-outline">
-                <p className="text-lg">{name}</p>
+                <Link
+                  as={`/kategori/${slug}-${id}`}
+                  href={`/kategori?slug=${slug}-${id}`}
+                >
+                  <p className="text-lg">{name}</p>
+                </Link>
               </div>
             </div>
           ))}

pages/kategori/[slug].js

@@ -0,0 +1,50 @@
+import { withRouter } from 'next/router';
+
+import SingleProduct from 'components/Product/SingleProduct.component';
+import client from 'utils/apollo/ApolloClient';
+
+import { GET_PRODUCTS_FROM_CATEGORY } from 'utils/const/GQL_QUERIES';
+
+/**
+ * Display a single product with dynamic pretty urls
+ */
+const Produkt = (props) => {
+  const { product } = props;
+
+  const error = false;
+
+  return (
+    <>
+      {product ? (
+        <SingleProduct product={product} />
+      ) : (
+        <div className="mt-8 text-2xl text-center">Laster produkt ...</div>
+      )}
+      {/* Display error message if error occured */}
+      {error && (
+        <div className="mt-8 text-2xl text-center">
+          Feil under lasting av produkt ...
+        </div>
+      )}
+    </>
+  );
+};
+
+export default withRouter(Produkt);
+
+export async function getStaticProps(context) {
+  let {
+    query: { slug, productId },
+  } = context;
+
+  const id = productId;
+
+  const res = await client.query({
+    query: GET_PRODUCTS_FROM_CATEGORY,
+    variables: { id },
+  });
+
+  return {
+    props: { product: res.data.product },
+  };
+}

utils/const/GQL_QUERIES.js

@@ -118,6 +118,56 @@ export const FETCH_ALL_CATEGORIES_QUERY = gql`
   }
 `;
 
+export const GET_PRODUCTS_FROM_CATEGORY = gql`
+  query ProductsFromCategory($id: ID!) {
+    productCategory(id: $id) {
+      id
+      name
+      products(first: 50) {
+        nodes {
+          id
+          productId
+          averageRating
+          slug
+          description
+          image {
+            id
+            uri
+            title
+            srcSet
+            sourceUrl
+          }
+          name
+          ... on SimpleProduct {
+            price
+            id
+          }
+          ... on VariableProduct {
+            price
+            id
+          }
+          ... on ExternalProduct {
+            price
+            id
+            externalUrl
+          }
+          ... on GroupProduct {
+            products {
+              nodes {
+                ... on SimpleProduct {
+                  id
+                  price
+                }
+              }
+            }
+            id
+          }
+        }
+      }
+    }
+  }
+`;
+
 export const GET_CART = gql`
   query GET_CART {
     cart {