Forms and mutations in Deno - Step-by-Step Execution

Concept Flow - Forms and mutations

User opens form

↓

User inputs data

↓

User submits form

↓

Form data captured

↓

Mutation function called

↓

Server or state updated

↓

UI updates to reflect changes

↓

User sees updated data

This flow shows how a user fills a form, submits it, triggers a mutation to update data, and then sees the updated result.

Execution Sample

Deno

import { serve } from "https://deno.land/std/http/server.ts";

serve(async (req) => {
  if (req.method === "POST") {
    const formData = await req.formData();
    const name = formData.get("name");
    return new Response(`Hello, ${name}!`);
  }
  return new Response(`<form method="POST"><input name="name"/><button>Send</button></form>`, { headers: { "content-type": "text/html" } });
});

A simple Deno server that shows a form, accepts a POST submission, and responds with a greeting using the submitted name.

Execution Table

Step	Request Method	Action	Data Captured	Response Sent
1	GET	Serve form HTML	No data	<form> with input and button
2	POST	Receive form submission	name = 'Alice'	Response: 'Hello, Alice!'
3	GET	Serve form HTML again	No data	<form> with input and button
4	POST	Receive form submission	name = 'Bob'	Response: 'Hello, Bob!'

💡 Server keeps running; each POST triggers mutation and response; GET serves form.

Variable Tracker

Variable	Start	After Step 2	After Step 4
formData	undefined	{name: 'Alice'}	{name: 'Bob'}
name	undefined	Alice	Bob

Key Moments - 2 Insights

Why does the server respond differently after a POST request?

Because at POST (see execution_table step 2 and 4), the server reads the form data and uses it to create a personalized response, unlike GET which just serves the form.

What happens if the form input is empty when submitted?

The formData.get('name') will be empty or null, so the response will say 'Hello, null!' or 'Hello, !' depending on input, as shown by the data captured in execution_table.

Visual Quiz - 3 Questions

Look at the execution_table at step 2. What is the value of 'name' captured from the form?

A "Alice"

B "Bob"

C undefined

D null

💡 Hint

Check the 'Data Captured' column at step 2 in the execution_table.

At which step does the server send the greeting 'Hello, Bob!'?

A Step 3

B Step 2

C Step 4

D Step 1

💡 Hint

Look at the 'Response Sent' column in execution_table for the greeting with 'Bob'.

If the user submits the form with name 'Charlie', what will change in the variable_tracker?

A Only formData updates, name stays the same

B formData and name will update to 'Charlie' after the next POST

C formData and name remain 'Bob'

D No variables change

💡 Hint

Variable_tracker shows formData and name update after each POST submission.

Concept Snapshot

Forms and mutations in Deno:
- User fills form and submits (POST request)
- Server reads form data with req.formData()
- Mutation happens by using data to create response
- Server sends updated response
- Cycle repeats for each submission

Full Transcript

This example shows how a Deno server handles forms and mutations. When the user visits the page, the server sends an HTML form. When the user submits the form, the server receives a POST request, extracts the form data, and uses it to create a personalized response. The server then sends this response back to the user. This cycle repeats for each form submission, updating the server's response based on the input. Variables like formData and name change with each POST request, reflecting the new data submitted. This process demonstrates how forms and mutations work together to update server state and user interface dynamically.

Practice

1. What does the req.formData() method do in a Deno server context?

easy

A. It reads and returns the submitted form data from the request.

B. It sends form data back to the client.

C. It validates the form data automatically.

D. It clears the form data from the request.

Solution

1. Step 1: Understand the purpose of req.formData()

   This method is designed to extract form data sent by the client in a POST request.

2. Step 2: Identify what the method returns

   It returns a FormData object containing key-value pairs from the submitted form.

3. Final Answer:

   It reads and returns the submitted form data from the request. -> Option A

4. Quick Check:

   Form data reading = It reads and returns the submitted form data from the request. [OK]

Hint: Remember: formData() reads input, it doesn't send or clear it [OK]

Common Mistakes:

• Thinking formData() sends data to client
• Assuming formData() validates data automatically
• Believing formData() clears data from request

2. Which of the following is the correct way to asynchronously get form data from a request in Deno?

easy

A. const data = await req.formData();

B. const data = req.getFormData();

C. const data = req.formData();

D. const data = await req.getFormData();

Solution

1. Step 1: Recall the method signature for formData()

   In Deno, req.formData() returns a Promise, so it must be awaited.

2. Step 2: Identify the correct syntax

   The correct syntax uses await req.formData(); to get the form data asynchronously.

3. Final Answer:

   const data = await req.formData(); -> Option A

4. Quick Check:

   Async form data retrieval = const data = await req.formData(); [OK]

Hint: Always await formData() since it returns a Promise [OK]

Common Mistakes:

• Forgetting to use await with formData()
• Using a non-existent method getFormData()
• Calling formData() without async context

3. Given this Deno server code snippet handling a POST request:

const formData = await req.formData();
const name = formData.get('name');
return new Response(`Hello, ${name}!`);

What will be the response if the form submitted has name=Alice?

medium

A. Hello, !

B. Hello, undefined!

C. Hello, null!

D. Hello, Alice!

Solution

1. Step 1: Extract the 'name' value from formData

   The code uses formData.get('name') which returns the string 'Alice' from the submitted form.

2. Step 2: Construct the response string

   The response template string inserts 'Alice' correctly, resulting in 'Hello, Alice!'.

3. Final Answer:

   Hello, Alice! -> Option D

4. Quick Check:

   formData.get('name') = 'Alice' [OK]

Hint: formData.get('key') returns the submitted value or null if missing [OK]

Common Mistakes:

• Assuming get() returns undefined instead of null
• Not using await with formData() causing errors
• Misreading template string interpolation

4. Identify the error in this Deno code snippet handling form submission:

const formData = req.formData();
const email = formData.get('email');
return new Response(email);

medium

A. Response cannot return a string directly.

B. formData.get() is not a valid method on FormData.

C. Missing await before req.formData() causing a Promise error.

D. The variable email is not declared.

Solution

1. Step 1: Check how formData() is called

   The method req.formData() returns a Promise and must be awaited.

2. Step 2: Identify the error caused by missing await

   Without await, formData is a Promise, so calling get() on it causes a runtime error.

3. Final Answer:

   Missing await before req.formData() causing a Promise error. -> Option C

4. Quick Check:

   Always await formData() to get FormData object [OK]

Hint: Always await async calls like formData() before using results [OK]

Common Mistakes:

• Calling get() on a Promise instead of FormData
• Assuming formData() is synchronous
• Ignoring async/await syntax rules

5. You want to update a user's profile using a form in Deno. The form sends username and age. Which code correctly reads the form and updates a user object, ensuring age is stored as a number?

hard

A. const formData = await req.formData(); const user = { username: formData.get('username'), age: formData.get('age') };

B. const formData = await req.formData(); const user = { username: formData.get('username'), age: Number(formData.get('age')) };

C. const formData = req.formData(); const user = { username: formData.get('username'), age: parseInt(formData.get('age')) };

D. const formData = await req.formData(); const user = { username: formData.get('username'), age: parseFloat(formData.get('username')) };

Solution

1. Step 1: Await formData() to get the form data object

   Using await req.formData() correctly retrieves the form data asynchronously.

2. Step 2: Convert the 'age' string to a number properly

   Using Number(formData.get('age')) converts the age string to a number safely.

3. Step 3: Check the username assignment

   Assigning username: formData.get('username') correctly stores the username string.

4. Final Answer:

   const formData = await req.formData(); const user = { username: formData.get('username'), age: Number(formData.get('age')) }; -> Option B

5. Quick Check:

   Await + Number conversion = const formData = await req.formData(); const user = { username: formData.get('username'), age: Number(formData.get('age')) }; [OK]

Hint: Always await formData() and convert numeric strings with Number() [OK]

Common Mistakes:

• Not awaiting formData() causing errors
• Storing age as string without conversion
• Parsing wrong field for age