Merge routes for API requests

zochhlast year

52

const [featured, post, version, category, resolution] =
            await Promise.all([
                fetch(`${SERVER_URL}/api/featured`).then((res) => res.json()),
                fetch(
                    `${SERVER_URL}/api/post?limit=6&${edRe}${catRe}${resRe}${verRe}&sort=${
                        sort ? sort : "-updatedAt"
                    }&page=${currPage ? currPage : 1}`
                ).then((res) => res.json()),
                fetch(`${SERVER_URL}/api/versions?sort=-Versions`).then((res) =>
                    res.json()
                ),
                fetch(`${SERVER_URL}/api/categories?sort=title`).then((res) =>
                    res.json()
                ),
                fetch(`${SERVER_URL}/api/resolutions`).then((res) =>
                    res.json()
                ),
            ]);

• 

  notchrlast year

  @zochh How about a custom endpoint that grabs the data on the backend?

  
  

  
  

  You can create a custom API route that have access to these collections and can send all the data you need at once

  
  

  
  

  First you would create the endpoint, for example....

• 

  zochhlast year

  In the

  server.ts

  file? So like a app.get("/route")?

• 

  notchrlast year

  In your payload config file, not server.ts :

  
  
  

      {
        path: "/example",
        method: "get",
        handler: async (req, res, next) => {
          try {
            const exampleA = await req.payload.findByID({
              collection: "exampleA",
              id: req.params.id,
            });
  
            const exampleB = await payload.find({
              collection: "posts",
              depth: 2,
              page: 1,
              limit: 10,
            });
  
            const data = {
              exampleA,
              exampleB
            }
  
            res.status(200).json(data)
            
          } catch (error) {
            console.log(error);
            res.status(500).json("An error message");
          }
        },
      },

  
  

  
  

  that would go in the "endpoints" array on your main payload ocnfig object

  
  

  
  

  Endpoints added to the array on your main config are global custom endpoints

  
  

  
  

  Endpoints added onto collection configs are specific and relative to that collection

  
  

  
  

  In the endpoint handler function, you can see we have access to req.payload which is the local API

  
  

  
  

  Does this make sense?

  
  

  
  

  For all config options in payload, see:

  https://payloadcms.com/docs/configuration/overview
• 

  zochhlast year

  Yep, except the last bit- This can be accessed using the REST API too right? If I make a request to that path

• 

  notchrlast year

  Adding an endpoint means you're adding a new REST API entry

  
  

  
  

  So that you can send a get/post etc, to

  example.com/my-payload-api/custom-url
  

  
  

  Notice I set the request type to "get"

  
  

  
  

  you could set it to post and then check data on

  req.body
  

  
  

  It's like adding an express route

  
  

  
  

  Does that make sense?

  
  

  
  

  Personally, I would start by adding the most basic endpoint you could

  
  

  
  

  and try pinging it as a test

• 

  zochhlast year

  Yep, makes sense and got it working

• 

  notchrlast year

  and then once you confirm it's active, expand on that

  
  

  
  

  YAS

  
  

  
  

  Nicely done!

  
  

  
  

  dances
  

  
  

  Let us know if you need any more help, good luck

• 

  zochhlast year

  Thank you so much! Was really annoying to send 5 requests to different collections haha

• 

  notchrlast year

  I'm sure, though in the future if you need to make many requests at a time

  
  

  
  

  Fetch returns a promise, you're using a lot of .then chains

  
  

  
  

  If you have an array of promises, you can wait until they are resolved and get the combined data object via

  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
  

  
  

  const array = [promiseA, promiseB, promiseC, promiseD)

  
  

  
  

  await Promise.all(array)

  
  

  
  

  etc

  
  

  
  

  i forget if it is awaited, i think so

  
  

  
  

  anywho, just a side note 🙂

• 

  zochhlast year

  Oh, I see, gimme a sec

  
  

  
  

  yep it is

• 

  notchrlast year

  Ah right

  
  

  
  

  😄

• 

  zochhlast year

   const [post, { featured, version, category, resolution }] =
              await Promise.all([
                  fetch(
                      `${SERVER_URL}/api/post?limit=6&${edRe}${catRe}${resRe}${verRe}&sort=${
                          sort ? sort : "-updatedAt"
                      }&page=${currPage ? currPage : 1}`
                  ).then((res) => res.json()),
                  fetch(`${SERVER_URL}/api/home`).then((res) => res.json()),
              ]);

  
  

  so that would be it.

• 

  notchrlast year

  Yeah, though youll have better results with the custom endpoint

  
  

  
  

  Since the work is being done in one go on the server

  
  

  
  

  Just wanted to make a note about situations where you cant do that

  
  

  
  

  and want to await a bunch of promises

  
  

  
  

  unrelated to your initial question

• 

  zochhlast year

  Would passing the request in the body (then fetching the data using payload.find()) or through URL queries be faster?

• 

  notchrlast year

  Not in this case because it's essentially doing that in the background

  
  

  
  

  The only reason this situation is better handlded via a custom endpoint (i think), is the overhead of multiple requests to different endpoints

  
  

  
  

  And even then, it's probably not a noticeable difference

  
  

  
  

  I could be wrong though, request architecture isn't my strongest suit

• 

  zochhlast year

  Ah its oke, but tysm againtho! This was helpful!

• 

  notchrlast year

  Anytime!!!