Blog posts by Jonas Bergqvist

Optimizely Graph Cache: The Power of "Item"

Fri, 28 Feb 2025 14:56:08 GMT

In the world of content delivery, speed is king. A high cache hit ratio is the secret weapon for delivering snappy performance and happy users. But how do you achieve that? One powerful trick lies in understanding the difference between "items" and "item" in your GraphQL queries.

The Cache Challenge: Lists vs. Specifics

GraphQL's flexibility often leads to queries fetching lists ("items"). While necessary for many scenarios, this can hinder caching. Why? Because even a list with one item requires the cache to consider potential changes to any content, leading to frequent cache invalidations.

The "Item" Advantage: Precision Caching

Enter the "item" query. When you request a single item by its unique identifier, you unlock granular, efficient caching.

How to Leverage "Item" for Optimal Caching:

Improve Cache Hit Ratio: Swap "items" for "item" when fetching a single entity. It's a small change with big results.
Unique Identifier-Driven Queries: Only use "item" when targeting a specific item via its unique identifier (relative paths, URLs, codes, etc.).

Cache hit example for query with "item"

Cache hit example for query with "items"

Practical Example

Instead of

query GetItem($relativePath: String) {
  Content(limit:1 where: { RelativePath: { eq: $relativePath } }) {
    items { Name }
  }
}

Use

query GetItem($relativePath: String) {
  Content(where: { RelativePath: { eq: $relativePath } }) {
    item { Name }
  }
}

Conclusion

Using "item" for single entity retrieval based on unique identifiers dramatically improves cache hit ratios, enhancing performance and user experience. It's a simple, powerful technique to unlock the full potential of your GraphQL cache.

Boosting Graph Query Performance with Cached Templates

Thu, 27 Feb 2025 15:41:52 GMT

To optimize query performance, Cached Templates pre-process and caches translated queries as templates. The initial execution of a query generates a template with placeholders for variable values. This eliminates the need for repeated translation when the same query structure is used with different variables, resulting in substantial performance improvements.

Cached Templates can be activated by adding the stored=true query string parameter and the cg-stored-query: template header to your requests. The service will handle template generation and caching automatically, improving the efficiency of subsequent requests. This feature will be enabled for all requests automatically later this year.

The system supports the following variable types for cached templates: Boolean, Date, DateTime, String, Int, Float, Locales, and [Locales]. For Locales and [Locales] types, the variable name is required to be 'locale'. Any other variable types will result in a fallback to 'Cached Queries'.

Cached Queries, similar to Cached Templates, improve performance by caching fully resolved queries. They act as a backup for queries incompatible with Cached Templates.

These features are a major step towards optimized Graph query performance, ensuring faster applications and a better user experience.

Required fields support in Optimizely Graph

Wed, 25 Sep 2024 15:25:27 GMT

It's been possible to have "required" properties (value must be entered) in the CMS for a long time. The required metadata haven't been reflected in Graph - until now. Its now possible to get the GraphQL schema updated, to get information about which fields that always has a value.

Configure CMS

The CMS must be configured to send metadata about required (value must be entered) properties to the GraphQL schema. We had to add this configuration setting, to not create a breaking change for the 3.11.0 release. The default value is 'false'.

Set property as required

Here is an example of the property "Heading" in the "TeaserBlock" content type. This property is set to be "required" (value must be entered).

GraphQL query with required support

The GraphQL query is now configured to know that the field always has a value

Product Listing Page - using Graph

Fri, 05 Jul 2024 12:21:40 GMT

Optimizely Graph makes it possible to query your data in an advanced way, by using GraphQL. Querying data, using facets and search phrases, is very valuable when building "Product Listing Pages" for Commerce sites. I will describe how you can create your product listing page for Customizable Commerce, using NextJs.

We are going to use the Foundation example site in this tutorial. For more information how to setup Foundation, see https://github.com/episerver/Foundation

We will create a NextJs app where you can filter products by brand, size, color, and price. We will also be able to search using "semantic search" and normal relevance search.

Note: The templating and styling of the "product listing page" in this example has been made by a person (me) that has very poor knowledge of styling. Its just an example of how you can create a template.

Setup and start the Foundation site

Start with setting up the Foundation site, and make sure the site is running as it should. Also make sure you can login to edit/admin mode. For more information about the Foundation site, see https://github.com/episerver/Foundation

Enable Graph for the Foundation site

You need to have a Graph account to be able to send content from the Foundation site to Graph. But don't worry if you don't have any Graph account. We have prepared a Graph account with Foundation content, so you can test to create an application using our account.

Note: You can skip this part ("Enable Graph for the Foundation Site") if you don't have a Graph account. You can instead jump to the next section "Create GraphQL queries" and use the following singleKey: 5m4F2pBpXPWehc3QGqFfvohgNtgYxHQOxfmKsnqhRYDpZTBU

Install package to push content to Graph

Install the following nuget package (3.9.0 or later): Optimizely.ContentGraph.Cms

Optimizely.ContentGraph.Cms

Note: The current pre-package "Optimizely.ContentGraph.Commerce" is currently not maintained. A proper Commerce integration will come later. Don't use the pre-package Optimizely.ContentGraph.Commerce. Add classes similar to how I'm doing it in this blog post instead.

Configure your Graph account

Add the following section to appSettings.json:

  "Optimizely": {
    "ContentGraph": {
      "GatewayAddress": "https://cg.optimizely.com",
      "AppKey": "{your-app-key}",
      "Secret": "{your-secret}",
      "SingleKey": "{your-single-key}",
      "AllowSendingLog": "true"
    }
  }

And add the following to the "ConfigureServices" method in Startup.cs:

            services.AddContentGraph(x =>
            {
                x.IncludeInheritanceInContentType = true;
                x.PreventFieldCollision = true;
            });

Add a reference to "GraphCommerceIntegration" project

1. Clone the repository GraphCommerceIntegration

https://github.com/jonasbergqvist/GraphCommerceIntegration.git

2. Add the project "GraphCommerceIntegration.csproj", which you find under the "GraphCommerceIntegration" folder, to your Foundation solution.

3. Add Project reference in the Foundation site to "GraphCommerceIntegration"

4. Compile and start the Foundation site

Note: The repository contains

A class that makes scheduled job include catalog content (event synchronisation of catalog content works without referencing the project)
A class that includes all languages that has been configured on catalog content.
A class that triggers event synchronisation when prices have been changed.
Price Base class, which makes it easy to include price information on products and variations when they are pushed to Graph
Asset Base class, which makes it easy to add assets information on products and variations when they are pushed to Graph
Aggregation Base class, which makes it easy to aggregate data from variations to its related products.

Note: For more information, see the README at https://github.com/jonasbergqvist/GraphCommerceIntegration/tree/main

Add default price to Products and Variations

Add the following class to your Foundation site, to include default price on default market for products and variations:

    [ServiceConfiguration(typeof(IContentApiModelProperty), Lifecycle = ServiceInstanceScope.Singleton)]
    public class DefaultPriceContentApiModel : ContentApiModelPriceBase
    {
        private readonly ICurrentMarket _currentMarketService;

        public DefaultPriceContentApiModel(
            ContentTypeModelRepository contentTypeModelRepository,
            IContentLoader contentLoader,
            IPriceService priceService,
            ICurrentMarket currentMarketService)
            : base(contentTypeModelRepository, contentLoader, priceService)
        {
            _currentMarketService = currentMarketService;
        }

        public override string Name => "DefaultMarketPrice";

        protected override IMarket GetMarket()
        {
            return _currentMarketService.GetCurrentMarket();
        }
    }

Note: Products will get the lowest price from its related variations.

Aggregate data from Variation content to Product content

Add the following two classes, to include colors and sizes, when content is getting pushed to Graph:

Colors

    [ServiceConfiguration(typeof(IContentApiModelProperty), Lifecycle = ServiceInstanceScope.Singleton)]
    public class ColorContentApiModel : ProductAggregationContentApiModelBase<string, GenericProduct, GenericVariant>
    {
        public ColorContentApiModel(ContentTypeModelRepository contentTypeModelRepository, IContentLoader contentLoader)
            : base(contentTypeModelRepository, contentLoader)
        {
        }

        public override string Name => "Colors";

        protected override Expression<Func<GenericVariant, string>> VariationProperty => (x) => x.Color;
    }

Sizes

    [ServiceConfiguration(typeof(IContentApiModelProperty), Lifecycle = ServiceInstanceScope.Singleton)]
    public class SizeContentApiModel : ProductAggregationContentApiModelBase<string, GenericProduct, GenericVariant>
    {
        public SizeContentApiModel(ContentTypeModelRepository contentTypeModelRepository, IContentLoader contentLoader)
            : base(contentTypeModelRepository, contentLoader)
        {
        }

        public override string Name => "Sizes";

        protected override Expression<Func<GenericVariant, string>> VariationProperty => (x) => x.Size;

        protected override string ModifyValue(string value) => value.ToUpper();
    }

Push default product asset to Graph

Add the following class, to include the url of default product asset to products, when they are pushed to Graph

    [ServiceConfiguration(typeof(IContentApiModelProperty), Lifecycle = ServiceInstanceScope.Singleton)]
    public class DefaultImageUrlContentApiModel : CommerceAssetApiModelBase<string>
    {
        public DefaultImageUrlContentApiModel(ContentTypeModelRepository contentTypeModelRepository, IContentLoader contentLoader, IUrlResolver urlResolver)
            : base(contentTypeModelRepository, contentLoader, urlResolver)
        {
        }

        public override string Name => "DefaultImageUrl";

        public override string NoValue => string.Empty;

        protected override string GetAssets(IEnumerable<CommerceMedia> commerceMediaItems)
        {
            foreach(CommerceMedia media in commerceMediaItems.OrderBy(x => x.SortOrder))
            {
                if (ContentLoader.TryGet<IContentImage>(media.AssetLink, out var contentMedia))
                {
                    return GetUrl(media);
                }
            }

            return NoValue;
        }
    }

Create GraphQL queries

We will create a couple of GraphQL queries using the data from the Foundation site. We can use our online IDE using url https://cg.optimizely.com/app/graphiql?auth={your-single-key}. You can use our example account if you don't have any Graph account of your own: https://cg.optimizely.com/app/graphiql?auth=5m4F2pBpXPWehc3QGqFfvohgNtgYxHQOxfmKsnqhRYDpZTBU

Create ProductListing page

Create the following query (including a fragment) to handle the product listing page:

fragment GenericProductTeaser on GenericProduct {
  Name
  Code
  DefaultMarketPrice
  Brand
  DefaultImageUrl
}

