1
2export const SpaceX = createRenderer(() => {
3    // Let's retrieve the variables that were chosen by
4    // the user upon dropping the page element onto the page.
5    const { getElement } = useRenderer();
6    const element = getElement<SpaceXElementData>();
7    const { limit, offset, type } = element.data.variables;
8  
9    const [data, setData] = useState<Spacecraft[]>([]);
10  
11    // This is where we fetch the data and store it into component's state.
12    useEffect(() => {
13      request(GQL_API_URL, QUERIES[type], {
14        limit: parseInt(limit),
15        offset: parseInt(offset)
16      }).then(({ data }) => setData(data));
17    }, [limit, offset, type]);
18  
19    if (!data.length) {
20      return <>Nothing to show.</>;
21    }
22
23    return <>SpaceX has {data.length} rockets</>;
24});
25
26const plugin = {
27    name: "pb-render-page-element-space-x",
28    type: "pb-render-page-element",
29    elementType: "spaceX",
30    render: SpaceX
31} as PbRenderElementPlugin;
32