Importing Custom DataAdvanced Data Schema

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();

Learn More

©2024 Unbody