query ProductListing(
  $languages: [Locales] = en
  $searchText: String,
  $brands: [String!],
  $sizes: [String!],
  $colors: [String!],
  $minPrice: Float,
  $maxPrice: Float,
  $skip: Int = 0,
  $limit: Int = 10,
  $order: GenericProductOrderByInput = { 
    _ranking: SEMANTIC,
  }) {
    GenericProduct(
      locale: $languages
      where:{
        _or:[
        {
          _fulltext: {
              match: $searchText
          }
        },
        {
          Name: {
            match: $searchText
            boost: 5
          }
        }
        ]
        DefaultMarketPrice: {
            gte: $minPrice
            lte: $maxPrice
        }
      }
      skip: $skip,
      limit: $limit
      orderBy: $order
  	) {
      total
      items {
          ...GenericProductTeaser
      }
      facets {
          Brand(filters: $brands) {
              name
              count
          }
          Sizes(filters:$sizes) {
              name
              count
          }
          Colors(filters:$colors) {
              name
              count
          }
          DefaultMarketPrice(
            ranges: [
              { to: 50 },
              { from: 51, to: 100 },
              { from: 101, to: 150 },
              { from: 151, to: 200 },
              { from: 201, to: 250 },
              { from: 251, to: 300 },
              { from: 301, to: 350 },
              { from: 351, to: 400 },
              { from: 401, to: 450 },
              { from: 451, to: 500 },
              { from: 501 },
            ]) {
              name
              count
           }
      	}
    }
}

Lets go through the query peice by peice

GenericProductTeaser

A fragment is a reusable partual query. You can think about them as blocks. We are creating a fragment that we call "GenericProductTeaser" (it can be called what ever we like) that is handling the "GenericProduct" type. "GenericProduct" is a content-type in the Foundation site, which has been pushed to Graph. We can now choose which fields (properties) to return from "GenericProduct" type. You will get intellisese by holding ctrl and clicking space (ctrl + space).

fragment GenericProductTeaser on GenericProduct {
  Name
  Code
  DefaultMarketPrice
  Brand
  DefaultImageUrl
}

Query name and Variables

We have named the query "ProductListing", but it could have been named anything. We have also added several variables to the query, which makes it possible to execute the query with many different options. You can think about a GraphQL query as a method in your favorite programming language. You name a query and add the variables to it that you like. You can then use the variables inside the query.

$languages: The languages that you want to get content for. This can be multiple languages. The values in "Locales" is the languages that you have configured in your commerce site.
$searchText: A search phrase to perform normal or semantic search
$brands: Selected brands
$sizes: Selected sizes
$minPrice: Lowest default price to get products for
$hightPrice: Highest default price to get products for
$skip: How many items from the top of the result to skip
$limit: The number of result items to get
$order: Which order to receive content.

query ProductListing(
  $languages: [Locales] = en
  $searchText: String,
  $brands: [String!],
  $sizes: [String!],
  $colors: [String!],
  $minPrice: Float,
  $maxPrice: Float,
  $skip: Int = 0,
  $limit: Int = 10,
  $order: GenericProductOrderByInput = { 
    _ranking: SEMANTIC,
  })

GenericProduct

We will query for all "GenericProduct" items using the content-type "GenericProduct". This will query all content that is of type "GenericProduct" or inherits from "GenericProduct".

GenericProduct(

Locale

The languages to query, were we use the variable $languages. Default value for $languages has been set to "en" in the query.

locale: $languages

Where

Filtering of content. Filtering will only happen for variables that has a value.

We are using an "_or" statement to match the variable "$searchText" against all searchable properties (_fullText) and "Name". We will boost result that matches "Name" by 5.

We will also filter the "default market price", based on the $minPrice and $maxPrice variables.

      where:{
        _or:[
        {
          _fulltext: {
              match: $searchText
          }
        },
        {
          Name: {
            match: $searchText
            boost: 5
          }
        }
        ]
        DefaultMarketPrice: {
            gte: $minPrice
            lte: $maxPrice
        }
      }

Skip & Limit

Skip $skip items from the top and include $limit number of items in the result

      skip: $skip,
      limit: $limit

OrderBy

Order the result based on the incoming $order variable. It will by default order the result based on "semantic search" ranking (default variable value in the query)

orderBy: $order

Total

The total number of result for the query

total

Items

Items are being used to get selected fields (properties). We are referencing the fragment "GenericProductTeaser" to get the fields (properties) specified in the fragment

items {
          ...GenericProductTeaser
      }

Facets

Facets are aggregating data for a specific field (property) and gives you the unique values together with "count" for the unique value.

We are creating facets for "Brand", "Sizes", "Colors", and "DefaultMarketPrice". The first three facets are simple facets, where we use "filters" parameter for each facet to specify which values the user has selected. The last facet is a range facet, to give the the count for different price intervals.

      facets {
          Brand(filters: $brands) {
              name
              count
          }
          Sizes(filters:$sizes) {
              name
              count
          }
          Colors(filters:$colors) {
              name
              count
          }
          DefaultMarketPrice(
            ranges: [
              { to: 50 },
              { from: 51, to: 100 },
              { from: 101, to: 150 },
              { from: 151, to: 200 },
              { from: 201, to: 250 },
              { from: 251, to: 300 },
              { from: 301, to: 350 },
              { from: 351, to: 400 },
              { from: 401, to: 450 },
              { from: 451, to: 500 },
              { from: 501 },
            ]) {
              name
              count
          	}
      	}

Create Product Details page

We will also create a product detail page, which will get a product using "code"

query ProductDetail(
  $locale: Locales = en
  $code: String!
) {
  GenericProduct(
    locale: [$locale]
    where:{
      Code: { eq: $code }
    }
    limit:1
  ) {
    items {
      Name
      Code
      DefaultImageUrl
      DefaultMarketPrice
      Brand
      LongDescription
    }
  }
}

Create NextJs application with Foundation data

We will create a NextJs app from scratch. If you want to see how the final result can be, than check out the site here: https://github.com/jonasbergqvist/GraphCommerceIntegration/tree/main/graph-commerce-example-app

Create new NextJs app

npx create-next-app@latest

TypeSript: Yes
ESLint: Yes
Tailwind CSS: Yes
src/ directory: Yes
App Router: No
Customize the defaultimport alias: No

Add dependencies

Open package.json and add the following

In devDependencies

    "@graphql-codegen/cli": "^5.0.2",
    "@graphql-codegen/client-preset": "^4.2.6",
    "@parcel/watcher": "^2.4.1",

In dependencies

    "@apollo/client": "^3.10.4",
    "graphql": "^16.8.1",
    "html-react-parser": "^5.1.10",
    "next-range-slider": "^1.0.5",

In scripts

"codegen": "graphql-codegen --watch",

Install all dependencies

Run the following command to install all the dependencies

npm install

Configure GraphQL Codegen

GraphQL codegen is a greate tool to give strongly typed queries and query result. We need to configure Codegen to use our account in Graph for the application

Create codegen.ts

Create a new file under the root folder of the application with name "codegen.ts" and add the following

import { CodegenConfig  } from '@graphql-codegen/cli'

const config : CodegenConfig = {
    schema: "https://cg.optimizely.com/content/v2?auth={your-single-key}",
    documents: ["src/**/*.{ts,tsx}"],
    ignoreNoDocuments: true,
    generates: {
        './src/graphql/': {
            preset: 'client',
            plugins: [],
        }
    }
}

export default config

Change {your-single-key} to your single-key. If you don't have any Graph account, then use

5m4F2pBpXPWehc3QGqFfvohgNtgYxHQOxfmKsnqhRYDpZTBU

Start codegen watcher

Run the following command to let GraphQL codegen continuesly check your project for GraphQL queries

yarn codegen

Use Apollo Client with one-page edit support

Apollo Client is one of many clients that has build-in GraphQL support. We will use Apollo Client in this example, but you can use any client of choose in your own projects.

Add apolloClient.tsx

Add a new file with name "apolloClient.tsx" under "src" folder

import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';

let client: ApolloClient<any> | undefined = undefined;

if (typeof window !== "undefined" && window.location !== undefined) {
    const queryString = window?.location?.search;
    const urlParams = new URLSearchParams(queryString);
    const preview_token = urlParams.get('preview_token') ?? undefined;

    if (preview_token) {
        const httpLink = createHttpLink({
            uri: 'https://cg.optimizely.com/content/v2',
        });

        const authLink = setContext((_, { headers }) => {
            return {
                headers: {
                    ...headers,
                    authorization: `Bearer ${preview_token}`
                }
            };
        });

        client = new ApolloClient({
            link: authLink.concat(httpLink),
            cache: new InMemoryCache()
        });

        const communicationScript = document.createElement('script');
        communicationScript.src = `{url-to-your-foundation-site}/Util/javascript/communicationinjector.js`;
        communicationScript.setAttribute('data-nscript', 'afterInteractive')
        document.body.appendChild(communicationScript);
    }
}

if (client === undefined) {
    const httpLink = createHttpLink({
        uri: 'https://cg.optimizely.com/content/v2?auth={your-single-key}',
    });

    const authLink = setContext((_, { headers }) => {
        return {
            headers: {
                ...headers
            }
        };
    });

    client = new ApolloClient({
        link: authLink.concat(httpLink),
        cache: new InMemoryCache()
    });
}

export default client;

Your need to change two things in this file:

Change {url-to-your-foundation-site} to the url where you run your Foundation site, for example https://localhost:44397
{your-single-key} to your single-key of your Graph account. Use 5m4F2pBpXPWehc3QGqFfvohgNtgYxHQOxfmKsnqhRYDpZTBU if you don't have any Graph account

Update _app.tsx to use your apollo cloent

Update_app.tsx under src/pages to be the following

import "@/styles/globals.css";
import { ApolloProvider } from "@apollo/client";
import type { AppProps } from "next/app";
import client from '../apolloClient';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <ApolloProvider client={client!}>
      <Component {...pageProps} />
    </ApolloProvider>
  );
}

Create GenericProductTeaserComponent.tsx

Add a folder with name "components" under "src" and add a file with name "GenericProductTeaserComponent.tsx" in the "components" folder.

import { FragmentType, graphql, useFragment } from "@/graphql"
import { Dispatch, FC, SetStateAction, useState } from "react"; 

export const GenericProductTeaserFragment = graphql(/* GraphQL */ `
    fragment GenericProductTeaser on GenericProduct {
        Name
        Code
        DefaultMarketPrice
        Brand
        DefaultImageUrl
    }
`)

interface GenericProductTeaserProps {
    GenericProductTeaser: FragmentType<typeof GenericProductTeaserFragment>
    setSelectedCode: Dispatch<SetStateAction<string>>;
    setShowModal: Dispatch<SetStateAction<boolean>>;
}
 
const GenericProductTeaserComponent: FC<GenericProductTeaserProps> = ({ GenericProductTeaser, setSelectedCode, setShowModal}) => {
    const setSelected = (event: any) => {
        if(event?.target?.id) {
            setSelectedCode(event?.target?.id)
            setShowModal(true)
        }
      }

    const item = useFragment(GenericProductTeaserFragment, GenericProductTeaser)
    const imageUrl = 'https://localhost:44397' + item.DefaultImageUrl
        return (
            <div className="group relative">
                <div className="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-md bg-gray-200 lg:aspect-none group-hover:opacity-75 lg:h-80">
                    <img src={imageUrl} alt={item.Name ?? ''} id={item.Code ?? ''} onClick={setSelected} className="h-full w-full object-cover object-center lg:h-full lg:w-full"/>
                </div>
                <div className="mt-4 flex justify-between">
                <div>
                    <h3 className="text-sm text-gray-700">
                        <button data-modal-target="defaultModal" data-modal-toggle="defaultModal" id={item.Code ?? ''} onClick={setSelected} className="inline-flex items-center text-blue-400">
                            {item.Name}
                        </button>
                    </h3>
                    <p className="mt-1 text-sm text-gray-500">{item.Brand}</p>
                </div>
                <p className="text-sm font-medium text-gray-900">${item.DefaultMarketPrice}</p>
                </div>
            </div>
        )
}
 
