@ts-ghost/content-api

@ts-ghost/content-api is a strongly-typed TypeScript client to interract with the Ghost Content API.

Documentation – Twitter

 !License

Introduction

@ts-ghost/content-api provides a strongly-typed TypeScript client to interract with the Ghost Content API based on Zod schemas passed through an APIComposer that exposes different resources and their read or browse methods (dependening on the resource) with params and output type-safety.

All the available options from the Ghost Content API are available here, filtering, ordering, pagination, selecting fields, modifiying output, etc...

!content-api-typesafety

Requirements

This client is only compatible with Ghost versions 5.x and 6x.

- Ghost 5.^ (Any Ghost version after 5.0)
- Ghost 6.^ (Any Ghost version after 6.0)
- Node.js 16+
- We rely on global fetch being available, so you can bring your own
polyfill and if you run Node 16, you'll need to run with the
--experimental-fetch flag enabled.
- TypeScript 5+, the lib make usage of const in generics and other TS5+ features.

Quickstart

These are the basic steps to follow to interact with the Ghost Content API in your TypeScript project.

$3

Connect to your ghost blog and create a new Integration to get your Content API Key.

!Create an Integration to get your Content API Key

_You will need the URL of your Ghost Blog and the Content API Key_

To know which Ghost Version you are using go in the Settings and click on top right button "About Ghost":

!Ghost Version

Here the version is "v5.47.0"

$3

``bash title="Terminal"
pnpm add @ts-ghost/content-api
`

$3

`bash title=".env"
GHOST_URL="https://myblog.com"
GHOST_CONTENT_API_KEY="e9b414c5d95a5436a647ff04ab"
`

$3

`ts title="ghost-queries.ts"
import { TSGhostContentAPI } from "@ts-ghost/content-api";

const api = new TSGhostContentAPI(
process.env.GHOST_URL || "",
process.env.GHOST_CONTENT_API_KEY || "",
"v5.47.0",
);

export async function getBlogPosts() {
const response = await api.posts
.browse({
limit: 10,
})
.fields({
title: true,
slug: true,
id: true,
})
.fetch();
if (!response.success) {
throw new Error(response.errors.join(", "));
}
// Response data is typed correctly with only the requested fields
// {
// title: string;
// slug: string;
// id: string;
// }[]
return response.data;
}
`

previous={{ title: "Introduction", href: "/docs/content-api" }}
next={{ title: "Overview", href: "/docs/content-api/overview" }}
/>

Overview

Here you will have an overview of the philosophy of the library and a common workflow for your queries.

The TSGhostContentAPI object is your entry-point, it will contains all the available endpoints and need to be instantiated with your Ghost Blog API Credentials, the URL, and the Content API Key.

`ts
import { TSGhostContentAPI } from "@ts-ghost/content-api";

const api = new TSGhostContentAPI("https://demo.ghost.io", "22444f78447824223cefc48062", "v6.0");
`

From this api instance you will be able to call any resource available in the Ghost Content API and have the available methods exposed.

Available resource

| Resource | .read() | .browse() |
| -------------- | --------- | ----------- |
| api.posts | ✅ | ✅ |
| api.pages | ✅ | ✅ |
| api.authors | ✅ | ✅ |
| api.tiers | ✅ | ✅ |
| api.tags | ✅ | ✅ |
| api.settings | \ | \ |

- settings resource only has a fetch function exposed, no query builder.

Building Queries

Calling any resource like authors, posts, etc (except settings resource) will give a
new instance of APIComposer containing two exposed methods read and browse (if you are interested in a version that exposes add, edit and delete you will have to check the @ts-ghost/admin-api).

This instance is already built with the associated Schema for that resource so any operation
you will do from that point will be typed against the asociated schema. Since you are using TypeScript you will get a nice developer experience with autocompletion and squiggly lines if you try to use a field that doesn't exist on the resource.

browse and read methods accept an options object. These params mimic the way Ghost API Content is built but with the power of Zod and TypeScript they are type-safe here.

`ts
let query = api.posts.browse({
limit: 5,
order: "title DESC",
// ^? the text here will throw a TypeScript lint error if you use unknown field.
});
`

- browse will accept page, limit, order, filter. (More details)
- read parameters are id or slug. (More details)

(Optional) Altering the output

After calling read or browse you get a Fetcher instance that you can use to optionnaly alter the output of the result.

For example if we want to fetch only the id, slug and title of our blog posts we could do:

`ts
let query = api.posts
.browse({
limit: 5,
order: "title DESC",
})
.fields({
id: true,
slug: true,
title: true,
});
`

Fetching the data

After building your query and _optionnaly using output formatting_, you can fetch it with the async fetch method. This method will return a Promise that will resolve to a result object that was parsed by the Zod Schema of the resource.

`ts
let query = await api.posts
.browse({
limit: 5,
order: "title DESC",
})
.fields({
id: true,
slug: true,
title: true,
})
.fetch();

