The fetchPages function is useful when you want to retrieve all your pages from outside the React context (where you could use the usePages hook instead).

In particular, this comes in handy to retrieve all the pages during the build process of a static website. Indeed, this is the method used in our Gatsby and Next.js starter projects.


const fetchPages = async (
apiKey: string,
options: { type?: string; tag?: string } = {}
): Promise<types.PageFromList[]>
apiKeyApi Key of your React Bricks app (a string).
optionsOptional object to filter the pages by type or tag (see below).


The options object has the following shape

type?: string;
tag?: string;
typeOptional string to return only the pages with the specified page type.
tagOptional string to return only the pages with the specified tag.

Return value

fetchPages returns a promise which resolves to an array of pages.
The pages are of type PageFromList (a Page object without content):

id: string
type: string
name: string
slug: string
meta: IMeta
content: IContentBlock[]
authorId?: string
author: Author
invalidBlocksTypes?: string[]
status: PageStatus
isLocked: boolean
tags: string[]

To retrieve the content of each page, you can use the fetchPage function.

Usage example

fetchPages('API_KEY', { type: 'blogPost', tag: 'react' })
.then(data => {