export default GenericProductTeaserComponent

The GraphQL fragment GenericProductTeaser is added in the beginning of the file. This query is then used in the "GenericProductTeaserComponent". You can try to add fields (properties) that exist in GenericProduct in the fragment. You will have the fields/properties available in the GenericProductTeaserComponent a couple of seconds after you have added them and saved the file.

Test to add _score and save the file

    fragment GenericProductTeaser on GenericProduct {
        Name
        Code
        DefaultMarketPrice
        Brand
        DefaultImageUrl
        _score
    }

_score will be available in "item" inside GenericProductTeaserComponent a couple of seconds after you have saved the file.

Try to build the site

Check that everything is working by running the following command

npm run build

Create ProductListingComponent..tsx

Create ProductListingComponent.tsx under the "components" with the product listing page GraphQL query

import React, { FC, useState } from 'react'
import { useQuery } from '@apollo/client'

import { graphql } from '@/graphql'
import GenericProductTeaserComponent from './GenericProductTeaserComponent'
 
export const ProductListing = graphql(/* GraphQL */ `
    query ProductListing(
        $languages: [Locales] = en
        $searchText: String,
        $brands: [String!],
        $sizes: [String!],
        $colors: [String!],
        $minPrice: Float,
        $maxPrice: Float,
        $skip: Int = 0,
        $limit: Int = 10,
        $order: GenericProductOrderByInput = {       
            _ranking: SEMANTIC,
            DefaultMarketPrice: ASC 
        }
        )
        {
        GenericProduct(
            locale: $languages
            where:{
                _or:[
                    {
					    _fulltext: {
                            match: $searchText
                        }
                    },
                    {
						Name: {
                            match: $searchText
                            boost: 20
                        }
                    }
                ]
                DefaultMarketPrice: {
                    gte: $minPrice
                    lte: $maxPrice
                }
            }
            skip: $skip,
            limit: $limit
            orderBy: $order
        ) {
            total
            items {
                ...GenericProductTeaser
            }
            facets {
                Brand(filters: $brands) {
                    name
                    count
                }
                Sizes(filters:$sizes) {
                    name
                    count
                }
                Colors(filters:$colors) {
                    name
                    count
                }
                DefaultMarketPrice(ranges: [
                    { to: 50 },
                    { from: 51, to: 100 },
                    { from: 101, to: 150 },
                    { from: 151, to: 200 },
                    { from: 201, to: 250 },
                    { from: 251, to: 300 },
                    { from: 301, to: 350 },
                    { from: 351, to: 400 },
                    { from: 401, to: 450 },
                    { from: 451, to: 500 },
                    { from: 501 },
                ]) {
                    name
                    count
                }
            }
        }
    }
`)
 
const ProductListingComponent: FC = () => {

    const [showModal, setShowModal] = useState(false);
    const [selectedCode, setSelectedCode] = useState(() => '');

    const { data } = useQuery(ProductListing, { 
        variables: { 

        } 
    })

    return (
        <main>
            <div className="flex">
            <div className="relative hidden lg:block w-80">
                <div className="h-full rounded-2xl ml-4 bg-slate-50">
                    
                    <nav className="mt-2 ml-4 mr-4">
                        <div>

                        </div>
                    </nav>

                    <nav className="mt-2 ml-4">
                        <div>

                        </div>
                    </nav>

                    <nav className="mt-2 ml-4">
                        <div>

                        </div>
                    </nav>

                    <nav className="mt-2 ml-4">
                        <div>

                        </div>
                    </nav>
                </div>
            </div>
            
            <div className="w-full pl-0 md:p-2">
                <header className="z-40 items-center w-full h-16 shadow-lg rounded-2xl bg-slate-50">
                    <div className="relative z-20 flex flex-col justify-center h-full px-3 mx-auto flex-center"  style={{ background: "radial-gradient(141.61% 141.61% at 29.14% -11.49%, rgba(203, 213, 225, 0.15) 0%, rgba(203, 213, 225, 0) 57.72%)"}}>
                        <div className="relative flex items-center w-full pl-1 lg:max-w-68 sm:pr-2 sm:ml-0 ">

                            <div className='mt-2 ml-4'>

                            </div>
                        </div>
                    </div>
                </header>
                <main role="main" className="w-full h-full flex-grow p-3 overflow-auto">
                    <div className="tracking-widest text-lg title-font font-medium  mb-1">Hits: { data?.GenericProduct?.total }</div>  
                    
                    <div className="custom-screen ">
                        <div className="mt-12">
                            <ul className="grid grid-cols-3 gap-10">
                                { data?.GenericProduct?.items?.map((item, index) => {
                                    return <GenericProductTeaserComponent 
                                        key={index} 
                                        GenericProductTeaser={item!}
                                        setSelectedCode={setSelectedCode}
                                        setShowModal={setShowModal}
                                        />
                                })}
                            </ul>
                        </div>
                    </div>
                 </main>
                </div>
            </div>
        </main>
    )
}
 
export default ProductListingComponent

Update index.tsx

Update index.tsx in src/pages folder to the following

import ProductListingComponent from "@/components/ProductListingComponent";

export default function Home() {
  return (
      <ProductListingComponent />
  );
}

Start the Foundation website to make images work

Start the Foundation website if its not running already. It needs to run to make images in the NextJs app work. The reason for this is that Graph only stores the link to the actual images, which lives inside the Commerce system. Everything except the images (you will get broken images) will work in case you don't start the Foundation site.

Start the NextJs app

npm run dev

You should now see some products when browsing to

http://localhost:3000/

Create ProductDetailComponent.tsx

Create a file with name ProductDetailComponent.tsx under "components"

import React, { Dispatch, FC, SetStateAction, useEffect, useState } from 'react'
import { useQuery } from '@apollo/client'
import { graphql } from '@/graphql'
import parse from 'html-react-parser';


export const ProductDetail = graphql(/* GraphQL */ `
    query ProductDetail(
    $locale: Locales = en
    $code: String!
    ) {
    GenericProduct(
        locale: [$locale]
        where:{
        Code: { eq: $code }
        }
        limit:1
    ) {
        items {
        Name
        Code
        DefaultImageUrl
        DefaultMarketPrice
        Brand
        LongDescription
        }
    }
    }
`)


interface ProductDetailProps {
    code: string
    setOpen: Dispatch<SetStateAction<boolean>>;
}
 
const ProductDetailComponent: FC<ProductDetailProps> = ({code, setOpen}) => {


    const { data } = useQuery(ProductDetail, {
        variables: {
            code
        }
    })


    const item = data?.GenericProduct?.items![0]
    const imageUrl = '{url-to-your-foundation-site}' + item?.DefaultImageUrl
    return (
        <div className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none">
            <div className="relative w-auto my-6 mx-auto max-w-3xl">
            {/*content*/}
            <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
                {/*header*/}
                <div className="flex items-start justify-between p-5 border-b border-solid border-slate-200 rounded-t">
                <h3 className="text-3xl font-semibold">
                    { item?.Name }
                </h3>
                    <button
                        className="text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
                        type="button"
                        onClick={() => setOpen(false)}
                    >
                        Close
                    </button>
                </div>
                {/*body*/}
                <div className="relative p-6 flex-auto">
                <div className="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-md bg-gray-200 lg:aspect-none group-hover:opacity-75 lg:h-80">
                    <img src={imageUrl} alt={item?.Name ?? ''} className="h-full w-full object-cover object-center lg:h-full lg:w-full"/>
                </div>
                    <p className="my-4 text-slate-500 text-lg leading-relaxed">
                        { parse(item?.LongDescription ?? '')}
                    </p>
                    <p className="my-4 text-slate-800 text-lg leading-relaxed">
                        From: {item?.Brand}
                    </p>
                </div>
                {/*footer*/}
            </div>
            </div>
        </div>
    )
}
 
export default ProductDetailComponent

Change {url-to-your-foundation-site} to the url where you run your Foundation site, for example https://localhost:44397

Update ProductListingComponent to load product details when needed

Update ProductListingComponent.tsx to open product details component in a modal when clicking on the image or name

Add the following before </main>

            { 
                showModal ? (
                    <ProductDetailComponent
                        setOpen={setShowModal}
                        code={selectedCode}
                    />
                ) : null
            }

and import the ProductDetailComponent

import ProductDetailComponent from './ProductDetailComponent'

The ProductListingComponent should now look like this

import React, { FC, useState } from 'react'
import { useQuery } from '@apollo/client'

import { graphql } from '@/graphql'
import GenericProductTeaserComponent from './GenericProductTeaserComponent'
import ProductDetailComponent from './ProductDetailComponent'
 
export const ProductListing = graphql(/* GraphQL */ `
    query ProductListing(
        $languages: [Locales] = en
        $searchText: String,
        $brands: [String!],
        $sizes: [String!],
        $colors: [String!],
        $minPrice: Float,
        $maxPrice: Float,
        $skip: Int = 0,
        $limit: Int = 10,
        $order: GenericProductOrderByInput = {       
            _ranking: SEMANTIC,
            DefaultMarketPrice: ASC 
        }
        )
        {
        GenericProduct(
            locale: $languages
            where:{
                _or:[
                    {
					    _fulltext: {
                            match: $searchText
                        }
                    },
                    {
						Name: {
                            match: $searchText
                            boost: 20
                        }
                    }
                ]
                DefaultMarketPrice: {
                    gte: $minPrice
                    lte: $maxPrice
                }
            }
            skip: $skip,
            limit: $limit
            orderBy: $order
        ) {
            total
            items {
                ...GenericProductTeaser
            }
            facets {
                Brand(filters: $brands) {
                    name
                    count
                }
                Sizes(filters:$sizes) {
                    name
                    count
                }
                Colors(filters:$colors) {
                    name
                    count
                }
                DefaultMarketPrice(ranges: [
                    { to: 50 },
                    { from: 51, to: 100 },
                    { from: 101, to: 150 },
                    { from: 151, to: 200 },
                    { from: 201, to: 250 },
                    { from: 251, to: 300 },
                    { from: 301, to: 350 },
                    { from: 351, to: 400 },
                    { from: 401, to: 450 },
                    { from: 451, to: 500 },
                    { from: 501 },
                ]) {
                    name
                    count
                }
            }
        }
    }
`)
 
