https://nextjs.org/docs/pages/building-your-application/routing/api-routes

M

Marcus•2/21/24, 10:47 PM

Im trying to set up a function that simply takes the form data and submits it to the d1 database thats binded to the page. this is the form element:
<form class="form" data-form="" action="functions/formSub" method="POST">

when i submit the form it takes me to the action address instead of just running the function itself. ive added event.preventDefault(); to the handle but that doesnt seem to help. can anyone give me a hand submitting form data to a binded d1 DB via a function?

MMarcus Im trying to set up a function that simply takes the form data and submits it to...

A

anthony•2/22/24, 1:15 AM

I think to call a pages function, u gotta hit the full endpoint, like https://urdomain.com/formsub

HHello, I’m Allie!https://nextjs.org/docs/pages/building-your-application/routing/api-routes

Ɽ

ⱤØ₥₳₦•2/22/24, 5:29 PM

Will this do fetch requests? Like cf workers?

ⱤⱤØ₥₳₦Will this do fetch requests? Like cf workers?

H

Hello, I’m Allie!OP•2/22/24, 5:29 PM

It should

HHello, I’m Allie!It should

Ɽ

ⱤØ₥₳₦•2/22/24, 5:31 PM

Thanks for the knowledge

just because of you I got to know about nuxt and nextjs

Ɽ

ⱤØ₥₳₦•2/22/24, 5:32 PM

Are there more serverless edge function platforms like cloudflare workers? Lambda and GCP both have stupid limits of invocation per second that i hate

ⱤⱤØ₥₳₦Are there more serverless edge function platforms like cloudflare workers? Lambd...

H

Hello, I’m Allie!OP•2/22/24, 5:33 PM

There’s Deno, Fermyon, Wasmer Edge, etc

T

tcurdt•2/24/24, 11:03 PM

When I have Cloudflare page connected via git and 11ty creates this site

$ find _site 
_site
_site/index.html
_site/functions
_site/functions/hello.js

$ find _site 
_site
_site/index.html
_site/functions
_site/functions/hello.js

$ find _site 
_site
_site/index.html
_site/functions
_site/functions/hello.js

$ find _site 
_site
_site/index.html
_site/functions
_site/functions/hello.js

I was expecting the function to be available as

/hello

/hello

... but it's not.

Do the functions need to be in the root of the git repo? or the root of the site?

T

tcurdt•2/24/24, 11:07 PM

repo root it is!

C

conqr ᯅ•2/24/24, 11:32 PM

Is there any way to use a page function as a service binding for another worker

T

tcurdt•2/24/24, 11:43 PM

why are the pages functions not async? https://developers.cloudflare.com/pages/functions/api-reference/

T

tcurdt•2/24/24, 11:57 PM

after some digging it seems async should still work

T

tcurdt•2/24/24, 11:59 PM

but ...

core:user:worker: Uncaught ReferenceError: process is not defined

core:user:worker: Uncaught ReferenceError: process is not defined

ok ... I kind of understand why ... but how can I get access to env variables in pages functions?

T

tcurdt•2/25/24, 12:02 AM

found it ...

context.env.VAR

context.env.VAR

T

tcurdt•2/25/24, 1:06 AM

hm ... it would be good to be able to init some resources outside of a request handler .... but that's not supported?

const db = initFromEnv(env) 

export async function onRequestGet(context) {
    // use db
}

const db = initFromEnv(env) 

export async function onRequestGet(context) {
    // use db
}

const db = initFromEnv(env) 

export async function onRequestGet(context) {
    // use db
}

const db = initFromEnv(env) 

export async function onRequestGet(context) {
    // use db
}

Ttcurdt hm ... it would be good to be able to init some resources outside of a request h...

I

Isaac McFadyen•2/25/24, 1:29 AM

Nope. The workaround is:

let variable;

export async function onRequestGet(context) {
    if (variable == null) {
        variable = initFromEnv(env);
    }
    // ...use variable
}

let variable;

export async function onRequestGet(context) {
    if (variable == null) {
        variable = initFromEnv(env);
    }
    // ...use variable
}

let variable;

export async function onRequestGet(context) {
    if (variable == null) {
        variable = initFromEnv(env);
    }
    // ...use variable
}

let variable;

export async function onRequestGet(context) {
    if (variable == null) {
        variable = initFromEnv(env);
    }
    // ...use variable
}

