Cloudflare Developers•14mo ago

Pages Functions as API

Hi, looking for some help with functions to help me fetch json data from a third party API. Apologies in advanced if I have got this all wrong, I am usually just front-end but I am helping this animal rescue organisation make their webpage - and to list the animals they have for adoption we are using a third party api that needs a API secret. To hide the API secret from the client-end I went about making an express.js backend that will be hosted and the end points will simply just call the third party API with the secret, and some basic filtering queries will just be appeneded to the fetch. As this is just a simple 'backend' I believe it would be best suited for serverless functions like on Cloudflare Pages Functions as I have migrated the static page to be hosted on Cloudflare Pages already. Would this implementation be possible in CloudFlare Pages functions. I tried looking through documentation and attempted to implement last night, would the basic functions act the same with a getRequest. I had issues with parsing the request for the queries as well as returning a proper response. An example query would be ".../listings?page=1&species=Cat" If anyone has any examples they could point me to or any guidance I would greatly appreciate it. Attached is an example endpoint for the express implementation.

3 Replies

JustinNoel•14mo ago

You don't need to have an express backend to support what you're trying to do. In your pages project, you could just add a folder called functions. Then in that functions folder, you can have a file named lisitngs.js. In the HTML form, the action would be /listings to submit the form to your new function.

export async function onRequest(context) {
  try {
    const response = await fetch("YOUR_API_URL", {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Authorization: "Token token-"
      },
      body: JSON.stringify(
        [species, excludedSpecies, senior, page].join(",")
      )
    });
    if (! response.ok) {
      throw new Error("Response was not ok");
    }
    if (! response.ok) {
      throw new Error("Response was not ok");
    }
    const data = await response.json();
    return new Response(data)
  } catch (error) {
    console.error("Error:", error);
  }
}

export async function onRequest(context) {
  try {
    const response = await fetch("YOUR_API_URL", {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Authorization: "Token token-"
      },
      body: JSON.stringify(
        [species, excludedSpecies, senior, page].join(",")
      )
    });
    if (! response.ok) {
      throw new Error("Response was not ok");
    }
    if (! response.ok) {
      throw new Error("Response was not ok");
    }
    const data = await response.json();
    return new Response(data)
  } catch (error) {
    console.error("Error:", error);
  }
}

feel free to dm me if you'd need some assistance.

dXteeOP•14mo ago

Oh awesome thanks. So for the queries (species, excluded species, senior, page) does this not have to be declared in this call , will it be able to read it from the passed in context

JustinNoel•14mo ago

Oh yes, you would need to get those from form data. const formData = await context.req.formData(); - I think

Gaming

Programming

Pages Functions as API