// or without fields selection

let query2 = await api.posts
.browse({
limit: 5,
order: "title DESC",
})
.fetch();
`

Alternatively, coming from a browse query you also have access to the paginate method, instead of fetch. This version will return a cursor and a next fetcher to directly have the next query with the same parameters but on page n + 1. See a complete example in the Common Recipes section.

The result is a discriminated union with the Boolean success as a discriminator, so a check on success will let you know if the query was successful or not. The shape of the "OK" path depends on the query you made and the output modifiers you used.

`ts
const result: {
success: true;
data: Post; // Shape depends on resource + browse | read + output modifiers
// contains aditionnal metadata for browse queries
} | {
success: false;
errors: {
message: string;
type: string;
}[];
}
`

previous={{ title: "Quickstart", href: "/docs/content-api/quickstart" }}
next={{ title: "Browse", href: "/docs/content-api/browse" }}
/>

Browse

The browse method is used to get a list of items from a Ghost Content API resource, it is the equivalent of the GET /posts endpoint. You have access to different options to paginate, limit, filter and order your results.

Options

These options are totally _optionals_ on the browse method but they let you filter and order your search.

This is an example containing all the available keys in the params object

`ts
let query = api.posts.browse({
page: 1,
limit: 5,
filter: "name:bar+slug:-test",
// ^? the text here will throw a TypeScript lint error if you use unknown fields.
order: "title DESC",
// ^? the text here will throw a TypeScript lint error if you use unknown fields.
});
`

These browse params are then parsed through a Zod Schema that will validate all the fields.

$3

Lets you query a specific page of results. The default value is 1 and pagination starts at 1.

$3

Lets you limit the number of results per page. The default value is 15 and the maximum value is 15 (limitation of the Ghost API).
You can also pass the literal string "all" to get all the results.

$3

Lets you filter the results with the Ghost API filter syntax. But with the power of TypeScript, you will get lint errors if you use unknown fields.

For example if you use filter: "name:bar+slug:-test", name IS NOT a field of the Post resource, you will get a lint error.

Example, getting all featured posts except one with specific slug:

`ts
const slugToExclude = "test";

let query = await api.posts
.browse({
filter: featured:true+slug:-${slugToExclude},
})
.fetch();
`

Note that you also have access to nested fields.

_filter is hard to type, if you find any issues where the type shows an error but the query works,
please open an issue._

$3

Lets you order the results by fields. Similar to the filter option, you will get TypeScript lint errors if you use unknown fields. The syntax is field direction where direction is ASC or DESC.

`ts
let query = await api.posts
.browse({
order: "title DESC",
})
.fetch();
`

Note that you can also use nested properties, for example if you want to fetch the first 3 Tags with the most posts:

`ts
api.tags
.browse({
order: "count.posts DESC",
filter: "visibility:public",
limit: 3,
})
.include({ "count.posts": true })
.fetch(),
`

Output modifiers

After calling browse you get a Fetcher instance that you can use to optionnaly alter the output of the result with methods like include, fields and formats. You can also use the fetch method to get the result.

There is a section dedicated to output modifiers here.

Fetching the data

After using browse query, you will get a BrowseFetcher with 2 methods:

- async fetch
- async paginate

That result is a discriminated union with the Boolean success as a discriminator, so a check on success will let you know if the query was successful or not. Generally your workflow will look like that:

`ts
let result = await api.posts.browse().fetch();
if (result.success) {
const posts = result.data;
// ^? type Post[]
} else {
// errors array of objects
console.log(result.errors.map((e) => e.message).join("\n"));
}
`

$3

The data property of the result will be an array of objects of the resource you queried. This output schema will be modified according to the output modifiers you used.

Basic example for Posts (without output modifiers you get the full Post object):

`ts
// example for the browse query (the data is an array of objects)
const result: {
success: true;
data: Post[];
meta: {
pagination: {
pages: number;
limit: number | "all";
page: number;
total: number;
prev: number | null;
next: number | null;
};
};
} | {
success: false;
errors: {
message: string;
type: string;
}[];
}
`

$3

Paginate is a method that will return a cursor and a next fetcher to directly have the next query with the same parameters but on page n + 1. See a complete example in the Common Recipes section.

`ts
const result: {
success: true;
data: Post[];
meta: {
pagination: {
pages: number;
limit: number | "all";
page: number;
total: number;
prev: number | null;
next: number | null;
};
};
next: BrowseFetcher | undefined; // the next page fetcher if it is defined
} | {
success: false;
errors: {
message: string;
type: string;
}[];
next: undefined; // the next page fetcher is undefined here
}
`

Here you can use the next property to get the next page fetcher if it is defined.

previous={{ title: "Overview", href: "/docs/content-api/overview" }}
next={{ title: "Read", href: "/docs/content-api/read" }}
/>

Read

The read method is used to one item from a Ghost Content API resource, it is the equivalent of the GET /posts/slug/this-is-a-slug endpoint. You have to give it an identity field to fetch the resource.

Options

Options for the read method depends on the resource you are querying. Each resource have a specific identity field that you can use to fetch it. For example, the Post resource have id and slug as identity fields.

Use TypeScript autocomplete to guide you through the available identity fields.

`ts
let query = api.posts.read({
id: "edHks74hdKqhs34izzahd45"
});