IIsaac McFadyen Nope. The workaround is: ```js let variable; export async function onRequestGet...

T

tcurdt•2/25/24, 2:23 AM

uff. ok.
and to be sure:
I assume there are no concurrency considerations that need to be taken into account?

Ttcurdt uff. ok. and to be sure: I assume there are no concurrency considerations that n...

I

Isaac McFadyen•2/25/24, 2:25 AM

Well it depends on how long your initFromEnv takes.

I

Isaac McFadyen•2/25/24, 2:25 AM

Workers are single-threaded so if there's no

await

await

points (no IO) inside initFromEnv then you should be good.

I

Isaac McFadyen•2/25/24, 2:26 AM

If you're

await

await

'ing inside the

initFromEnv

initFromEnv

then there's concurrency issues because Workers may switch the request they're serving on

await

await

points.

T

tcurdt•2/25/24, 3:11 AM

In this very case - no await. But I could imagine there to be one.
That said, I don't think there is ever the need for a full singleton restriction.
This would just be about caching. So I think it should be OK - even then.

A

alok•2/27/24, 10:50 AM

Hi, I have a BetterStack monitoring job hitting a pages function endpoint which always returns the same data (the code instantiates a few JS classes and then returns

{"env":"prod"}

{"env":"prod"}

, there's no sub-fetch or database queries going on. The endpoint sets

cache-control: private

cache-control: private

. On my BetterStack graph, I'm seeing lots of requests which take ~1 second and even a handful which take ~2 seconds. I switched to paid workers, but don't see any difference in the graph. So a couple questions:

any debugging suggestions for minimizing these latency spikes?
is the performance of workers vs page functions very different? I can migrate from page functions to workers with a little bit of work.
ideally I would like to see numbers more in line with https://www.openstatus.dev/blog/monitoring-latency-cf-workers-fly-koyeb-raylway-render.

My account id is 9be6f6ea52d6a7dffc494c0fe0bc6729 if anyone wants to help look into this. Thanks!

Screenshot_2024-02-27_at_11.38.46_AM.png

W

Walshy•2/28/24, 6:33 AM

Complex answer haha. What's the code doing? Are you fetching external resources?
They're the same. Functions is just Workers
That benchmark is measuring time to invoke and start. The code is very simple and returns right away. Adding more complexity (e.g. fetching external resources) will understandably add more time before a response can be returned

We'd really need to understand the code to understand where this can come from. You talked about it a bit but we'd really need to know more.

Also question, do you have something like Smart Placement enabled?

WWalshy 1. Complex answer haha. What's the code doing? Are you fetching external resourc...

A

alok•2/28/24, 8:39 AM

The code isn't doing anything. It's instantiating two classes I use everywhere (the constructors just set a bunch of properties). Then returns with
```
Response.json()
```
```
Response.json()
```

WWalshy 1. Complex answer haha. What's the code doing? Are you fetching external resourc...

A

alok•2/28/24, 8:42 AM

Workers with a D1 binding will always be placed in a data center near the location of the D1 database they are bound to

Workers with a D1 binding will always be placed in a data center near the location of the D1 database they are bound to

Workers with a D1 binding will always be placed in a data center near the location of the D1 database they are bound to

Workers with a D1 binding will always be placed in a data center near the location of the D1 database they are bound to => I do have a D1 binding.

A

alok•2/28/24, 8:42 AM

not all my requests need the D1 binding. I guess I should split things into two workers? Or two distinct pages projects.

S

saitama sendpie•2/28/24, 10:16 AM

I have a Hugo project with the following directories:

├─ functions
│  └─ get_info
│     └─ index.js

├─ functions
│  └─ get_info
│     └─ index.js

├─ functions
│  └─ get_info
│     └─ index.js

├─ functions
│  └─ get_info
│     └─ index.js

When I run

pnpx wrangler dev functions

pnpx wrangler dev functions

pnpx wrangler dev functions

pnpx wrangler dev functions it keeps saying

 [ERROR] The entry-point file at "functions" was not found.

  The provided entry-point path, "functions", points to a directory, rather than a file.

 [ERROR] The entry-point file at "functions" was not found.

  The provided entry-point path, "functions", points to a directory, rather than a file.

 [ERROR] The entry-point file at "functions" was not found.

  The provided entry-point path, "functions", points to a directory, rather than a file.

 [ERROR] The entry-point file at "functions" was not found.

  The provided entry-point path, "functions", points to a directory, rather than a file.

When I run it using

pnpx wrangler dev functions/get_info/index.js

pnpx wrangler dev functions/get_info/index.js

pnpx wrangler dev functions/get_info/index.js

pnpx wrangler dev functions/get_info/index.js my script works perfectly.

This also means, that my build logs show the following error because it can't find the index.js. How do I fix this?

P

poa•2/28/24, 5:45 PM

hi can anyone help me from logging in with only a id

In small web game?

P

poa•2/28/24, 5:45 PM

I got a code

P

poa•2/28/24, 5:45 PM

A public funtion but dont know how to use

L

Lambo•2/29/24, 7:18 PM

Hi, is it not possible to get query parameters via a Pages Function?

I am wanting to do a login callback via a Pages Function, which returns a token as a query parameter, however, my

context.request

context.request

context.request

context.request object is completely empty?

I would have expected

context.request.url

context.request.url

context.request.url

context.request.url to at least exist?

My

JSON.stringify(context)

JSON.stringify(context)

JSON.stringify(context)

JSON.stringify(context) look like:

{
  "request": {},
  "functionPath": "/api/auth-callback",
  "params": {},
  "data": {},
  "env": {
    "ASSETS": {}
  }
}

{
  "request": {},
  "functionPath": "/api/auth-callback",
  "params": {},
  "data": {},
  "env": {
    "ASSETS": {}
  }
}

{
  "request": {},
  "functionPath": "/api/auth-callback",
  "params": {},
  "data": {},
  "env": {
    "ASSETS": {}
  }
}

{
  "request": {},
  "functionPath": "/api/auth-callback",
  "params": {},
  "data": {},
  "env": {
    "ASSETS": {}
  }
}

When going to

http://localhost:8788/api/auth-callback?token=aaabbb

http://localhost:8788/api/auth-callback?token=aaabbb

http://localhost:8788/api/auth-callback?token=aaabbb

http://localhost:8788/api/auth-callback?token=aaabbb

K

kian•2/29/24, 7:20 PM

Just an issue with

JSON.stringify

JSON.stringify

(and sometimes

console.log

console.log

) - it doesn't handle properties on most objects.

K

kian•2/29/24, 7:20 PM

Try logging

context.request.url

context.request.url

context.request.url

context.request.url directly

L

Lambo•2/29/24, 7:20 PM

Aha!

L

Lambo•2/29/24, 7:20 PM

Thank you!

K

kian•2/29/24, 7:23 PM

fwiw, JSON.stringify is the culprit here

K

kian•2/29/24, 7:23 PM

Even on browsers, you can't stringify the Web API objects

L

Lambo•2/29/24, 7:23 PM

Interesting, good to know

K

kian•2/29/24, 7:23 PM

console.log is better, but still has some issues - util.inspect from the nodejs_compat compatibility flag is much better

L

Lambo•2/29/24, 7:23 PM

Cheers, will keep that in mind

K

kian•2/29/24, 7:23 PM

K

kian•2/29/24, 7:23 PM

It will actually recurse, show Header values, etc

L

Lambo•2/29/24, 7:23 PM

neat.

A

akazwz•3/1/24, 2:33 AM

how cloudflare pages set node_compat, i set nodejs_compat flag in dashboard, but it does not work
and cloudflare worker is normal when set in wrangler.toml

P

Patrick M•3/1/24, 1:12 PM

Would any Cloudflare staff be able to tell me why my deployment failed? Deployment id 8270b12c-f15e-4468-8072-04f3ef0862e9
The cli showed upload success but the dashboard says “failure”.
I changed some dependencies, maybe the bundle size got too large or they are not compatible with the runtime?

PPatrick M Would any Cloudflare staff be able to tell me why my deployment failed? Deployme...

P

Patrick M•3/1/24, 3:54 PM

Still can't figure it out. I tried a few different strategies to pin down the issue:

```
wrangler pages functions build ...
```
wrangler pages functions build ...
```
wrangler pages functions build ...
```
wrangler pages functions build ...
then run the compiled file via plain
```
wrangler dev
```
```
wrangler dev
```
in local and remote mode and
```
wrangler deploy
```
wrangler deploy
```
wrangler deploy
```
wrangler deploy
All worked fine. Also the compiled script was 700kb minified gzipped.
`Tried reverting all the packages to the last known good packages. this didn't work too. Then I tried deleting some old deployments (maybe I have too many preview deployments??) Somehow it worked. Then I switched back to the latest main branch and it didn't work again.
Any other ideas of things I should check?

