I used the above links to attempt to get the data fetching code to work however, I cannot access the value of the return object from the data picker. I created the component to get data from a public API, and I can see that the data is fetched if I display the data in the custom code component but it is not visible in the data picker as mentioned in the above docs. I have dragged my custom Fetcher component to the plasmic editor. Below I have attached the custom code.
this is the custom code file called fetcher.js:
import React, { useEffect, useState } from “react”;
import { registerComponent, usePlasmicCanvasContext } from “@plasmicapp/host”;
import { DataProvider } from “@plasmicapp/host”;
import { usePlasmicQueryData } from “@plasmicapp/loader-nextjs”;
const Fetcher = ({children,}) => {
const { data } = usePlasmicQueryData(‘/tweets’, async () => {
const resp = await fetch(‘https://jsonplaceholder.typicode.com/posts’);
return await resp.json();
});
return (
<>
{data && (
<DataProvider name="tweets" data={data}>
{children}
</DataProvider>
)}
</>
);
};
export default Fetcher;
This is the registration component in the plasmic-init.js file:
PLASMIC.registerComponent(Fetcher, {
name: “Fetcher”,
providesData: true,
props: {}
});