// or

let query = api.posts.read({
slug: "typescript-is-awesome-in-2025"
});
`

$3

You can submit both id and slug, but the fetcher will then chose the id in priority if present to make the final URL query to the Ghost API.

`ts
let query = api.posts.read({
id: "edHks74hdKqhs34izzahd45", // id will take priority
slug: "typescript-is-awesome-in-2025",
});
`

Output modifiers

After calling read you get a Fetcher instance that you can use to optionnaly alter the output of the result with methods like include, fields and formats. You can also skip that and use the fetch method directly to get the result.

There is a section dedicated to output modifiers here.

Fetching the data

After using browse query, you will get a ReadFetcher with an async fetch method.
That result is a discriminated union with the Boolean success as a discriminator, so a check on success will let you know if the query was successful or not. Generally your workflow will look like that:

`ts
let result = await api.posts.read({ slug: "this-is-a-slug" }).fetch();
if (result.success) {
const posts = result.data;
// ^? type Post
} else {
// errors array of objects
console.log(result.errors.map((e) => e.message).join("\n"));
}
`

$3

The data property of the result will be an object corresponding to the resource you requested. This output schema will be modified according to the output modifiers you used.

Basic example for Post (without output modifiers you get the full Post object):

`ts
// example for the read query (the data is an object)
const result: {
success: true;
data: Post; // parsed by the Zod Schema and modified by the fields selected
} | {
success: false;
errors: {
message: string;
type: string;
}[];
}
`

previous={{ title: "Browse", href: "/docs/content-api/browse" }}
next={{ title: "Output Modifiers", href: "/docs/content-api/output-modifiers" }}
/>

Output modifiers

Output modifiers are available for the read and browse methods. They let you change the output of the result to have only your selected fields, include some additionnal data that the Ghost API doesn't give you by default or get the content in different formats.

The result type from the subsequent fetch will be modified to match your selection giving you full type-safety.

`ts /fields({ title: true })/
// Example with read...
let result = await api.posts.read({ slug: "slug"}).fields({ title: true }).fetch();

// ... and with browse
let result = await api.posts.browse({limit: 2}).fields({ title: true }).fetch();
`

Select specific fields with .fields()

The fields method lets you change the output of the result to have only your selected fields, it works by giving an object with the field name and the value true. Under the hood it will use the zod.pick method to pick only the fields you want.

`ts
let result = await api.posts
.read({
slug: "typescript-is-cool",
})
.fields({
id: true,
slug: true,
title: true,
})
.fetch();