const ProductListingComponent: FC = () => {

    const [showModal, setShowModal] = useState(false);
    const [selectedCode, setSelectedCode] = useState(() => '');

    const { data } = useQuery(ProductListing, { 
        variables: { 

        } 
    })

    return (
        <main>
            <div className="flex">
            <div className="relative hidden lg:block w-80">
                <div className="h-full rounded-2xl ml-4 bg-slate-50">
                    
                    <nav className="mt-2 ml-4 mr-4">
                        <div>

                        </div>
                    </nav>

                    <nav className="mt-2 ml-4">
                        <div>

                        </div>
                    </nav>

                    <nav className="mt-2 ml-4">
                        <div>

                        </div>
                    </nav>

                    <nav className="mt-2 ml-4">
                        <div>

                        </div>
                    </nav>
                </div>
            </div>
            
            <div className="w-full pl-0 md:p-2">
                <header className="z-40 items-center w-full h-16 shadow-lg rounded-2xl bg-slate-50">
                    <div className="relative z-20 flex flex-col justify-center h-full px-3 mx-auto flex-center"  style={{ background: "radial-gradient(141.61% 141.61% at 29.14% -11.49%, rgba(203, 213, 225, 0.15) 0%, rgba(203, 213, 225, 0) 57.72%)"}}>
                        <div className="relative flex items-center w-full pl-1 lg:max-w-68 sm:pr-2 sm:ml-0 ">

                            <div className='mt-2 ml-4'>

                            </div>
                        </div>
                    </div>
                </header>
                <main role="main" className="w-full h-full flex-grow p-3 overflow-auto">
                    <div className="tracking-widest text-lg title-font font-medium  mb-1">Hits: { data?.GenericProduct?.total }</div>  
                    
                    <div className="custom-screen ">
                        <div className="mt-12">
                            <ul className="grid grid-cols-3 gap-10">
                                { data?.GenericProduct?.items?.map((item, index) => {
                                    return <GenericProductTeaserComponent 
                                        key={index} 
                                        GenericProductTeaser={item!}
                                        setSelectedCode={setSelectedCode}
                                        setShowModal={setShowModal}
                                        />
                                })}
                            </ul>
                        </div>
                    </div>
                 </main>
                </div>
            </div>
            { 
                showModal ? (
                    <ProductDetailComponent
                        setOpen={setShowModal}
                        code={selectedCode}
                    />
                ) : null
            }
        </main>
    )
}
 
export default ProductListingComponent

Test the app

Try to click on an image to load details about the product

Create TermFacetComponent.tsx

Create TermFacetComponent.tsx in "components" folder with following code

import { StringFacet } from "@/graphql/graphql"
import { Dispatch, FC, SetStateAction } from "react"

interface TermFacetProps {
    headingText: string
    values: string[]
    facet: StringFacet[] | null
    setValues: Dispatch<SetStateAction<string[]>>;
}

const TermFacetComponent: FC<TermFacetProps> = ({ headingText, values, facet, setValues }) => {

    const handleSelection = (event: React.ChangeEvent<HTMLInputElement>) => {
        let localValues = Array.from(values)
        if(event.target.checked) {
            localValues.push(event.target.id);
        }
        else {
            localValues = localValues.filter(x => x !== event.target.id);
        }
        setValues(localValues);
    };

    return (
      <div className="border-b border-gray-200 py-6">
        <h3 className="-my-3 flow-root">{ headingText }</h3>
        <div className="pt-6" id="filter-section-0">
          <div className="space-y-4">
            
              { facet?.map((item, idx) => {
                  return (
                    <div className="flex items-center" key={idx}>
                      <input id={item?.name ?? ''} name="color[]" value={item?.name ?? ''} checked={values.indexOf(item?.name ?? '') > -1 } onChange={handleSelection} type="checkbox" className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"/>
                      <label htmlFor="filter-color-0" className="ml-3 text-sm text-gray-600">{ item?.name } ({ item?.count })</label>
                    </div>
                  )
              }) }
          </div>
        </div>
      </div>
    )
}

export default TermFacetComponent

Update ProductListingComponent.tsx to use terms facets

Update ProductListingComponent.tsx to look like this

import React, { FC, useEffect, useState } from 'react'
import { useQuery } from '@apollo/client'

import { graphql } from '@/graphql'
import GenericProductTeaserComponent from './GenericProductTeaserComponent'
import ProductDetailComponent from './ProductDetailComponent'
import TermFacetComponent from './TermFacetComponent'
import { StringFacet } from '@/graphql/graphql'
 
export const ProductListing = graphql(/* GraphQL */ `
    query ProductListing(
        $languages: [Locales] = en
        $searchText: String,
        $brands: [String!],
        $sizes: [String!],
        $colors: [String!],
        $minPrice: Float,
        $maxPrice: Float,
        $skip: Int = 0,
        $limit: Int = 10,
        $order: GenericProductOrderByInput = {       
            _ranking: SEMANTIC,
            DefaultMarketPrice: ASC 
        }
        )
        {
        GenericProduct(
            locale: $languages
            where:{
                _or:[
                    {
					    _fulltext: {
                            match: $searchText
                        }
                    },
                    {
						Name: {
                            match: $searchText
                            boost: 20
                        }
                    }
                ]
                DefaultMarketPrice: {
                    gte: $minPrice
                    lte: $maxPrice
                }
            }
            skip: $skip,
            limit: $limit
            orderBy: $order
        ) {
            total
            items {
                ...GenericProductTeaser
            }
            facets {
                Brand(filters: $brands) {
                    name
                    count
                }
                Sizes(filters:$sizes) {
                    name
                    count
                }
                Colors(filters:$colors) {
                    name
                    count
                }
                DefaultMarketPrice(ranges: [
                    { to: 50 },
                    { from: 51, to: 100 },
                    { from: 101, to: 150 },
                    { from: 151, to: 200 },
                    { from: 201, to: 250 },
                    { from: 251, to: 300 },
                    { from: 301, to: 350 },
                    { from: 351, to: 400 },
                    { from: 401, to: 450 },
                    { from: 451, to: 500 },
                    { from: 501 },
                ]) {
                    name
                    count
                }
            }
        }
    }
`)
 
const ProductListingComponent: FC = () => {

    const [brands, setBrands] = useState(() => new Array<string>());
    const [brandFacet, setBrandFacet] = useState(() => new Array<StringFacet>())

    const [colors, setColors] = useState(() => new Array<string>());
    const [colorFacet, setColorFacet] = useState(() => new Array<StringFacet>())

    const [sizes, setSizes] = useState(() => new Array<string>());
    const [sizeFacet, setSizeFacet] = useState(() => new Array<StringFacet>())

    const [showModal, setShowModal] = useState(false);
    const [selectedCode, setSelectedCode] = useState(() => '');

    const { data } = useQuery(ProductListing, { 
        variables: { 
            brands, 
            colors, 
            sizes,
        } 
    })
    
    function facetOptionChanged(fasetQueryResult: StringFacet[], faset: StringFacet[]): boolean {
        if(fasetQueryResult.length != faset.length) {
            return true
        }

        for (let i = 0; i < fasetQueryResult.length; i++) {
            if(fasetQueryResult[i]?.name !== faset[i]?.name) {
                return true
            }

            if(fasetQueryResult[i]?.count !== faset[i]?.count) {
                return true
            }
        }

        return false
    }

    useEffect(() => {
        if(data?.GenericProduct?.facets?.Brand != undefined && data?.GenericProduct?.facets?.Brand) {
          if(facetOptionChanged(data?.GenericProduct?.facets?.Brand as StringFacet[], brandFacet)) {
            setBrandFacet(data.GenericProduct.facets?.Brand as StringFacet[])
          }
        }

        if(data?.GenericProduct?.facets?.Colors != undefined && data?.GenericProduct?.facets?.Colors) {
            if(facetOptionChanged(data?.GenericProduct?.facets?.Colors as StringFacet[], colorFacet)) {
              setColorFacet(data.GenericProduct.facets?.Colors as StringFacet[])
            }
        }

        if(data?.GenericProduct?.facets?.Sizes != undefined && data?.GenericProduct?.facets?.Sizes) {
            if(facetOptionChanged(data?.GenericProduct?.facets?.Sizes as StringFacet[], sizeFacet)) {
              setSizeFacet(data.GenericProduct.facets?.Sizes as StringFacet[])
            }
        }
      }, [brandFacet, colorFacet, sizeFacet, data?.GenericProduct?.facets]);

    return (
        <main>
            <div className="flex">
            <div className="relative hidden lg:block w-80">
                <div className="h-full rounded-2xl ml-4 bg-slate-50">
                    
                    <nav className="mt-2 ml-4 mr-4">
                        <div>

                        </div>
                    </nav>

                    <nav className="mt-2 ml-4">
                        <div>
                        <TermFacetComponent
                                headingText='Brands'
                                facet={brandFacet}
                                values={brands}
                                setValues={setBrands}
                            />
                        </div>
                    </nav>

                    <nav className="mt-2 ml-4">
                        <div>
                        <TermFacetComponent
                                headingText='Colors'
                                facet={colorFacet}
                                values={colors}
                                setValues={setColors}
                            />
                        </div>
                    </nav>

                    <nav className="mt-2 ml-4">
                        <div>
                        <TermFacetComponent
                                headingText='Sizes'
                                facet={sizeFacet}
                                values={sizes}
                                setValues={setSizes}
                            />
                        </div>
                    </nav>
                </div>
            </div>
            
            <div className="w-full pl-0 md:p-2">
                <header className="z-40 items-center w-full h-16 shadow-lg rounded-2xl bg-slate-50">
                    <div className="relative z-20 flex flex-col justify-center h-full px-3 mx-auto flex-center"  style={{ background: "radial-gradient(141.61% 141.61% at 29.14% -11.49%, rgba(203, 213, 225, 0.15) 0%, rgba(203, 213, 225, 0) 57.72%)"}}>
                        <div className="relative flex items-center w-full pl-1 lg:max-w-68 sm:pr-2 sm:ml-0 ">

                            <div className='mt-2 ml-4'>

                            </div>
                        </div>
                    </div>
                </header>
                <main role="main" className="w-full h-full flex-grow p-3 overflow-auto">
                    <div className="tracking-widest text-lg title-font font-medium  mb-1">Hits: { data?.GenericProduct?.total }</div>  
                    
                    <div className="custom-screen ">
                        <div className="mt-12">
                            <ul className="grid grid-cols-3 gap-10">
                                { data?.GenericProduct?.items?.map((item, index) => {
                                    return <GenericProductTeaserComponent 
                                        key={index} 
                                        GenericProductTeaser={item!}
                                        setSelectedCode={setSelectedCode}
                                        setShowModal={setShowModal}
                                        />
                                })}
                            </ul>
                        </div>
                    </div>
                 </main>
                </div>
            </div>
            { 
                showModal ? (
                    <ProductDetailComponent
                        setOpen={setShowModal}
                        code={selectedCode}
                    />
                ) : null
            }
        </main>
    )
}
 
export default ProductListingComponent

Test facets in the app

Test to click on different facet values, and validate that correct products are shown based on your selections

Create RangeFacetComponent.tsx

Create RangeFacetComponent.tsx under "Components" with following code

import { NumberFacet } from "@/graphql/graphql"
import React, { Dispatch, FC, SetStateAction, useEffect, useState } from "react";
import { RangeSlider } from 'next-range-slider';
import 'next-range-slider/dist/main.css';

interface RangeFacetProps {
    headingText: string
    minValue: number
    maxValue: number
    currentLowValue: number
    currentHighValue: number
    facet: NumberFacet[] | null
    setLowValue: Dispatch<SetStateAction<number>>;
    setHighValue: Dispatch<SetStateAction<number>>;
}

