Ooker
Ooker7mo ago

How does form submission work?

I'm following the tutorial: https://fresh.deno.dev/docs/getting-started/form-submissions It says:
When the user submits the form, the browser will navigate to /search with the query set as the q query parameter in the URL. The GET handler will then filter the names array based on the query, and pass it to the page component for rendering.
Form submissions | Fresh docs
Robustly handle user inputs using HTML `` elements client side, and form submission handlers server side.
15 Replies
Ooker
Ooker7mo ago
Is the navigation to /search necessary? Is it correct that the handler can only work with the URL? Or is it a way to avoid having to use island? what is the GET(req, ctx) mean? It seems to be a function, but it isn't imported from anywhere. I search for it but there is no document for it as well
marvinh.
marvinh.7mo ago
The way forms work on the web is that submission triggers a navigation request. Can you share more about what you're trying to build? Handlers in Fresh are part of the routing mechanism. They are called before the component function is called. Typically they are used to pull data from a database or another API. They can be thought of as a middleware to the current route.
export const handler = {
async GET(req, ctx) {
const data = await loadData();
// This triggers HTML rendering
return ctx.render(data);
}
}

export default function MyPage(props) {
return <h1>{props.data.name}</h1>
}
export const handler = {
async GET(req, ctx) {
const data = await loadData();
// This triggers HTML rendering
return ctx.render(data);
}
}

