Blocks are the essential building components of a Frontstack project. You can find them in the API Builder section of your dashboard.
Blocks overview

Overview of blocks in the API Builder

​
What are blocks?

Think of blocks as API endpoints with a user-defined schema. A schema defines the input - parameters and the output - fields of the block. Blocks share many characteristics with components in frontend frameworks like React. They are reusable, have properties (we call them parameters) and can be nested inside each other.

​
Create a block

Head to the API Builder section of the Admin Panel and click on the Create Block button.
Create block
Frontstack will automatically generate an endpoint URL as you type a name for your block.

​
Block description

In the next step, add a description for your block. The description will be used for the API documentation - which is automatically generated.

​
Block storage

You can also connect your block to a Data Storage at this point. If you don’t have a storage set up yet, you can skip this step for now and use mocked data instead.
If you select a product storage type, you can select whether you want the block to work on the product or variant level.

​
Block response

In this step, you define the output schema of your block.
Create block response

UI for creating a block response

This is where you define the output schema of your block. There are various types of fields you can choose from.

​
Simple fields

If you selected a storage in the previous step, you can select its fields here. You can also select a type if you decide the mock data for the field. If you select a mock type, you can also configure a generator module for the value.

​
Nested block or listing

You can also nest blocks or listings inside blocks. When doing so, you also have to configure the parameters of the nested block, so it can be resolved correctly. This is for example useful if you want to create a category page, where the category is the main block and a list of products is nested inside.

​
Routes

If you have defined pages for the storage that you connected to the block, you can add a route item to the block. This will automatically include a link to the page in the block response.

​
Variant list

= Only blocks from a product storage This will automatically include a list of variants in the block response. You will have to select a block (from a product storage and variant level) that will be used to display the variants.

​
Variant field

= Only blocks from a product storage You can - similarly to the variant list - add a variant field if your block returns product (and not variant) records. You will have to select a field from the product storage. The variant field will automatically include a list of all values of the product’s variants for the selected storage field (e.g. all colors of the variants).

​
Price

If you have selected a product storage type, you can add a price field to the block. This will automatically include the price of the product in the block response.

​
Fetching a block

If this is your first time reading, check out how to generate the client first.
To fetch a block, you can use the clients block method. Blocks always have a key parameter, which is used to identify the block uniquely. It uses the key field of the storage item if you have connected a storage to the block. If you don’t have a storage connected, you can pass any string as the key. 
const { data } = await client.block(
  "ProductCard",
  "123e4567e89b12d3a456426614174000"
);