const RangeFacetComponent: FC<RangeFacetProps> = ({ headingText, minValue, maxValue, currentLowValue, currentHighValue, facet, setLowValue, setHighValue }) => {

    const [localLowValue, setLocalLowValue] = useState(() => minValue);
    const [localHighValue, setHighLocalValue] = useState(() => maxValue)

    useEffect(() => {
        const delayDebounceFn = setTimeout(() => {
          setLowValue(localLowValue)
          setHighValue(localHighValue)
        }, 500)
    
        return () => clearTimeout(delayDebounceFn)
      }, [localLowValue, localHighValue, setLowValue, setHighValue])

      const facetValues = Array.from(facet?.values() ?? []).map((x) => x.count!)
      const highestFacetCount = Math.max(...facetValues)
    return (
        <div className="border-b border-gray-200 py-6">
            <div className="flex flex-col items-center w-full max-w-screen-md p-6 pb-6 rounded-lg shadow-xl sm:p-1">
		        <div className="flex items-end flex-grow w-full mt-2 space-x-2 sm:space-x-3 h-16">
                {
                    facet?.map((x, index) => {
                        let hValue = Math.round((x.count! / highestFacetCount) * 12)
                        if(Math.abs(hValue % 2) == 1) {
                            hValue = hValue - 1
                        }
                        const className = "bg-indigo-200 relative flex justify-center w-full h-" + hValue
                        return (
                            <div className="relative flex flex-col items-center flex-grow pb-5 group" key={index}>
                                <span className="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block">{x?.count ?? '0'}</span>
                                <div className={className}></div>
                            </div>
                        )
                    })
                }
		        </div>
	        </div>
            <div>
                <RangeSlider
                    min={minValue}
                    max={maxValue}
                    step={10}
                    options={{
                        leftInputProps: {
                            value: currentLowValue,
                            onChange: (e) => setLocalLowValue(Number(e.target.value)),
                        },
                        rightInputProps: {
                            value: currentHighValue,
                            onChange: (e) => setHighLocalValue(Number(e.target.value)),
                        },
                        }
                    }
                />
            </div>
            <div className="text-center">{ headingText }: {currentLowValue} - {currentHighValue}</div>
        </div>
  );
}

export default RangeFacetComponent

Update ProductListingComponent to add price facet

Add RangeFacetComponent and two "useStates". The variables send in the GraphQL query will also have to pass the minPrice and maxPrice

<RangeFacetComponent
                                headingText='Price range'
                                currentHighValue={highPrice}
                                setHighValue={setHighPrice}
                                setLowValue={setLowPrice}
                                currentLowValue={lowPrice}
                                minValue={0}
                                maxValue={600}
                                facet={data?.GenericProduct?.facets?.DefaultMarketPrice as NumberFacet[]}
                            />

    const [lowPrice, setLowPrice] = useState(() => 0);
    const [highPrice, setHighPrice] = useState(() => 600)

    const { data } = useQuery(ProductListing, { 
        variables: { 
            brands, 
            colors, 
            sizes,
            minPrice: lowPrice,
            maxPrice: highPrice,
        } 
    })

The ProductListingComponent should have the following code after adding RangeFacetComponent

import React, { FC, useEffect, useState } from 'react'
import { useQuery } from '@apollo/client'

import { graphql } from '@/graphql'
import GenericProductTeaserComponent from './GenericProductTeaserComponent'
import ProductDetailComponent from './ProductDetailComponent'
import TermFacetComponent from './TermFacetComponent'
import { NumberFacet, StringFacet } from '@/graphql/graphql'
import RangeFacetComponent from './RangeFacetComponent'
 
export const ProductListing = graphql(/* GraphQL */ `
    query ProductListing(
        $languages: [Locales] = en
        $searchText: String,
        $brands: [String!],
        $sizes: [String!],
        $colors: [String!],
        $minPrice: Float,
        $maxPrice: Float,
        $skip: Int = 0,
        $limit: Int = 10,
        $order: GenericProductOrderByInput = {       
            _ranking: SEMANTIC,
            DefaultMarketPrice: ASC 
        }
        )
        {
        GenericProduct(
            locale: $languages
            where:{
                _or:[
                    {
					    _fulltext: {
                            match: $searchText
                        }
                    },
                    {
						Name: {
                            match: $searchText
                            boost: 20
                        }
                    }
                ]
                DefaultMarketPrice: {
                    gte: $minPrice
                    lte: $maxPrice
                }
            }
            skip: $skip,
            limit: $limit
            orderBy: $order
        ) {
            total
            items {
                ...GenericProductTeaser
            }
            facets {
                Brand(filters: $brands) {
                    name
                    count
                }
                Sizes(filters:$sizes) {
                    name
                    count
                }
                Colors(filters:$colors) {
                    name
                    count
                }
                DefaultMarketPrice(ranges: [
                    { to: 50 },
                    { from: 51, to: 100 },
                    { from: 101, to: 150 },
                    { from: 151, to: 200 },
                    { from: 201, to: 250 },
                    { from: 251, to: 300 },
                    { from: 301, to: 350 },
                    { from: 351, to: 400 },
                    { from: 401, to: 450 },
                    { from: 451, to: 500 },
                    { from: 501 },
                ]) {
                    name
                    count
                }
            }
        }
    }
`)
 
const ProductListingComponent: FC = () => {

    const [brands, setBrands] = useState(() => new Array<string>());
    const [brandFacet, setBrandFacet] = useState(() => new Array<StringFacet>())

    const [colors, setColors] = useState(() => new Array<string>());
    const [colorFacet, setColorFacet] = useState(() => new Array<StringFacet>())

    const [sizes, setSizes] = useState(() => new Array<string>());
    const [sizeFacet, setSizeFacet] = useState(() => new Array<StringFacet>())

    const [lowPrice, setLowPrice] = useState(() => 0);
    const [highPrice, setHighPrice] = useState(() => 600)

    const [showModal, setShowModal] = useState(false);
    const [selectedCode, setSelectedCode] = useState(() => '');

    const { data } = useQuery(ProductListing, { 
        variables: { 
            brands, 
            colors, 
            sizes,
        } 
    })
    
    function facetOptionChanged(fasetQueryResult: StringFacet[], faset: StringFacet[]): boolean {
        if(fasetQueryResult.length != faset.length) {
            return true
        }

        for (let i = 0; i < fasetQueryResult.length; i++) {
            if(fasetQueryResult[i]?.name !== faset[i]?.name) {
                return true
            }

            if(fasetQueryResult[i]?.count !== faset[i]?.count) {
                return true
            }
        }

        return false
    }

    useEffect(() => {
        if(data?.GenericProduct?.facets?.Brand != undefined && data?.GenericProduct?.facets?.Brand) {
          if(facetOptionChanged(data?.GenericProduct?.facets?.Brand as StringFacet[], brandFacet)) {
            setBrandFacet(data.GenericProduct.facets?.Brand as StringFacet[])
          }
        }

        if(data?.GenericProduct?.facets?.Colors != undefined && data?.GenericProduct?.facets?.Colors) {
            if(facetOptionChanged(data?.GenericProduct?.facets?.Colors as StringFacet[], colorFacet)) {
              setColorFacet(data.GenericProduct.facets?.Colors as StringFacet[])
            }
        }

        if(data?.GenericProduct?.facets?.Sizes != undefined && data?.GenericProduct?.facets?.Sizes) {
            if(facetOptionChanged(data?.GenericProduct?.facets?.Sizes as StringFacet[], sizeFacet)) {
              setSizeFacet(data.GenericProduct.facets?.Sizes as StringFacet[])
            }
        }
      }, [brandFacet, colorFacet, sizeFacet, data?.GenericProduct?.facets]);

    return (
        <main>
            <div className="flex">
            <div className="relative hidden lg:block w-80">
                <div className="h-full rounded-2xl ml-4 bg-slate-50">
                    
                    <nav className="mt-2 ml-4 mr-4">
                        <div>
                            <RangeFacetComponent
                                headingText='Price range'
                                currentHighValue={highPrice}
                                setHighValue={setHighPrice}
                                setLowValue={setLowPrice}
                                currentLowValue={lowPrice}
                                minValue={0}
                                maxValue={600}
                                facet={data?.GenericProduct?.facets?.DefaultMarketPrice as NumberFacet[]}
                            />
                        </div>
                    </nav>

                    <nav className="mt-2 ml-4">
                        <div>
                        <TermFacetComponent
                                headingText='Brands'
                                facet={brandFacet}
                                values={brands}
                                setValues={setBrands}
                            />
                        </div>
                    </nav>

                    <nav className="mt-2 ml-4">
                        <div>
                        <TermFacetComponent
                                headingText='Colors'
                                facet={colorFacet}
                                values={colors}
                                setValues={setColors}
                            />
                        </div>
                    </nav>

                    <nav className="mt-2 ml-4">
                        <div>
                        <TermFacetComponent
                                headingText='Sizes'
                                facet={sizeFacet}
                                values={sizes}
                                setValues={setSizes}
                            />
                        </div>
                    </nav>
                </div>
            </div>
            
            <div className="w-full pl-0 md:p-2">
                <header className="z-40 items-center w-full h-16 shadow-lg rounded-2xl bg-slate-50">
                    <div className="relative z-20 flex flex-col justify-center h-full px-3 mx-auto flex-center"  style={{ background: "radial-gradient(141.61% 141.61% at 29.14% -11.49%, rgba(203, 213, 225, 0.15) 0%, rgba(203, 213, 225, 0) 57.72%)"}}>
                        <div className="relative flex items-center w-full pl-1 lg:max-w-68 sm:pr-2 sm:ml-0 ">

                            <div className='mt-2 ml-4'>

                            </div>
                        </div>
                    </div>
                </header>
                <main role="main" className="w-full h-full flex-grow p-3 overflow-auto">
                    <div className="tracking-widest text-lg title-font font-medium  mb-1">Hits: { data?.GenericProduct?.total }</div>  
                    
                    <div className="custom-screen ">
                        <div className="mt-12">
                            <ul className="grid grid-cols-3 gap-10">
                                { data?.GenericProduct?.items?.map((item, index) => {
                                    return <GenericProductTeaserComponent 
                                        key={index} 
                                        GenericProductTeaser={item!}
                                        setSelectedCode={setSelectedCode}
                                        setShowModal={setShowModal}
                                        />
                                })}
                            </ul>
                        </div>
                    </div>
                 </main>
                </div>
            </div>
            { 
                showModal ? (
                    <ProductDetailComponent
                        setOpen={setShowModal}
                        code={selectedCode}
                    />
                ) : null
            }
        </main>
    )
}
 
export default ProductListingComponent

Add OrderByComponent.tsx

Add OrderByComponent.tsx under "components" with the following code

import { OrderBy } from "@/graphql/graphql";
import { Dispatch, FC, SetStateAction, useState } from "react"

interface OrderByProps {
    orderBy: string
    setorderBy: Dispatch<SetStateAction<string>>;
    orderByDirection: OrderBy
    setorderByDirection: Dispatch<SetStateAction<OrderBy>>;
}

