accessing local API in custom admin component

default discord avatar
fabier
9 months ago
1

Hey Guys,



I have been greatly enjoying my time working with payloadCMS thus far. I've converted over a sizable project from NestJS this weekend and have been trying to hammer the Admin UI to work the way that I need it to work.



One of the things I need my admin portal to do, is show me two docs from a collection called "runner" and then let me create a new record that is some merger of the two.



I created a collection called "merges" which is just two relationships to runner which does the trick for me. My thought was to create a custom component for the admin panel which overwrites the merges Edit admin component and then display the fields from each runner relationship with a button that fills in a field in a third column and then a submit button.



But I am stuck with trying to figure out how to access the local API in the admin panel. Whenever I call payload in my custom component I get this error:

Uncaught (in promise) TypeError: payload__WEBPACK_IMPORTED_MODULE_3__.default.find is not a function



Here is the code from my component:



const MergeList: AdminView = ({ user, canAccessAdmin }) => {
  const { routes: { admin: adminRoute } } = useConfig();
  const { setStepNav } = useStepNav();
  const [data, setData] = useState(null);


  
  useEffect(() => {
    const fetchData = async () => {
        // Pull in 10 merges to review:
      const merges = await payload.find({
        collection: "merges",
        depth: 3,
      });
      setData(merges);
    }
    fetchData();
  }, []);

  return (
    <>
      <h1>View and manage possible duplicate entries.</h1>
      <p>Use the form below to identify and clear up possible duplicate runners in the database. 
        These runners have been identified as being possible duplicates, so now we just need a pair of eyes on these to make sure they all match up like they should.</p>


      
        <div>{data ? data.totalDocs : "Loading..."}</div>
      
    </>
  );
};


I kept it really simple while trying to troubleshoot this issue. The problem is the line:

const merges = await payload.find({

I just don't know how to fix it. I've poured over the docs and am stuck. Hoping one of you here might be able to get me over this hump.



Many thanks!



Wait.... I think I found my answer here:



https://payloadcms.com/community-help/discord/is-it-possible-to-use-the-local-payload-api-in-custom-react-components-in-the-admin-dashboard-ui

As is the case with most code issues, the solution is usually a classic PEBKAC.



Requests run in the admin panel are not part of Payload and should be fetched via an HTTP request instead.

    Open the post
    Continue the discussion in Discord
    Like what we're doing?
    Star us on GitHub!

    Star

    Connect with the Payload Community on Discord

    Discord

    online

    Can't find what you're looking for?

    Get help straight from the Payload team with an Enterprise License.