Component not showing up in design

Developer Support
1

:wave: hey, running into an issue using data fetching components in the headless API mode, I have a component that uses the swr hook to fetch some data from a cms api, this component has no props, as it’s just a test to display some data. I proceed to register this component inside of the plasmic-init.ts file like so

PLASMIC.registerComponent(ProductComponent, {
  name: "productComponent",
});

But this component does not show up inside of my component dropdown menu, if I add any props to it It shows up but the application crashes when I try to drag and drop it inside of a page.

– component code

import useGetProducts from "../hooks/useGetProducts";
import { Product } from "../types.ds";

export default function ProductComponent() {
  const { products, isLoading, isError } = useGetProducts();

  if (isLoading) return <div>Fetching data...</div>;
  if (isError) return <div>Something went wrong..</div>;

  return (
    <div>
      {products?.map((product: Product) => {
        <div key={product.id}>
          <small>id: {product.id}</small>
          <h1>title : {product.name}</h1>;
          <p>description : {product.description}</p>;
          <p>price: {product.price}</p>
        </div>;
      })}
    </div>
  );
}

– fetch hook

import { fetcher } from "../libs/fetcher";
import useSWR from "swr";
import { Product } from "../types.ds";

export default function useGetProducts() {
  const { data, error } = useSWR<Product[]>(
    "cms api endpoint",
    fetcher,
    {
      refreshInterval: 1000,
    }
  );

  return {
    products: data,
    isLoading: !error && !data,
    isError: error,
  };
}

thanks!

2

Thanks for your report! We are currently investigating this.

3

Hey, we just fixed this issue and this might just be the same thing. Can you try to add it again?

4

For the registration, to register a code component you must pass the props parameter, or it’ll try to instead do a component substitution (this is to maintain backwards compatibility)