if (result.success) {
const post = result.data;
// ^? type {"id": string; "slug":string; "title": string}
}
`

The output schema will be modified to only have the fields you selected and TypeScript will pick up on that to warn you if you access non-existing fields.

Include relations with .include()

The include method lets you include some additionnal data that the Ghost API doesn't give you by default. The include params is specific to each resource and is defined in the "include" Schema of the resource. You will have to let TypeScript guide you to know what you can include.

`ts
let result = await api.authors
.read({
slug: "phildl",
})
.include({ "count.posts": true })
.fetch();
`

Available include keys by resource:

- Posts & Pages: authors, tags
- Authors: count.posts
- Tags: count.posts
- Tiers: monthly_price, yearly_price, benefits

The output type will be modified to make the fields you include non-optionals.

Output page/post content into different .formats()

The formats method lets you add alternative content formats on the output of Post or Page resource to get the content in plaintext or html. Available options are plaintext | html | mobiledoc.

`ts
let result = await api.posts
.read({
slug: "this-is-a-post-slug",
})
.formats({
plaintext: true,
html: true,
})
.fetch();
`

The output type will be modified to make the formatted fields you include non-optionals.

previous={{ title: "Read", href: "/docs/content-api/read" }}
next={{ title: "Fetching", href: "/docs/content-api/fetching" }}
/>

Fetching

Fetching happens at the end of your chaining of methods, the moment you call the async fetch method (or the async paginate).

Technically these are the only asynchronous methods and the only moment where the library will make a request to the Ghost API through the platform fetch function (in Node or in the browser).

Reminder requirements

This library expect the global fetch function to be available. If you are using Node 16, you will need to run with the --experimental-fetch flag enabled.

fetch options

Since we are using the standard fetch you have can pass options of type RequestInit notably to play with the cache behavior.

For example:

`ts
let query = await api.posts
.browse({
limit: 5,
order: "title DESC",
})
.fetch({
cache: "no-cache",
});
`

$3

In a NextJS 13+ project, fetch is augmented and you can fully take advantage of that and you have access to the next option.

`ts
let query = await api.posts
.browse({
limit: 5,
order: "title DESC",
})
.fetch({ next: { revalidate: 10 } }); // NextJS revalidate this data every 10 seconds at most
`

previous={{ title: "Output Modifiers", href: "/docs/content-api/output-modifiers" }}
next={{ title: "Common Recipes", href: "/docs/content-api/common-recipes" }}
/>

Commons recipes

Getting all the posts (including Authors) with pagination

Here we will use the paginate function of the fetcher to get the next page fetcher directly if it is defined.

`ts title
import { TSGhostContentAPI, type Post } from "@ts-ghost/content-api";

let url = "https://demo.ghost.io";
let key = "22444f78447824223cefc48062"; // Content API KEY
const api = new TSGhostContentAPI(url, key, "v6.0");

const posts: Post[] = [];
let cursor = await api.posts
.browse()
.include({ authors: true, tags: true })
.paginate();
if (cursor.current.success) posts.push(...cursor.current.data);
while (cursor.next) {
cursor = await cursor.next.paginate();
if (cursor.current.success) posts.push(...cursor.current.data);
}
return posts;
`

Fetching the Settings of your Ghost instance

Settings is a specific resource, you cannot build query against it like the other resources. You can only fetch the settings, so calling api.settings will directly give you a fetcher.

`ts
import { TSGhostContentAPI, type Post } from "@ts-ghost/content-api";

let url = "https://demo.ghost.io";
let key = "22444f78447824223cefc48062"; // Content API KEY
const api = new TSGhostContentAPI(url, key, "v6.0");

let result = await api.settings.fetch();
if (result.success) {
const settings = result.data;
// ^? type Settings {title: string; description: string; ...
}
`

previous={{ title: "Fetching", href: "/docs/content-api/fetching" }}
next={{ title: "Remix", href: "/docs/content-api/remix" }}
/>

Remix example

Here is an example using the @ts-ghost/content-api in a Remix loader:

$3

`bash title="Terminal"
pnpm add @ts-ghost/content-api
`

$3

`bash title=".env"
GHOST_URL="https://myblog.com"
GHOST_CONTENT_API_KEY="e9b414c5d95a5436a647ff04ab"
`

$3

`tsx title="app/routes/_index.tsx"
import { json, type LoaderArgs, type V2_MetaFunction } from "@remix-run/node";
import { Link, useLoaderData } from "@remix-run/react";
import { TSGhostContentAPI } from "@ts-ghost/content-api";

export const meta: V2_MetaFunction = () => {
return [{ title: "New Remix App" }];
};

export async function loader({ request }: LoaderArgs) {
const api = new TSGhostContentAPI(
process.env.GHOST_URL || "",
process.env.GHOST_CONTENT_API_KEY || "",
"v6.0",
);
const [settings, posts] = await Promise.all([api.settings.fetch(), api.posts.browse().fetch()]);

if (!settings.success) {
throw new Error(settings.errors.join(", "));
}
if (!posts.success) {
throw new Error(posts.errors.join(", "));
}
return json({ settings: settings.data, posts: posts.data });
}

export default function Index() {
const { settings, posts } = useLoaderData();

return (