const OrderByComponent: FC<OrderByProps> = ({ orderBy, setorderBy, orderByDirection, setorderByDirection }) => {
    const [isOrderByInputOpen, setOrderByInputIsOpen] = useState(false);
    const [isOrderByDirectionOpen, setOrderByDirectionIsOpen] = useState(false);

    const toggleOrderByDirectionDropdown = () => {
        setOrderByDirectionIsOpen(!isOrderByDirectionOpen);
    };

    const toggleOrderByInputDropdown = () => {
        setOrderByInputIsOpen(!isOrderByInputOpen);
    };

    const orderBySemantic = () => {
        setorderBy('Semantic')
        setOrderByInputIsOpen(false);
    };

    const orderByName = () => {
        setorderBy('Name')
        setOrderByInputIsOpen(false);
        setorderByDirection(OrderBy.Desc)
    };

    const orderByPrice = () => {
        setorderBy('DefaultMarketPrice')
        setOrderByInputIsOpen(false);
    };

    const orderByBrand = () => {
        setorderBy('Brand')
        setOrderByInputIsOpen(false);
    };

    const orderAsc = () => {
        setorderByDirection(OrderBy.Asc)
        setOrderByDirectionIsOpen(false);
    };

    const orderDesc = () => {
        setorderByDirection(OrderBy.Desc)
        setOrderByDirectionIsOpen(false);
    };

    return (
        <div className='w-full py-6 pb-8'>
            <div className="ml-2 relative inline-block">
                <button
                    type="button"
                    className="px-4 py-2 text-black bg-slate-400 hover:bg-slate-300 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm inline-flex items-center"
                    onClick={toggleOrderByInputDropdown}
                >
                    Order By: {orderBy}<svg className="w-2.5 h-2.5 ml-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                        <path stroke="currentColor" d="m1 1 4 4 4-4" />
                    </svg>
                </button>

                {isOrderByInputOpen && (
                    <div className="origin-top-right absolute right-0 mt-2 w-44 rounded-lg shadow-lg bg-white ring-1 ring-black ring-opacity-5">
                        <ul role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
                            <li>
                                <a
                                    href="#"
                                    className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                                    onClick={orderBySemantic}
                                >
                                    Semantic
                                </a>
                            </li>
                            <li>
                                <a
                                    href="#"
                                    className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                                    onClick={orderByName}
                                >
                                    Name
                                </a>
                            </li>
                            <li>
                                <a
                                    href="#"
                                    className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                                    onClick={orderByPrice}
                                >
                                    DefaultMarketPrice
                                </a>
                            </li>
                            <li>
                                <a
                                    href="#"
                                    className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                                    onClick={orderByBrand}
                                >
                                    Brand
                                </a>
                            </li>
                        </ul>
                    </div>
                )}
            </div>

            <div className="ml-2 relative inline-block">
                <button
                    type="button"
                    className="px-4 py-2 text-black bg-slate-400 hover:bg-slate-300 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm inline-flex items-center"
                    onClick={toggleOrderByDirectionDropdown}
                >
                    Direction: {orderByDirection} <svg className="w-2.5 h-2.5 ml-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                        <path stroke="currentColor" d="m1 1 4 4 4-4" />
                    </svg>
                </button>

                {isOrderByDirectionOpen && (
                    <div className="origin-top-right absolute right-0 mt-2 w-44 rounded-lg shadow-lg bg-white ring-1 ring-black ring-opacity-5">
                        <ul role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
                            <li>
                                <a
                                    href="#"
                                    className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                                    onClick={orderAsc}
                                >
                                    Asc
                                </a>
                            </li>
                            <li>
                                <a
                                    href="#"
                                    className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                                    onClick={orderDesc}
                                >
                                    Desc
                                </a>
                            </li>
                        </ul>
                    </div>
                )}
            </div>
        </div>
    )
}

export default OrderByComponent

Update ProductListingComponent to include ordering

ProductListingComponent should now look like this

import React, { FC, useEffect, useState } from 'react'
import { useQuery } from '@apollo/client'

import { graphql } from '@/graphql'
import GenericProductTeaserComponent from './GenericProductTeaserComponent'
import ProductDetailComponent from './ProductDetailComponent'
import TermFacetComponent from './TermFacetComponent'
import { GenericProductOrderByInput, NumberFacet, OrderBy, Ranking, StringFacet } from '@/graphql/graphql'
import RangeFacetComponent from './RangeFacetComponent'
import OrderByComponent from './OrderByCompontent'
 
export const ProductListing = graphql(/* GraphQL */ `
    query ProductListing(
        $languages: [Locales] = en
        $searchText: String,
        $brands: [String!],
        $sizes: [String!],
        $colors: [String!],
        $minPrice: Float,
        $maxPrice: Float,
        $skip: Int = 0,
        $limit: Int = 10,
        $order: GenericProductOrderByInput = {       
            _ranking: SEMANTIC,
            DefaultMarketPrice: ASC 
        }
        )
        {
        GenericProduct(
            locale: $languages
            where:{
                _or:[
                    {
					    _fulltext: {
                            match: $searchText
                        }
                    },
                    {
						Name: {
                            match: $searchText
                            boost: 20
                        }
                    }
                ]
                DefaultMarketPrice: {
                    gte: $minPrice
                    lte: $maxPrice
                }
            }
            skip: $skip,
            limit: $limit
            orderBy: $order
        ) {
            total
            items {
                ...GenericProductTeaser
            }
            facets {
                Brand(filters: $brands) {
                    name
                    count
                }
                Sizes(filters:$sizes) {
                    name
                    count
                }
                Colors(filters:$colors) {
                    name
                    count
                }
                DefaultMarketPrice(ranges: [
                    { to: 50 },
                    { from: 51, to: 100 },
                    { from: 101, to: 150 },
                    { from: 151, to: 200 },
                    { from: 201, to: 250 },
                    { from: 251, to: 300 },
                    { from: 301, to: 350 },
                    { from: 351, to: 400 },
                    { from: 401, to: 450 },
                    { from: 451, to: 500 },
                    { from: 501 },
                ]) {
                    name
                    count
                }
            }
        }
    }
`)
 
const ProductListingComponent: FC = () => {

    const [orderByInput, setOrderByInput] = useState(() => 'DefaultMarketPrice');
    const [orderByDirection, setOrderByDirection] = useState(() => OrderBy.Asc);

    const [brands, setBrands] = useState(() => new Array<string>());
    const [brandFacet, setBrandFacet] = useState(() => new Array<StringFacet>())

    const [colors, setColors] = useState(() => new Array<string>());
    const [colorFacet, setColorFacet] = useState(() => new Array<StringFacet>())

    const [sizes, setSizes] = useState(() => new Array<string>());
    const [sizeFacet, setSizeFacet] = useState(() => new Array<StringFacet>())

    const [lowPrice, setLowPrice] = useState(() => 0);
    const [highPrice, setHighPrice] = useState(() => 600)

    const [showModal, setShowModal] = useState(false);
    const [selectedCode, setSelectedCode] = useState(() => '');

    const { data } = useQuery(ProductListing, { 
        variables: { 
            brands, 
            colors, 
            sizes,
            minPrice: lowPrice,
            maxPrice: highPrice,
            order: getOrder()
        } 
    })

    function getOrder(): GenericProductOrderByInput {
        if(orderByInput === "Name") {
            return { Name: orderByDirection }
        } else if (orderByInput === "Brand") {
            return { Brand: orderByDirection }
        } else if(orderByInput === "DefaultMarketPrice") {
            return { DefaultMarketPrice: orderByDirection }
        } else {
            return { _ranking: Ranking.Semantic }
        }
    }
    
    function facetOptionChanged(fasetQueryResult: StringFacet[], faset: StringFacet[]): boolean {
        if(fasetQueryResult.length != faset.length) {
            return true
        }

        for (let i = 0; i < fasetQueryResult.length; i++) {
            if(fasetQueryResult[i]?.name !== faset[i]?.name) {
                return true
            }

            if(fasetQueryResult[i]?.count !== faset[i]?.count) {
                return true
            }
        }

        return false
    }

    useEffect(() => {
        if(data?.GenericProduct?.facets?.Brand != undefined && data?.GenericProduct?.facets?.Brand) {
          if(facetOptionChanged(data?.GenericProduct?.facets?.Brand as StringFacet[], brandFacet)) {
            setBrandFacet(data.GenericProduct.facets?.Brand as StringFacet[])
          }
        }

        if(data?.GenericProduct?.facets?.Colors != undefined && data?.GenericProduct?.facets?.Colors) {
            if(facetOptionChanged(data?.GenericProduct?.facets?.Colors as StringFacet[], colorFacet)) {
              setColorFacet(data.GenericProduct.facets?.Colors as StringFacet[])
            }
        }

        if(data?.GenericProduct?.facets?.Sizes != undefined && data?.GenericProduct?.facets?.Sizes) {
            if(facetOptionChanged(data?.GenericProduct?.facets?.Sizes as StringFacet[], sizeFacet)) {
              setSizeFacet(data.GenericProduct.facets?.Sizes as StringFacet[])
            }
        }
      }, [brandFacet, colorFacet, sizeFacet, data?.GenericProduct?.facets]);

    return (
        <main>
            <div className="flex">
            <div className="relative hidden lg:block w-80">
                <div className="h-full rounded-2xl ml-4 bg-slate-50">
                    
                    <nav className="mt-2 ml-4 mr-4">
                        <div>
                            <RangeFacetComponent
                                headingText='Price range'
                                currentHighValue={highPrice}
                                setHighValue={setHighPrice}
                                setLowValue={setLowPrice}
                                currentLowValue={lowPrice}
                                minValue={0}
                                maxValue={600}
                                facet={data?.GenericProduct?.facets?.DefaultMarketPrice as NumberFacet[]}
                            />
                        </div>
                    </nav>

                    <nav className="mt-2 ml-4">
                        <div>
                        <TermFacetComponent
                                headingText='Brands'
                                facet={brandFacet}
                                values={brands}
                                setValues={setBrands}
                            />
                        </div>
                    </nav>

                    <nav className="mt-2 ml-4">
                        <div>
                        <TermFacetComponent
                                headingText='Colors'
                                facet={colorFacet}
                                values={colors}
                                setValues={setColors}
                            />
                        </div>
                    </nav>

                    <nav className="mt-2 ml-4">
                        <div>
                        <TermFacetComponent
                                headingText='Sizes'
                                facet={sizeFacet}
                                values={sizes}
                                setValues={setSizes}
                            />
                        </div>
                    </nav>
                </div>
            </div>
            
            <div className="w-full pl-0 md:p-2">
                <header className="z-40 items-center w-full h-16 shadow-lg rounded-2xl bg-slate-50">
                    <div className="relative z-20 flex flex-col justify-center h-full px-3 mx-auto flex-center"  style={{ background: "radial-gradient(141.61% 141.61% at 29.14% -11.49%, rgba(203, 213, 225, 0.15) 0%, rgba(203, 213, 225, 0) 57.72%)"}}>
                        <div className="relative flex items-center w-full pl-1 lg:max-w-68 sm:pr-2 sm:ml-0 ">

                            <div className='mt-2 ml-4'>
                                <OrderByComponent 
                                    orderBy={orderByInput} 
                                    setorderBy={setOrderByInput}
                                    orderByDirection={orderByDirection}
                                    setorderByDirection={setOrderByDirection}
                                />
                            </div>
                        </div>
                    </div>
                </header>
                <main role="main" className="w-full h-full flex-grow p-3 overflow-auto">
                    <div className="tracking-widest text-lg title-font font-medium  mb-1">Hits: { data?.GenericProduct?.total }</div>  
                    
                    <div className="custom-screen ">
                        <div className="mt-12">
                            <ul className="grid grid-cols-3 gap-10">
                                { data?.GenericProduct?.items?.map((item, index) => {
                                    return <GenericProductTeaserComponent 
                                        key={index} 
                                        GenericProductTeaser={item!}
                                        setSelectedCode={setSelectedCode}
                                        setShowModal={setShowModal}
                                        />
                                })}
                            </ul>
                        </div>
                    </div>
                 </main>
                </div>
            </div>
            { 
                showModal ? (
                    <ProductDetailComponent
                        setOpen={setShowModal}
                        code={selectedCode}
                    />
                ) : null
            }
        </main>
    )
}
 
