Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

On-demand Rendering Adapters @ Cookies examples are not working - Correct implementation provided #8612

Open
Kodalem opened this issue Jun 20, 2024 · 1 comment
Open

On-demand Rendering Adapters @ Cookies examples are not working - Correct implementation provided #8612

Kodalem opened this issue Jun 20, 2024 · 1 comment
Labels
improve documentation Enhance existing documentation (e.g. add an example, improve description)

Comments

@Kodalem
Copy link

Kodalem commented Jun 20, 2024

📚 Subject area/topic

On-demand Rendering Adapters @ Cookies

📋 Page(s) affected (or suggested, for new content)

https://docs.astro.build/en/guides/server-side-rendering/#cookies
https://docs.astro.build/en/reference/api-reference/#set

📋 Description of content that is out-of-date or incorrect

Given example does not work anymore and is likely due to being outdated, because the Astro.cookies.set("counter",counter) accepts types key: string, value: string | Record<string, any>, options?: AstroCookieSetOptions instead of (key: string, value: string | number | boolean | object, options?: CookieSetOptions) => void. Example works only for npm run dev, but fails with npm run build with TypeScript error 2345.

Also to note, there's also TypeScript error 2532, as the cookie value in const cookie = Astro.cookies.get("counter") might be undefined and fixed with !. parameter like so const cookie = Astro.cookies!.get("counter").

Broken example:

---
let counter = 0

if (Astro.cookies.has("counter")) {
  const cookie = Astro.cookies.get("counter")
  counter = cookie.number() + 1
}

Astro.cookies.set("counter",counter)
---
<html>
  <h1>Counter = {counter}</h1>
</html>

Working basic example using Record type, compiles without error nor warnings.

---
// Create the Record Type
interface CookieData {
   exampleString: string;
   counter: number;
}
// Create the Example Data
let CookieDataExample: CookieData = {
   exampleString: "example",
   counter: 0,
}
let counterFromCookie = -1

if (Astro.cookies.has("counter")) {
	console.log("cookie exists")
    const cookie = Astro.cookies.get("counter")
	// Parse as JSON data and get the counter value
	console.log(cookie!.json())
	counterFromCookie = cookie!.json().counter
	CookieDataExample.counter = counterFromCookie + 1
}
Astro.cookies.set("counter", CookieDataExample)
---
<html>
  <h1>Counter = {CookieDataExample.counter}</h1>
</html>

🖥️ Reproduction in StackBlitz (if reporting incorrect content or code samples)

No response
@Kodalem Kodalem added the improve documentation Enhance existing documentation (e.g. add an example, improve description) label Jun 20, 2024
@Kodalem
Copy link
Author

Kodalem commented Jun 20, 2024 •
edited
Loading

Also apologies if not using reproduction in StackBlitz, as I am new to web development for hobby purposes!

Line let counterFromCookie = -1 is used as an definer, but -1 value for debugging and educational line to note that the implementation uses the cookies' value instead of the local variable.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
improve documentation Enhance existing documentation (e.g. add an example, improve description)
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Kodalem