Consuming API

Consuming the API

Learn how to integrate Stelo CMS content into your frontend applications using the tRPC client.

tRPC Client Setup

import { createTRPCNext } from '@trpc/next';
import { httpBatchLink } from '@trpc/client';
import type { AppRouter } from '../../../stelo-cms/src/app/api/trpc/route';

export const trpc = createTRPCNext<AppRouter>({
  config() {
    return {
      links: [
        httpBatchLink({
          url: `${process.env.NEXT_PUBLIC_CMS_URL}/api/trpc`,
        }),
      ],
    };
  },
});

Fetching Content

Pages

// Get a specific page
const page = await trpc.pages.getBySlug.query({
  slug: 'about-us',
  locale: 'en'
});

// Get all published pages
const pages = await trpc.pages.getPublished.query({
  locale: 'en'
});

Collections

// Get services
const services = await trpc.collections.getByType.query({
  type: 'SERVICE',
  locale: 'en',
  published: true
});

Globals

// Get site-wide settings
const header = await trpc.globals.getByKey.query({
  key: 'header'
});

Static Generation

Combine API calls with Next.js static generation for optimal performance.

This section will be expanded with detailed integration examples.