Any idea what could possibly cause a DataProvider to not provide data…spent a few hours on this last night and I’m not sure where I went wrong.
I set up a new project to try and see what’s going on and the results leave me more confused…
I’d think at the very least the data from this provider named STATIC_DATA should have some value… but even that is not showing up…. The states from my components are showing up however
have tried clearing and updating node_modules
Can you show the metadata for the registration of this code component?
Usually it’s easy to forget to add providesData: true in the metadata.
export const productCollectionMeta: ComponentMeta<ProductCollectionProps> = {
name: "commerce-product-collection",
displayName: "Product Collection",
states: {
filterState: {
type: "writable",
valueProp: "filterState",
onChangeProp: "setFilterState",
variableType: "object",
},
sortState: {
type: "writable",
valueProp: "sortState",
onChangeProp: "setSortState",
variableType: "object",
},
productSummary: {
type: "readonly",
onChangeProp: "setProductSummary",
variableType: "object",
},
},
props: {
children: {
type: "slot",
defaultValue: [],
},
emptyMessage: {
type: "slot",
defaultValue: {
type: "text",
value: "No product found!",
},
},
loadingMessage: {
type: "slot",
defaultValue: {
type: "text",
value: "Loading...",
},
},
limit: { type: "number", defaultValue: 16 },
category: {
type: "choice",
options: (props, ctx) => {
return (
ctx?.categories.map((category) => ({
label: `${" ".repeat(category.depth ?? 0)}${category.name}`,
value: category.id,
})) ?? []
);
},
defaultValueHint: (props, ctx) => ctx?.categoryCtx?.name,
readOnly: (props, ctx) => !!ctx?.categoryCtx,
},
subcategories: {
type: "boolean",
displayName: "Include subcategories",
description: "Include products from subcategories.",
},
brands: {
type: "choice",
options: (props, ctx) => {
return (
ctx?.brands.map((brand: any) => ({
label: brand.name,
value: brand.entityId,
})) ?? []
);
},
},
search: {
type: "string",
},
noLayout: {
type: "boolean",
displayName: "No layout",
description: "Do not render a container element.",
advanced: true,
},
noAutoRepeat: {
type: "boolean",
displayName: "No auto-repeat",
description: "Do not automatically repeat children for every category.",
advanced: true,
},
sortState: {
type: "object",
displayName: "Sort state",
description: "The current sort state.",
advanced: true,
},
filterState: {
type: "object",
displayName: "Filter state",
description: "The current filter state.",
advanced: true,
},
setFilterState: {
type: "eventHandler",
argTypes: [{ name: "event", type: "object" }],
advanced: true,
},
setSortState: {
type: "eventHandler",
argTypes: [{ name: "event", type: "object" }],
advanced: true,
},
setProductSummary: {
type: "eventHandler",
argTypes: [{ name: "event", type: "object" }],
advanced: true,
},
},
defaultStyles: {
display: "grid",
gridTemplateColumns: "1fr 1fr 1fr 1fr",
padding: "8px",
maxWidth: "100%",
},
importPath: "@flyingcommerce/commerce/client",
importName: "ProductCollection",
providesData: true,
};
It was working on a different branch before I switched from app dir back to pages. I’ve tried ripping out every extra component in _app and plasmic-host down to the most simple level. Just wrapped in the Trpc provider at this point
Can you DM me the code for the component too?
Are you using loader or codegen? Another common problem is to have both loader-* and react-web as dependency