Fetch with variation option

__test__/test-website/src/app/[...slug]/page.tsx

@@ -1,20 +1,39 @@
-import { GraphClient } from '@episerver/cms-sdk';
+import { GraphClient, GraphErrors } from '@episerver/cms-sdk';
 import { OptimizelyComponent } from '@episerver/cms-sdk/react/server';
 import React from 'react';
 
 type Props = {
   params: Promise<{
     slug: string[];
   }>;
+  // Assume that search params are correct:
+  searchParams: Promise<{ variation?: string }>;
 };
 
-export default async function Page({ params }: Props) {
+function handleGraphErrors(err: unknown): never {
+  if (err instanceof GraphErrors.GraphResponseError) {
+    console.log('Error message:', err.message);
+    console.log('Query:', err.request.query);
+    console.log('Variables:', err.request.variables);
+  }
+  if (err instanceof GraphErrors.GraphContentResponseError) {
+    console.log('Detailed errors: ', err.errors);
+  }
+
+  throw err;
+}
+
+export default async function Page({ params, searchParams }: Props) {
   const { slug } = await params;
+  const { variation } = await searchParams;
 
   const client = new GraphClient(process.env.OPTIMIZELY_GRAPH_SINGLE_KEY!, {
     graphUrl: process.env.OPTIMIZELY_GRAPH_URL,
   });
-  const c = await client.fetchContent(`/${slug.join('/')}/`);
 
-  return <OptimizelyComponent opti={c} />;
+  const content = await client
+    .fetchContent({ path: `/${slug.join('/')}/`, variation })
+    .catch(handleGraphErrors);
+
+  return <OptimizelyComponent opti={content} />;
 }

packages/optimizely-cms-sdk/src/graph/createQuery.ts

@@ -252,8 +252,8 @@ export function createQuery(contentType: string) {
 
   return `
 ${fragment.join('\n')}
-query FetchContent($filter: _ContentWhereInput) {
-  _Content(where: $filter) {
+query FetchContent($where: _ContentWhereInput, $variation: VariationInput) {
+  _Content(where: $where, variation: $variation) {
     item {
       __typename
       ...${contentType}

packages/optimizely-cms-sdk/src/graph/error.ts

@@ -1,12 +1,12 @@
-import type { GraphVariables } from './index.js';
+import type { ContentInput } from './filters.js';
 
 /** Represents the request sent to graph */
 type GraphRequest = {
   /** Query sent to Graph */
   query: string;
 
   /** Variables sent to Graph */
-  variables: GraphVariables;
+  variables: ContentInput;
 };
 
 /** Super-class for all errors related to Optimizely Graph */

packages/optimizely-cms-sdk/src/graph/filters.ts

@@ -0,0 +1,156 @@
+/**
+ * This module contains the TypeScript definitions of a Graph Query
+ * and functions to build those filters based on path,
+ * preview parameters, etc.
+ *
+ * This is used internally in the SDK
+ */
+
+/**
+ * Creates a {@linkcode ContentInput} object that filters results by a specific URL path.
+ *
+ * @param path - The URL path to filter by.
+ * @returns A `GraphQueryArguments` object with a `where` clause that matches the given path.
+ */
+export function pathFilter(path: string): ContentInput {
+  return {
+    where: {
+      _metadata: {
+        url: {
+          default: {
+            eq: path,
+          },
+        },
+      },
+    },
+  };
+}
+
+/**
+ * Creates a {@linkcode ContentInput} object for previewing content based on key, version, and locale.
+ *
+ * @param params - An object containing the following properties:
+ * @param params.key - The unique key identifying the content.
+ * @param params.ver - The version of the content to preview.
+ * @param params.loc - The locale of the content to preview.
+ *
+ * @returns A `GraphQueryArguments` object with a `where` clause filtering by key, version, and locale.
+ */
+export function previewFilter(params: {
+  key: string;
+  ver: string;
+  loc: string;
+}): ContentInput {
+  return {
+    where: {
+      _metadata: {
+        key: { eq: params.key },
+        version: { eq: params.ver },
+        locale: { eq: params.loc },
+      },
+    },
+  };
+}
+
+export function variationFilter(value: string): ContentInput {
+  return {
+    variation: {
+      include: 'SOME',
+      value: [value],
+    },
+  };
+}
+
+/**
+ * Arguments for querying content via the Graph API.
+ */
+export type ContentInput = {
+  variation?: VariationInput;
+  where?: ContentWhereInput;
+};
+
+type VariationInput = {
+  include?: VariationIncludeMode;
+  value?: string[];
+  includeOriginal?: boolean;
+};
+
+type VariationIncludeMode = 'ALL' | 'SOME' | 'NONE';
+
+type ContentWhereInput = {
+  _and?: ContentWhereInput[];
+  _or?: ContentWhereInput[];
+  _fulltext?: StringFilterInput;
+  _modified?: DateFilterInput;
+  _metadata?: IContentMetadataWhereInput;
+};
+
+type StringFilterInput = ScalarFilterInput<string> & {
+  like?: string;
+  startsWith?: string;
+  endsWith?: string;
+  in?: string[];
+  notIn?: string[];
+  match?: string;
+  contains?: string;
+  synonyms?: ('ONE' | 'TWO')[];
+  fuzzly?: boolean;
+};
+
+type DateFilterInput = ScalarFilterInput<string> & {
+  gt?: string;
+  gte?: string;
+  lt?: string;
+  lte?: string;
+  decay?: {
+    origin?: string;
+    scale?: number;
+    rate?: number;
+  };
+};
+
+type IContentMetadataWhereInput = {
+  key?: StringFilterInput;
+  locale?: StringFilterInput;
+  fallbackForLocale?: StringFilterInput;
+  version?: StringFilterInput;
+  displayName?: StringFilterInput;
+  url?: ContentUrlInput<StringFilterInput>;
+  types?: StringFilterInput;
+  published?: DateFilterInput;
+  status?: StringFilterInput;
+  changeset?: StringFilterInput;
+  created?: DateFilterInput;
+  lastModified?: DateFilterInput;
+  sortOrder?: IntFilterInput;
+  variation?: StringFilterInput;
+};
+
+type IntFilterInput = ScalarFilterInput<number> & {
+  gt?: number;
+  gte?: number;
+  lt?: number;
+  lte?: number;
+  in?: number[];
+  notIn?: number[];
+  factor?: {
+    value?: number;
+    modifier?: 'NONE' | 'SQUARE' | 'SQRT' | 'LOG' | 'RECIPROCAL';
+  };
+};
+
+type ContentUrlInput<T> = {
+  type?: T;
+  default?: T;
+  hierarchical?: T;
+  internal?: T;
+  graph?: T;
+  base?: T;
+};
+
+type ScalarFilterInput<T> = {
+  eq?: T;
+  notEq?: T;
+  exist?: boolean;
+  boost?: number;
+};