PPatrick M Still can't figure it out. I tried a few different strategies to pin down the is...

P

Patrick M•3/1/24, 4:15 PM

I think was a file size issue! This is a Remix Vite app. I turned on

build.minify

build.minify

build.minify

build.minify in my vite config and it deployed. I guess I am closer to the 1mb limit than I thought.

Does
```
wrangler pages deploy
```
wrangler pages deploy
```
wrangler pages deploy
```
wrangler pages deploy
minify by default?
Feature request: Could
```
wrangler pages deploy
```
wrangler pages deploy
```
wrangler pages deploy
```
wrangler pages deploy
show the uploaded size of the worker bundle? (Right now it just shows
```
Uploading Functions bundle
```
Uploading Functions bundle
```
Uploading Functions bundle
```
Uploading Functions bundle
) (Edit I found an existing feature request)
I guess I will write myself a script to print my worker bundle script size and gzipped size to help keep better track of this in the future.

L

Lambo•3/1/24, 5:54 PM

Hey, I want to parse some HTML which I am scraping via a Pages Function. My initial thinking was

HTMLRewriter

HTMLRewriter

HTMLRewriter

HTMLRewriter would be the way to do this, but I'm not sure now I'm actually trying to implement it.

Essentially, if I was querying on the client I would have something like:

const items = Array.from(parsedData.querySelectorAll("#example-parent")).map(parent => {
  const thingOne = parent.querySelector("#example-thing-one").getAttribute("content")
  const thingTwo = parent.querySelector("#example-thing-two").getAttribute("content");

  return { thingOne, thingTwo }
});

const items = Array.from(parsedData.querySelectorAll("#example-parent")).map(parent => {
  const thingOne = parent.querySelector("#example-thing-one").getAttribute("content")
  const thingTwo = parent.querySelector("#example-thing-two").getAttribute("content");

  return { thingOne, thingTwo }
});

const items = Array.from(parsedData.querySelectorAll("#example-parent")).map(parent => {
  const thingOne = parent.querySelector("#example-thing-one").getAttribute("content")
  const thingTwo = parent.querySelector("#example-thing-two").getAttribute("content");

  return { thingOne, thingTwo }
});

const items = Array.from(parsedData.querySelectorAll("#example-parent")).map(parent => {
  const thingOne = parent.querySelector("#example-thing-one").getAttribute("content")
  const thingTwo = parent.querySelector("#example-thing-two").getAttribute("content");

  return { thingOne, thingTwo }
});

If I try implement something similar via

HTMLRewriter

HTMLRewriter

HTMLRewriter

HTMLRewriter I end up with:

class ExampleElementHandler implements HTMLRewriterElementContentHandlers{
    element(element: Element): void {
        element.??? // how do I access the children
    }
}

const parsedData = new HTMLRewriter()
  .on("#example-paret", new ExampleElementHandler())
  .transform(res);

class ExampleElementHandler implements HTMLRewriterElementContentHandlers{
    element(element: Element): void {
        element.??? // how do I access the children
    }
}

const parsedData = new HTMLRewriter()
  .on("#example-paret", new ExampleElementHandler())
  .transform(res);

class ExampleElementHandler implements HTMLRewriterElementContentHandlers{
    element(element: Element): void {
        element.??? // how do I access the children
    }
}

const parsedData = new HTMLRewriter()
  .on("#example-paret", new ExampleElementHandler())
  .transform(res);

class ExampleElementHandler implements HTMLRewriterElementContentHandlers{
    element(element: Element): void {
        element.??? // how do I access the children
    }
}

const parsedData = new HTMLRewriter()
  .on("#example-paret", new ExampleElementHandler())
  .transform(res);

However, because

Element

Element

doesn't (as far as I can tell) implement any methods to get the children elements, I'm not sure how I should progress.

Any pointers are greatly appreciated.

https://nextjs.org/docs/pages/building-your-application/routing/api-routes

Similar Threads

Similar Threads

Similar Threads