export default ProductListingComponent

Create SearchTextComponent.tsx

Create SearchTextComponent.tsx under "components" with the following code

import { Dispatch, FC, SetStateAction, useState } from "react"

interface SearchTextProps {
    searchText: string
    setSearchText: Dispatch<SetStateAction<string>>;
}

const SearchTextComponent: FC<SearchTextProps> = ({ searchText, setSearchText }) => {

    const [internalSearchText, setInternalSearchText] = useState(() => searchText);

    const handleSearchClick = (event: any) => {
        setSearchText(internalSearchText)
    };
  
    const handleSearchInput = (event: React.ChangeEvent<HTMLInputElement>) => {
        setInternalSearchText(event.target.value);
    };
  
    const handleSearchboxKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
      if (event.key === "Enter") {
        setSearchText(internalSearchText)  
      }
    };

    return (
      <div className="relative flex items-center w-full h-full lg:w-96 group">
          <input type="text" value={internalSearchText} onChange={handleSearchInput} onKeyDown={handleSearchboxKeyDown} className="block w-full py-1.5 pl-10 pr-4 leading-normal rounded-2xl focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500 ring-opacity-90 bg-gray-100 dark:bg-gray-800 text-gray-400 aa-input" placeholder="Search"/>
          <button type="submit" onClick={handleSearchClick} className="absolute top-0 right-0 p-2.5 text-sm font-medium h-full text-blue-500 focus:outline-none">
            <svg className="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
              <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
            </svg>
            <span className="sr-only">Search</span>
          </button>
      </div>
    )
}

export default SearchTextComponent

Update ProductListingComponent to include searchbox

Update ProductListingComponent.tsx to look like this

import React, { FC, useEffect, useState } from 'react'
import { useQuery } from '@apollo/client'

import { graphql } from '@/graphql'
import { GenericProductOrderByInput, NumberFacet, OrderBy, Ranking, StringFacet } from '@/graphql/graphql'
import TermFacetComponent from './TermFacetComponent'
import SearchTextComponent from './SearchTextComponent'
import GenericProductTeaserComponent from './GenericProductTeaserComponent'
import OrderByComponent from './OrderByCompontent'
import RangeFacetComponent from './RangeFacetComponent'
import ProductDetailComponent from './ProductDetailComponent'
 
export const ProductListing = graphql(/* GraphQL */ `
    query ProductListing(
        $languages: [Locales] = en
        $searchText: String,
        $brands: [String!],
        $sizes: [String!],
        $colors: [String!],
        $minPrice: Float,
        $maxPrice: Float,
        $skip: Int = 0,
        $limit: Int = 10,
        $order: GenericProductOrderByInput = {       
            _ranking: SEMANTIC,
            DefaultMarketPrice: ASC 
        }
        )
        {
        GenericProduct(
            locale: $languages
            where:{
                _or:[
                    {
					    _fulltext: {
                            match: $searchText
                        }
                    },
                    {
						Name: {
                            match: $searchText
                            boost: 20
                        }
                    }
                ]
                DefaultMarketPrice: {
                    gte: $minPrice
                    lte: $maxPrice
                }
            }
            skip: $skip,
            limit: $limit
            orderBy: $order
        ) {
            total
            items {
                ...GenericProductTeaser
            }
            facets {
                Brand(filters: $brands) {
                    name
                    count
                }
                Sizes(filters:$sizes) {
                    name
                    count
                }
                Colors(filters:$colors) {
                    name
                    count
                }
                DefaultMarketPrice(ranges: [
                    { to: 50 },
                    { from: 51, to: 100 },
                    { from: 101, to: 150 },
                    { from: 151, to: 200 },
                    { from: 201, to: 250 },
                    { from: 251, to: 300 },
                    { from: 301, to: 350 },
                    { from: 351, to: 400 },
                    { from: 401, to: 450 },
                    { from: 451, to: 500 },
                    { from: 501 },
                ]) {
                    name
                    count
                }
            }
        }
    }
`)
 
const ProductListingComponent: FC = () => {

    const [searchText, setSearchText] = useState(() => '');
    const [orderByInput, setOrderByInput] = useState(() => 'DefaultMarketPrice');
    const [orderByDirection, setOrderByDirection] = useState(() => OrderBy.Asc);

    const [brands, setBrands] = useState(() => new Array<string>());
    const [brandFacet, setBrandFacet] = useState(() => new Array<StringFacet>())

    const [colors, setColors] = useState(() => new Array<string>());
    const [colorFacet, setColorFacet] = useState(() => new Array<StringFacet>())

    const [sizes, setSizes] = useState(() => new Array<string>());
    const [sizeFacet, setSizeFacet] = useState(() => new Array<StringFacet>())

    const [lowPrice, setLowPrice] = useState(() => 0);
    const [highPrice, setHighPrice] = useState(() => 600)

    const [showModal, setShowModal] = useState(false);
    const [selectedCode, setSelectedCode] = useState(() => '');

    const { data } = useQuery(ProductListing, { 
        variables: { 
            searchText, 
            brands, 
            colors, 
            sizes,
            minPrice: lowPrice,
            maxPrice: highPrice,
            order: getOrder()
        } 
    })

    function getOrder(): GenericProductOrderByInput {
        if(orderByInput === "Name") {
            return { Name: orderByDirection }
        } else if (orderByInput === "Brand") {
            return { Brand: orderByDirection }
        } else if(orderByInput === "DefaultMarketPrice") {
            return { DefaultMarketPrice: orderByDirection }
        } else {
            return { _ranking: Ranking.Semantic }
        }
    }

    function facetOptionChanged(fasetQueryResult: StringFacet[], faset: StringFacet[]): boolean {
        if(fasetQueryResult.length != faset.length) {
            return true
        }

        for (let i = 0; i < fasetQueryResult.length; i++) {
            if(fasetQueryResult[i]?.name !== faset[i]?.name) {
                return true
            }

            if(fasetQueryResult[i]?.count !== faset[i]?.count) {
                return true
            }
        }

        return false
    }

    useEffect(() => {
        if(data?.GenericProduct?.facets?.Brand != undefined && data?.GenericProduct?.facets?.Brand) {
          if(facetOptionChanged(data?.GenericProduct?.facets?.Brand as StringFacet[], brandFacet)) {
            setBrandFacet(data.GenericProduct.facets?.Brand as StringFacet[])
          }
        }

        if(data?.GenericProduct?.facets?.Colors != undefined && data?.GenericProduct?.facets?.Colors) {
            if(facetOptionChanged(data?.GenericProduct?.facets?.Colors as StringFacet[], colorFacet)) {
              setColorFacet(data.GenericProduct.facets?.Colors as StringFacet[])
            }
        }

        if(data?.GenericProduct?.facets?.Sizes != undefined && data?.GenericProduct?.facets?.Sizes) {
            if(facetOptionChanged(data?.GenericProduct?.facets?.Sizes as StringFacet[], sizeFacet)) {
              setSizeFacet(data.GenericProduct.facets?.Sizes as StringFacet[])
            }
        }
      }, [brandFacet, colorFacet, sizeFacet, data?.GenericProduct?.facets]);

    return (
        <main>
            <div className="flex">
            <div className="relative hidden lg:block w-80">
                <div className="h-full rounded-2xl ml-4 bg-slate-50">
                    
                    <nav className="mt-2 ml-4 mr-4">
                        <div>
                            <RangeFacetComponent
                                headingText='Price range'
                                currentHighValue={highPrice}
                                setHighValue={setHighPrice}
                                setLowValue={setLowPrice}
                                currentLowValue={lowPrice}
                                minValue={0}
                                maxValue={600}
                                facet={data?.GenericProduct?.facets?.DefaultMarketPrice as NumberFacet[]}
                            />
                        </div>
                    </nav>

                    <nav className="mt-2 ml-4">
                        <div>
                            <TermFacetComponent
                                headingText='Brands'
                                facet={brandFacet}
                                values={brands}
                                setValues={setBrands}
                            />
                        </div>
                    </nav>

                    <nav className="mt-2 ml-4">
                        <div>
                            <TermFacetComponent
                                headingText='Colors'
                                facet={colorFacet}
                                values={colors}
                                setValues={setColors}
                            />
                        </div>
                    </nav>

                    <nav className="mt-2 ml-4">
                        <div>
                            <TermFacetComponent
                                headingText='Sizes'
                                facet={sizeFacet}
                                values={sizes}
                                setValues={setSizes}
                            />
                        </div>
                    </nav>
                </div>
            </div>
            
            <div className="w-full pl-0 md:p-2">
                <header className="z-40 items-center w-full h-16 shadow-lg rounded-2xl bg-slate-50">
                    <div className="relative z-20 flex flex-col justify-center h-full px-3 mx-auto flex-center"  style={{ background: "radial-gradient(141.61% 141.61% at 29.14% -11.49%, rgba(203, 213, 225, 0.15) 0%, rgba(203, 213, 225, 0) 57.72%)"}}>
                        <div className="relative flex items-center w-full pl-1 lg:max-w-68 sm:pr-2 sm:ml-0 ">
                            <SearchTextComponent 
                                searchText={searchText}
                                setSearchText={setSearchText}
                             />
                            <div className='mt-2 ml-4'>
                                <OrderByComponent 
                                    orderBy={orderByInput} 
                                    setorderBy={setOrderByInput}
                                    orderByDirection={orderByDirection}
                                    setorderByDirection={setOrderByDirection}
                                />
                            </div>
                        </div>
                    </div>
                </header>
                <main role="main" className="w-full h-full flex-grow p-3 overflow-auto">
                    <div className="tracking-widest text-lg title-font font-medium  mb-1">Hits: { data?.GenericProduct?.total }</div>  
                    
                    <div className="custom-screen ">
                        <div className="mt-12">
                            <ul className="grid grid-cols-3 gap-10">
                                { data?.GenericProduct?.items?.map((item, index) => {
                                    return <GenericProductTeaserComponent 
                                        key={index} 
                                        GenericProductTeaser={item!}
                                        setSelectedCode={setSelectedCode}
                                        setShowModal={setShowModal}
                                        />
                                })}
                            </ul>
                        </div>
                    </div>
                 </main>
                </div>
            </div>
            { 
                showModal ? (
                    <ProductDetailComponent
                        setOpen={setShowModal}
                        code={selectedCode}
                    />
                ) : null
            }
        </main>
    )
}
 
export default ProductListingComponent

Test search

Search for "shoes" and select "Semantic" in the "order by" dropdown

Making facets work as they should

Mon, 13 Mar 2023 16:48:45 GMT

"Faceted navigation" is a powerful way of enabling structured search functionality in our applications. Many search services forces you to make multiple queries to get content result and "correct" facets result. We have now fixed this in Content Graph, so you only have to make one simple query to get both item result and "correct" facet result.

Facet filters

Facet filters is a new functionality in Content Graph, which filter content items and the facet filters in the "correct way". The easiest way to explain how it works is by an example.

