Content Search Documentation

Overview

Content search provides two methods for fetching content:

• useContentSearch: React hook for client-side content fetching with automatic state management
• getContentSearch: Server-side function for content fetching during server rendering

Method Comparison

Feature	useContentSearch	getContentSearch
Environment	React Components (Client)	Server-side (e.g., Next.js getServerSideProps)
State Management	Automatic (loading, error states)	Manual handling required
Use Cases	Interactive search, real-time updates	Pre-rendered pages, static site generation
SEO Benefits	Limited (loads after initial render)	Enhanced (content available at initial load)

Search Properties

Both methods use the same property structure for consistency:

interface SearchProperties {
  filters: Array<{
    field: string;
    value: string | string[];
    operator: string; // EQUAL, LIKE, IN, etc.
  }>;
  sort?: {
    field: string;
    direction: "ASC" | "DESC";
  };
}

Property Formatting

The methods automatically format search properties for consistency:

const searchProps = {
  // String values are automatically converted to arrays
  category: "news", // Becomes ['news']
  type: ["article"], // Already in correct format
};

Client-Side Fetching

Basic useContentSearch Usage

const { payload, error, state } = useContentSearch(
  keyword, // Search term
  properties, // Search properties (filters, sorting)
  tags, // Content tags
  limit, // Results per page
  offset // Pagination offset
);

Complete Example: Article Search with Pagination

function ArticleSearch() {
  const [page, setPage] = useState(1);
  const limit = 10;

  const searchProperties = {
    filters: [
      {
        field: "type",
        value: ["article"],
        operator: "EQUAL",
      },
      {
        field: "category",
        value: "news",
        operator: "EQUAL",
      },
    ],
    sort: {
      field: "created",
      direction: "DESC",
    },
  };

  const { payload, state } = useContentSearch(
    "search term",
    searchProperties,
    ["featured"],
    limit,
    (page - 1) * limit
  );

  return (
    <div>
      {state === "loading" && <LoadingSpinner />}
      {payload?.content?.map((item) => (
        <ArticleCard key={item.id} article={item} />
      ))}
      {payload.pageInfo && (
        <Pagination
          hasNext={payload.pageInfo.hasNextPage}
          hasPrevious={payload.pageInfo.hasPreviousPage}
          total={payload.pageInfo.totalItems}
          onPageChange={setPage}
        />
      )}
    </div>
  );
}

Server-Side Fetching

Basic getContentSearch Usage

// In Next.js getServerSideProps or getStaticProps
export async function getServerSideProps() {
  const result = await getContentSearch(
    "search term",
    {
      filters: [
        {
          field: "type",
          value: "article",
          operator: "EQUAL",
        },
      ],
      sort: {
        field: "created",
        direction: "DESC",
      },
    },
    ["featured"],
    10,
    0
  );

  return {
    props: {
      articles: result.content,
    },
  };
}

Response Types

interface ContentSearchResult {
  content: Array<{
    id: string;
    title: string;
    status?: boolean;
    data: Record<string, unknown>;
  }>;
  pageInfo?: {
    startCursor: string;
    endCursor: string;
    hasNextPage: boolean;
    hasPreviousPage: boolean;
    totalItems?: number;
  };
}

Common Patterns

Filter Construction

const filterPatterns = {
  // Basic type filter
  basic: {
    filters: [
      {
        field: "type",
        value: "article",
        operator: "EQUAL",
      },
    ],
  },

  // With search and sort
  advanced: (searchTerm: string) => ({
    filters: [
      {
        field: "type",
        value: "article",
        operator: "EQUAL",
      },
      {
        field: "title",
        value: searchTerm,
        operator: "LIKE",
      },
    ],
    sort: {
      field: "created",
      direction: "DESC",
    },
  }),
};