export default function MyPage(props) {
return <h1>{props.data.name}</h1>
}
If no handler export is present, Fresh will add a default one that looks like this behind the scenes:
export const handler = {
GET: (req, ctx) => ctx.render()
}
export const handler = {
GET: (req, ctx) => ctx.render()
}
Since Fresh 1.4 we also support combining the two into a single construct:
export default defineRoute(async (req, ctx) => {
const data = await loadDataFromSomewhere();

return <h1>{data.name}</h1>
});
export default defineRoute(async (req, ctx) => {
const data = await loadDataFromSomewhere();

return <h1>{data.name}</h1>
});
Ooker
Ooker7mo ago
I just want to dissect the code in the tutorial so I get that handler can only work with URL? also, what is the nature of GET? Is it a function or something?
NDH
NDH7mo ago
GET is an HTTP Request Method type. In simple words, the GET method is used to retrieve whatever information is identified by the Request-URL.
Ooker
Ooker7mo ago
How to use it in JS? MDN doesn't explain anything https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET
MDN Web Docs
GET - HTTP | MDN
The HTTP GET method requests a representation of the specified resource. Requests using GET should only be used to request data (they shouldn't include data).
Ooker
Ooker7mo ago
Handlers in Fresh are part of the routing mechanism
So any handler will navigate to a location? Is this only a thing in Fresh or in any web framework?
marvinh.
marvinh.7mo ago
The handlers concept is specific to the Fresh framework and not something available in the web in general. A similar pattern can be found in other frameworks though. Basically, when a request comes in, folks typically want to respond differently to a GET, a POST or another request type. So instead of having to manually write if statements to check the HTTP verb, Fresh allows you to export an object with the object keys as a shorthand. No, handlers don't navigate you anywhere. When a request comes in they are called. That's it. What you do inside of them is up to you. Let's say you have a file routes/about.tsx. If you add a handler export inside that file it will be called before rendering. That's all there is to it I think you're mixing up HTML forms with Fresh handlers. An HTML form submission by default triggers a navigation request. That happens in the browser, not on the server in Fresh
Ooker
Ooker7mo ago
so the GET(req, ctx) is not a proper function nor a legit JS syntax but a shorthand syntax that only Deno can understand and translate to a proper function at compile time? In your example, the props object for the MyPage() component is different to the data object, which is the result of the handler. However, in the example of the form submission, the code is:
export const handler: Handlers<Data> = {
GET(req, ctx) {
const url = new URL(req.url);
const query = url.searchParams.get("q") || "";
const results = NAMES.filter((name) => query.includes(name));
return ctx.render({ results, query });
},
};

export default function Page({ data }: PageProps<Data>) {
const { results, query } = data;
export const handler: Handlers<Data> = {
GET(req, ctx) {
const url = new URL(req.url);
const query = url.searchParams.get("q") || "";
const results = NAMES.filter((name) => query.includes(name));
return ctx.render({ results, query });
},
};

export default function Page({ data }: PageProps<Data>) {
const { results, query } = data;
Where does the {data} for the component come from? Surely Fresh must construct it from the result of the handler behind the scene, right? But then, how does it make sure that it'll be correct?
If no handler export is present, Fresh will add a default one that looks like this behind the scenes:
export const handler = {
GET: (req, ctx) => ctx.render()
}
export const handler = {
GET: (req, ctx) => ctx.render()
}
If so, then isn't that the handler always triggers HTML rendering?
marvinh.
marvinh.7mo ago
This is standard JS syntax, nothing Deno specific. This code works as is in any JS engine.
const foo = {
bar() {}
}

// is the same as
const foo = {
bar: () => {}
}
const foo = {
bar() {}
}

// is the same as
const foo = {
bar: () => {}
}
Fresh takes whatever you pass into ctx.render(arg) and sets it on props.data. There is no code to ensure that it is correct or anything. It just passes it along. If nothing is passed to ctx.render() then props.data will be undefined yes
Ooker
Ooker7mo ago
If so, where can I search for these functions? It not even need to be imported, so it must be a native function. However MDN doesn't explain anything https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET
MDN Web Docs
GET - HTTP | MDN
The HTTP GET method requests a representation of the specified resource. Requests using GET should only be used to request data (they shouldn't include data).
marvinh.
marvinh.7mo ago
The functions are Fresh specific, but the syntax is standard JS. Under the hood Fresh basically does this:
const handler = {
GET(req, ctx) {}
}

Deno.serve((req) => {
const ctx = {}

// Call handler with HTTP verb if present
if (req.method in handler) {
handler[method](req, ctx)
}
})
const handler = {
GET(req, ctx) {}
}

Deno.serve((req) => {
const ctx = {}

// Call handler with HTTP verb if present
if (req.method in handler) {
handler[method](req, ctx)
}
})
It's a basic object key lookup nothing more
Ooker
Ooker7mo ago
Is there any docs about this?
Ooker
Ooker7mo ago
in that page, I see that req and ctx have prefix underscore. What does this mean?
marvinh.
marvinh.7mo ago
If the variable is unused, the linter will complain by default. The underscore in front of the variable name is a hint to the linter that this is intended so that it doesn't warn. This behavior is similar to rust
More Posts
Won't install `npm:@supabase/ssr`I'm trying to build something with Fresh and Supabase and would like to use the [`@supabase/ssr`](ht`RangeError: Offset is outside the bounds of the DataView` when trying to encrypt with AES-CRTHi, I'm trying to encrypt some files with aes128-crt, but I always get the error below. (Even if I jAny way for VS Code to auto-complete library subdirectory in import?Is there any way for VS Code to suggest subdirectory in a package (especially for npm package) when get hours & minutes in a specific timezoneMaybe I search the wrong way, but all I'd like to do is to use a specific timezone in my project runConnection refused when creating a local API serverI'm following [Simple API server | Deno Docs](https://docs.deno.com/deploy/tutorials/simple-api "Simdeno deploy queuesis there a special flag or setting required for queues in deno deploy , i ceated a very simple exampWhat is the difference between importing "preact" via esm.sh or npm:...?What is the difference between importing "preact" via esm.sh or npm:...? "preact": "https://esm.sh/pDeployctl, error: Uncaught (in promise) NotFound: Failed to spawn 'start': program not found```powershell > deployctl logs a i Provisioning a new access token... i Authorization URL: https://dis there a way to make the call stack in deno larger?I already think this is a no from what I have gathered but I thought Id askwhere would i go to report a minor bug in module search on deno.land ?hi, i noticed a minor bug in module search on deno.land. it's easily replicable. where would i rep