Below is a query for "location items" on "Foundation CMS" site, which has one facet for "continents", and one facet for "countries". Each of the facets have a parameter of type [String!], where values will filter the item result and other facets.

The result on our example application for Foundation CMS will look like this when not selecting any continents or countries:

Adding "Europe" and "Asia" for facet filtering of Continents will filter items to only get european and asian cities.

The countries will also be filtered to only show countries in europa and asia. The continents facet will still contain all values, to make it possible for user to see how many other continents that exist.

The example of selecting "Europe" and "Asia" looks like this in the example application:

We will finally add filtering for countries as will, which will filtering items based on combination of countries and continents.

The facets will now return the matching items based on values for the other facet.

The result looks like the following in the example application:

Planned breaking change for Locale parameter in Content Graph

Mon, 23 Jan 2023 08:58:17 GMT

Content Graph, a new service which makes it possible to query content using GraphQL, will have a breaking change soon. The service is currently in public beta, which still makes it possible for us to make breaking changes to improve the API. We will change the behaviour for the "locale" parameter, to make it more valuable and easy to understand.

Locale

The "locale" parameter are used for selecting which languages to query. The parameter type is an array, which makes it possible to query for many languages at the same time. The problem with the current implementation is that you can select a fixed number of languages in the query, which doesn't reflect the languages you have in your CMS.

We will soon change the implementation, to instead dynamically create an enum that reflects the CMS languages that has been selected in your CMS. This makes it possible to differentiate between for example en-Gb and en-US, in case you have multiple English versions of your pages. The only difference in language name is that we are using _ instead of - when selecting a culture specific language. en-GB becomes en_GB in Content Graph and en-US becomes en_US.

query MyQuery {
  StartPage(locale: en_GB) {
    items {
      Name
    }
  }
}

Strongly typed CMS content with TypeScript & React

Fri, 02 Sep 2022 14:32:57 GMT

Its now easy to create applications with strongly typed CMS content, using any language of you choice, and host it anywhere you like. You can try out an example account we have created using the following tutorial: https://docs.developers.optimizely.com/digital-experience-platform/v1.4.0-content-graph/docs/tutorial-create-a-site-with-strongly-typed-music-festival-content-using-react-and-content-graph

Content Graph

Content Graph is the service which enables this functionality. Content Graph is a "versionless", stand alone service, hosted in the CDN. Here are some benifits of using Content Graph when creating your application

Work with strongly typed content in your decoupled application

You can auto-generate classes/types for most existing languages, just by specifying the url to Content Graphs GraphQL endpoint together with your authentication key. This will enable you to work strongly typed against your content types, even if you haven't specified the content types in your decoupled application.

Following is an example where the developer used a property doesn't exist on the content type and got a suggestion by compiler.

Seperation between queries and components

Content Graph makes it easy to separate your queries from the components. Add your queries in a special folder, and run "yarn generate" to generate classes/types for both queries and content types from the schema.

Write your queries in Visual Studio Code for your decoupled application, with intellisense and validation

You can write your queries with intellisense directly in Visual Studio Code for your decoupled application. You just have to specify the url to Content Graphs GraphQL API together with the authentication key, and you will be able to quickly write your queries.

Following is an example where the query was not created correctly. Content Graph gave a suggestion for fixing the query:

Query children of result in several layers - all in one query

Following example will, in case the result from main query is of type "LandingPage", return some properties from LandingPage. It will also get children of type ArtistContainerPage with "Name" and "RelativePath". It will finally get children for the returned ArtistContainerPages of type ArtistDetailPage, where "ArtistHeadliner" is true for the ArtistDetailPages. All in one query.

Get items in Content Areas recursively

A block type can contain a ContentArea property, where other blocks can be added. An instance of the block can then be placed in another ContentArea property, for example an ContentArea on a page. This creates a recursively Content Area item fetching, which can be problematic for many services.

Content Graph supports retrieving items in ContentArea properties recursivly - in several levels. Another important feature in Content Graph is that you must specify which properties to fetch for the different content types that could exist in the ContentArea property. This will reduce the data size send from the service to your application.

Search capabilities directly in the service

We have implemented free text search support in Content Graph, with stemming and decompounding support. We have also added support for facets of strings and numbers.

Online IDE

An online IDE are available using https://cg.optimizely.com/app/graphiql?auth={yourkey}. You can use the example account we have created for Music Festival: https://cg.optimizely.com/app/graphiql?auth=XoXsOl2bScWZzguDUylvaaZ5PEAAH5tg5qme0NebCHzEpyO4

Find 13: New language routing

Tue, 03 Apr 2018 16:22:00 GMT

In order to optimize indexing performance, and increase query precision, indexing documents should be done by specifying language routing. The use of language routing, when indexing, does not require any changes when querying. The only effect language routing has on querying is that it increases query precision. This is done by reducing the number of false positive matches, as documents only are analyzed for a specific language. Previously, all documents were analyzed for all available languages supported, sometimes causing noise when stemming rules for one language collided with stemming rules for another.

Adding language routing on any type of object

Adding language routing for any type of object can be done in different ways.

LanguageRoutingAttribute

One option is to use LanguageRoutingAttribute on the property, and set it to the desired language when initializing the object.

public class WithLanguageRoutingAttribute
{
     [Id] 
     public string Id { get; set; } 
     [LanguageRouting] 
     public LanguageRouting LanguageRouting { get; set; } 
}

var indexedObject = new WithLanguageRoutingAttribute()

{ 
     Id = "123", 
     LanguageRouting = new LanguageRouting(Language.Swedish) 
};

Conventions

Another option is to use the conventions API in Find.

client.Conventions.ForInstancesOf<WithLanguageRouting>().LanguageRoutingIs(x => x.LanguageRouting);

CMS integration

The Find CMS integration automatically adds language routing support for content implementing ILocale. Most content base type, like PageData, ProductContent, NodeContent, and VariationContent, all implements ILocale. The behavior can be changed by either using conventions, or by overriding LanguageRoutingFactory.

Conventions

The following example changes the behavior for all content implementing ILocale, to store the documents in the old way. It’s not recommended to do this, because it prevents the performance improvements.

client.Conventions.ForInstancesOf<ILocale>().LanguageRoutingIs(x => null);

This example changes the behavior only for MediaData. You might want to do this for some specific content types, if it’s necessary to analyze the content using all analyzers.

client.Conventions.ForInstancesOf<MediaData>().LanguageRoutingIs(x => null);

LanguageRoutingFactory

A LanguageRoutingFactory is, by default, used for all ILocale content, to create language routing for content that implements ILocale. It’s possible to change the default behavior by creating your own factory that inherits from LanguageRoutingFactory, and override any of the protected virtual methods. You also need to register your language routing factory using a configurable module.

[InitializableModule]
[ModuleDependency(typeof(IndexingModule))]
public class MyFindInitializationModule : IConfigurableModule
{
     public void Initialize(InitializationEngine context)
     {
     }
     public void Uninitialize(InitializationEngine context)
     {
     }
     public void ConfigureContainer(ServiceConfigurationContext context)
     {
         context.Services.AddSingleton<LanguageRoutingFactory, MyLanguageRoutingFactory>();
     }
}

The following example changes the behaviour, to use all analyzers instead of the “standard” analyzer, for all content which uses a language we can’t map to any analyzer.

public class MyLanguageRoutingFactory : LanguageRoutingFactory
{
     public override LanguageRouting CreateLanguageRouting(ILocale locale)
     {
         var languageRouting = base.CreateLanguageRouting(locale);
         if (languageRouting.FieldSuffix == Language.None.FieldSuffix)
         {
             return null;
         }
         return languageRouting;
     }
}

Reindex the site after upgrade to Find 13

The changes in the language routing make it necessary to reindex the site after upgrading to Find 13. The site will work directly when you start the site, before the content has been reindexed. It will work because queries will still hit the content that hasn’t been indexed using the language routing.

The problem (if site isn’t reindexed) will occur when content is reindexed after being triggered from a content event. The content might be stored in a different way as before, which might make the old content continue to exist. You can end up having the same content stored twice, but in different versions.

Conclusion: After upgrading to Find 13, reindex the whole site as soon as possible.

Using Personalized Find

Fri, 20 Oct 2017 16:36:43 GMT

Episerver recently released Personalized Find (PF), a new product that delivers improved relevancy to visitors thereby helping to increase conversions on your website. Specifically, when used with Episerver Commerce, PF uses each individual's browsing and purchase activity to boost search results.

Without personalization, everyone gets the same Find experience. Yet every visitor is different and is looking for different things on your website. Moreover, each user's behavior changes depending on their wants and needs at that time.

How Personalized Find works

Every click and action on a website is used to build a visitor's profile. For example

traffic source
search query
categories visited
selected facets: color, size, brand, and so on
use of ratings and reviews

This data is captured, analyzed then visualized to determine a personalized search relevancy. The relevancy logic for each individual is based on everything PF knows about the visitor: preferences, previous purchases, current behavioral interactions, and so on.

Ranking and weighting can also consider a merchandiser's business rules or strategies. So, best-selling items, high conversion rates, most revenue, or most units sold can be used to affect search results. The result of this processing is an optimal ordering of search results for every user.

Benefits of Personalized Find

Increased sales. Optimizing the search experience has been shown to produced increased revenue.
Better engagement. Improved experience encourages customers to keep shopping.
Better conversion rates. Easier for customers to find products they are looking for.
Better retention. Customers who have a positive experience are more likely to return to your site.

Using Personalized Find on your site

The Developer Guider article "Using Personalized Find" provides the technical details about using PF. This post provides a quick introduction to a few PF functions.

Fetching site visitor information.

using EPiServer.Find.Personalization;

namespace EpiserverSite.Controllers
{
    public class MyController : PageController<MyPage>
    {
        private readonly IClient _client;

        public MyController(IClient client)
        {
            _client = client;
        }

        public ActionResult Index(MyPage currentPage)
        {
           _client.Personalization().Refresh();
           return View(currentPage);
        }
    }
}

Implementing UsingPersonalization() to boost a query with site visitor information.

var result = _client.Search<FashionProduct>()
     .For("ferrari")
     .UsingPersonalization() 
     .GetResult();

Note: At this time, site visitor information is only captured for Commerce content. While you can use .UsingPersonalization() on any query, it only boosts Commerce content properties.

Example of implementation

Here is an example, where a user has viewed several expensive puma products. The developers has created a recommendation ordering view, to help the visitors.

Exceptions in Find

Thu, 08 Dec 2016 08:55:34 GMT

Episerver Find can be used in many places on a site, like menus, navigations, listings, and searches. One thing that usually are forgotten when using Find is that it’s a service in the “cloud”, where you should handle possible exceptions.

EPiServer.Find.ServiceException

The “ServiceException” is the most important exception that should be handled in every place where Find is used. This exception will be thrown if the service is down, or if there is any other communication problem.

This exception inherits from ApplicationException.

EPiServer.Find.ClientException

The “ClientException” can be thrown when the query contains errors that is found at runtime. There is also several specific exceptions that inherit from “ClientException”.

This exception inherits from ApplicationException.

EPiServer.Find.SelfReferencingLoopException

The “SelfReferencingLoopException” will be thrown if a circular reference is found at runtime. There can for example exist a “Parent” property on a class, where the class of the parent property has a reference to the current class.