Consuming the API

Install the api client package

In order to ease the integration of the API, we have created a client package for you.

npm install @trigani/api-client

After installing the package, you could set it up the following way:

Steps

Set your variables

Add your variables to the .env file

TRIGANI_URL=https://app.trigani.dev/
WORKSPACE=YourWorkspaceName
SPACE=YourSpaceName
API_KEY=YourApiKey

Create a client

Create a new file called client.ts in your lib folder

import { ApiClient, CMSSpaceClient } from '@trigani/api-client'

const client = new ApiClient({
  domain: process.env.TRIGANI_URL!,
  key: process.env.API_KEY!,
  version: 1,
  workspace: process.env.WORKSPACE!,
  timeout: 10000, // This is optional
})

export const spaceClient = new CMSSpaceClient(client, process.env.SPACE!)

Create your types

The next step is to create some types in types.ts also located in the lib folder. We start by importing a base interface from the package

import { IBaseObject } from '@trigani/api-client'

it contains the following attributes:

Name	Type	Description
id	string	This is a UUID unique to each row
folio	number	The order number given to the row upon creation
createdAt	string	When the row was created
updatedAt	string	When the row was last updated
publishedAt	string	When the row was published
deletedAt	string	When the row was deleted

We create our types/interfaces by extending IBaseObject and adding the types we created in our space

import { IBaseObject } from '@trigani/api-client'

export interface Image extends IBaseObject {
  url: string
  mime: string
  name: string
  size: number
  folderId?: string
  formats: Format[]
}

export interface Format {
  url: string
  mime: string
  name: string
  size: number
  format: string
}

export interface Category extends IBaseObject {
  name: string
  slug: string
  description: string
  parent: Category
}

export interface Post extends IBaseObject {
  name: string
  slug: string
  title: string
  description: string
  image: Image
  categories: Category
}

Create your services

Once a client is created and the your types are defined, you could write your service functions in a separate file. We have chosen to create a file called services.ts in the lib folder

import { spaceClient } from './client'

export async function getPosts(
  category: string,
  pageSize: number,
  page: number
) {
  'use cache' // Optional cacheing
  const { data, meta } = await spaceClient.getRows('posts', {
    filter: { // We want to filter by category
      categories: {
        slug: {
          $eq: category,
        },
      },
    },
    page,
    pageSize,
    populate: { // We want to populate the image and the parent category
      image: true,
      categories: {
        parent: true,
      },
    },
    formatOptions: { richText: 'html' }, // The rich text comes as html
  })

  return { data: data as unknown as Post[], meta }
}

Now any service functions can be awaited in your server components