Building Advanced Schema: Extending ImageBlock with Custom Fields for Product Catalog
Create a product catalog system with enhanced schema capabilities, including image handling and custom fields. This example demonstrates cross-collection relationships and complex field definitions.
Project Configuration
Configure a project that extends the existing ImageBlock
collection with custom e-commerce fields. By extending ImageBlock
, we maintain all original image functionality while adding product-specific fields prefixed with ‘x’ as required by custom schemas:
const projectSettings = new ProjectSettings();
projectSettings
.set(new TextVectorizer(TextVectorizer.OpenAI.TextEmbedding3Small))
.set(new Generative(Generative.OpenAI.GPT4o))
.set(new AutoSummary(AutoSummary.OpenAI.GPT4o))
.set(new AutoVision(AutoVision.OpenAI.GPT4o));
const project = admin.projects.ref({
name: "Product Catalog Images",
settings: projectSettings,
});
// Define enhanced schema for product images
const customSchema = new CustomSchema();
const productImageBlock = new CustomSchema.Collection("ImageBlock");
// Add e-commerce specific fields
productImageBlock.add(
new CustomSchema.Field.Text("xProductName", "Product Name")
);
productImageBlock.add(
new CustomSchema.Field.Text("xDescription", "Product Description")
);
productImageBlock.add(
new CustomSchema.Field.Number("xPrice", "Product Price")
);
productImageBlock.add(
new CustomSchema.Field.Text("xCategory", "Product Category")
);
productImageBlock.add(
new CustomSchema.Field.Boolean("xInStock", "Stock Status")
);
productImageBlock.add(
new CustomSchema.Field.Number("xStockQuantity", "Stock Quantity")
);
customSchema.extend(productImageBlock);
project.settings.set(customSchema);
await project.save();
Push API Configuration
Create and initialize a Push API source for data ingestion. The source enables us to upload files and metadata to our enhanced schema:
const source = project.sources.ref({
name: "Push API Source",
type: SourceTypes.PushApi,
});
await project.sources.save(source);
await source.initialize();
Uploading Product Data
Use the Push API instance to upload both image files and associated product metadata. The FormData combines the image file with structured product information:
const formData = new FormData();
formData.append("id", `image-${Date.now()}`);
formData.append("file", fileBlob);
formData.append(
"payload",
JSON.stringify({
xProductName: "Classic T-Shirt",
xDescription: "Premium cotton t-shirt",
xPrice: 29.99,
xCategory: "Apparel",
xInStock: true,
xStockQuantity: 100,
})
);
const { data: imageData } = await pushApi.files.upload({
form: formData,
});
Data Retrieval
Query enhanced image collection using TypeScript interfaces. The interface extends IImageBlock
to include our custom product fields:
interface ExtendedImageBlock extends IImageBlock {
xProductName: StringField;
xDescription: StringField;
xPrice: NumberField;
xCategory: StringField;
xInStock: BooleanField;
xStockQuantity: NumberField;
}
const {
data: { payload },
} = await unbody.get
.collection<ExtendedImageBlock>("ImageBlock")
.select(
"xProductName",
"xDescription",
"xPrice",
"xCategory",
"xInStock",
"xStockQuantity",
"url",
"originalName"
)
.exec();