Fixes from going through the tutorial

scotttrinh · scotttrinh · commit c1cb9849dd43 · 2025-02-07T12:16:59.000-05:00
diff --git a/docs/intro/quickstart/access.rst b/docs/intro/quickstart/access.rst
@@ -61,6 +61,48 @@ Adding Access Control
         }
       }
 
+.. edb:split-section::
+
+  We will create this migration which will also trigger the query builder to be regenerated.
+
+  .. code-block:: sh
+
+    $ npx gel migration create
+    did you create global 'default::access_token'? [y,n,l,c,b,s,q,?]
+    > y
+    did you create object type 'default::User'? [y,n,l,c,b,s,q,?]
+    > y
+    did you create object type 'default::AccessToken'? [y,n,l,c,b,s,q,?]
+    > y
+    did you create global 'default::current_user'? [y,n,l,c,b,s,q,?]
+    > y
+    did you alter object type 'default::Deck'? [y,n,l,c,b,s,q,?]
+    > y
+    did you create access policy 'deck_creator_has_full_access' of object type 'default::Card'? [y,n,l,c,b,s,q,?]
+    > y
+    Created /home/strinh/projects/flashcards/dbschema/migrations/00003-m1solvt.edgeql, id: m1solvta35uzsbs4axzqmkwfx7zatjtkozpr43cjs56fp75qzbrg5q
+
+    $ npx gel migrate
+    Applying m1solvta35uzsbs4axzqmkwfx7zatjtkozpr43cjs56fp75qzbrg5q (00003-m1solvt.edgeql)
+    ... parsed
+    ... applied
+    Generating query builder...
+    Detected tsconfig.json, generating TypeScript files.
+    To override this, use the --target flag.
+    Run `npx @gel/generate --help` for full options.
+    Introspecting database schema...
+    Generating runtime spec...
+    Generating cast maps...
+    Generating scalars...
+    Generating object types...
+    Generating function types...
+    Generating operators...
+    Generating set impl...
+    Generating globals...
+    Generating index...
+    Writing files to ./dbschema/edgeql-js
+    Generation complete! 🤘
+
 .. edb:split-section::
 
   Let's create a page for creating a new user and getting an access token. Let's start by creating the query to create a new user which will return the ``AccessToken.id`` which we will use as the access token itself. We will save this access token in a cookie so that we can authenticate requests in other server actions and route handlers.
@@ -151,7 +193,6 @@ Adding Access Control
           );
         }
 
-
 .. edb:split-section::
 
   We should see this page when we navigate to the signup page.
@@ -186,23 +227,74 @@ Limiting access
 
 .. edb:split-section::
 
-  Along with allowing us to take advantage of our access policies in our queries, this will also allow us to redirect unauthenticated users to the signup page from any of our pages which should require authentication. Let's update our ``page.tsx`` file to redirect to the signup page if the user is not authenticated.
+  Along with allowing us to take advantage of our access policies in our queries, this will also allow us to redirect unauthenticated users to the signup page from any of our pages which should require authentication. Let's update our ``page.tsx`` file to redirect to the signup page if the user is not authenticated. We will also show the list of decks on this page.
 
-  .. code-block:: typescript-diff
-    :caption: app/page.tsx
+  .. tabs::
 
-      import { ImportForm } from "./form";
-    + import { getAuthenticatedClient } from "@/lib/gel";
-    + import { redirect } from "next/navigation";
+    .. code-tab:: typescript-diff
+      :caption: app/actions.ts
 
-      export default async function Page() {
-    +   const client = await getAuthenticatedClient();
-    +   if (!client) {
-    +     redirect("/signup");
-    +   }
-    +
-        return <ImportForm />;
-      }
+        "use server";
+      - import { client } from "@/lib/gel";
+      + import { getAuthenticatedClient } from "@/lib/gel";
+        import { createDeck } from "./create-deck.query";
+      + import e from "@/dbschema/edgeql-js";
+
+        export async function importDeck(formData: FormData) {
+          const deck = formData.get("deck");
+          if (typeof deck !== "string") {
+            return;
+          }
+      +
+      +   const client = await getAuthenticatedClient();
+      +   if (!client) {
+      +     return;
+      +   }
+
+          await createDeck(client, JSON.parse(deck));
+        }
+      +
+      + export async function getDecks() {
+      +   const client = await getAuthenticatedClient();
+      +   if (!client) {
+      +     return [];
+      +   }
+      +
+      +   return e.select(e.Deck, (d) => ({
+      +     id: true,
+      +     name: true,
+      +   })).run(client);
+      + }
+
+    .. code-tab:: typescript-diff
+      :caption: app/page.tsx
+
+        import { ImportForm } from "./form";
+      + import { getAuthenticatedClient } from "@/lib/gel";
+      + import { redirect } from "next/navigation";
+      + import { getDecks } from "./actions";
+
+        export default async function Page() {
+      +   const client = await getAuthenticatedClient();
+      +   if (!client) {
+      +     redirect("/signup");
+      +   }
+      +
+      +   const decks = await getDecks(client);
+      +
+      -   return <ImportForm />;
+      +   return (
+      +     <div>
+      +       <h1>Decks</h1>
+      +       <ul>
+      +         {decks.map((deck) => (
+      +           <li key={deck.id}>{deck.name}</li>
+      +         ))}
+      +       </ul>
+      +       <ImportForm />
+      +     </div>
+      +   );
+        }
 
 .. edb:split-section::
 
@@ -274,14 +366,15 @@ Limiting access
   .. code-block:: typescript-diff
     :caption: app/deck/[id]/page.tsx
 
-      import { redirect } from "next/navigation";
+      import { notFound } from "next/navigation";
     - import { client } from "@/lib/gel";
     + import { getAuthenticatedClient } from "@/lib/gel";
       import e from "@/dbschema/edgeql-js";
+      import { Fragment } from "react";
 
-      const getDeckQuery = e.params({ deckId: e.uuid }, (params) =>
+      const getDeckQuery = e.params({ id: e.uuid }, (params) =>
         e.select(e.Deck, (d) => ({
-          filter_single: e.op(d.id, "=", params.deckId),
+          filter_single: e.op(d.id, "=", params.id),
           id: true,
           name: true,
           description: true,
@@ -301,30 +394,30 @@ Limiting access
       export default async function DeckPage(
         { params }: { params: Promise<{ id: string }> }
       ) {
-        const { id: deckId } = await params;
+        const { id } = await params;
     +   const client = await getAuthenticatedClient();
     +   if (!client) {
-    +     redirect("/signup");
+    +     notFound();
     +   }
-
-        const deck = await getDeckQuery.run(client, { deckId });
+    +
+        const deck = await getDeckQuery.run(client, { id });
 
         if (!deck) {
-          redirect("/");
+          notFound();
         }
 
         return (
           <div>
             <h1>{deck.name}</h1>
             <p>{deck.description}</p>
-            <ul>
+            <dl>
               {deck.cards.map((card) => (
-                <dl key={card.id}>
+                <Fragment key={card.id}>
                   <dt>{card.front}</dt>
                   <dd>{card.back}</dd>
-                </dl>
+                </Fragment>
               ))}
-            </ul>
+            </dl>
           </div>
         )
       }
diff --git a/docs/intro/quickstart/dynamic.rst b/docs/intro/quickstart/dynamic.rst
@@ -26,11 +26,17 @@ The second approach using dynamic queries tends to be more performant and mainta
 
         import { revalidatePath } from "next/cache";
         import e from "@/dbschema/edgeql-js";
+        import { getAuthenticatedClient } from "@/lib/gel";
 
         export async function updateDeck(data: FormData) {
           const id = data.get("id");
           if (!id) {
-            return;
+            throw new Error("Missing deck ID");
+          }
+
+          const client = await getAuthenticatedClient();
+          if (!client) {
+            throw new Error("Unauthorized");
           }
 
           const name = data.get("name");
@@ -44,7 +50,7 @@ The second approach using dynamic queries tends to be more performant and mainta
 
           await e
             .update(e.Deck, (d) => ({
-              filter_single: e.op(d.id, "=", id),
+              filter_single: e.op(d.id, "=", e.uuid(id)),
               set: {
                 ...nameSet,
                 ...descriptionSet,
@@ -109,11 +115,11 @@ The second approach using dynamic queries tends to be more performant and mainta
       +         />
       +         <input
       +           name="name"
-      +           initialValue={deck.name}
+      +           defaultValue={deck.name}
       +         />
       +         <textarea
       +           name="description"
-      +           initialValue={deck.description}
+      +           defaultValue={deck.description}
       +         />
       +         <button type="submit">Update</button>
       +       </form>
diff --git a/docs/intro/quickstart/inheritance.rst b/docs/intro/quickstart/inheritance.rst
@@ -27,20 +27,20 @@ Adding Shared Properties
     +   }
     +
     -   type User {
-    +   type User extends Timestamped {
+    +   type User extending Timestamped {
           required name: str;
         }
 
     -   type AccessToken {
-    +   type AccessToken extends Timestamped {
+    +   type AccessToken extending Timestamped {
           required user: User;
           required token: str {
             constraint exclusive;
           };
         }
 
     -   type Deck {
-    +   type Deck extends Timestamped {
+    +   type Deck extending Timestamped {
           required name: str;
           description: str;
 
@@ -56,7 +56,7 @@ Adding Shared Properties
         };
 
     -   type Card {
-    +   type Card extends Timestamped {
+    +   type Card extending Timestamped {
           required order: int64;
           required front: str;
           required back: str;
@@ -73,19 +73,30 @@ Adding Shared Properties
 
 .. edb:split-section::
 
-  When we create a migration, we need to set initial values for the ``created_at`` and ``updated_at`` properties on all existing objects. Since we don't have historical data for when these objects were actually created or modified, we'll set both timestamps to the current time when the migration runs by using ``datetime_of_statement()``.
+  When we create a migration, we need to set initial values for the ``created_at`` and ``updated_at`` properties on all existing objects. Since we don't have historical data for when these objects were actually created or modified, the migration will fall back to the default values we set in the ``Timestamped`` type.
 
   .. code-block:: sh
 
     $ npx gel migration create
-    fill_expr> datetime_of_statement()
+    did you create object type 'default::Timestamped'? [y,n,l,c,b,s,q,?]
+    > y
+    did you alter object type 'default::AccessToken'? [y,n,l,c,b,s,q,?]
+    > y
+    did you alter object type 'default::User'? [y,n,l,c,b,s,q,?]
+    > y
+    did you alter object type 'default::Card'? [y,n,l,c,b,s,q,?]
+    > y
+    did you alter object type 'default::Deck'? [y,n,l,c,b,s,q,?]
+    > y
+    Created /home/strinh/projects/flashcards/dbschema/migrations/00004-m1d2m5n.edgeql, id: m1d2m5n5ajkalyijrxdliioyginonqbtfzihvwdfdmfwodunszstya
 
     $ npx gel migrate
+    Applying m1d2m5n5ajkalyijrxdliioyginonqbtfzihvwdfdmfwodunszstya (00004-m1d2m5n.edgeql)
+    ... parsed
+    ... applied
 
 .. edb:split-section::
 
   Now when we look at the data in the UI, we will see the new properties on each of our object types.
 
-  .. code-block:: sh
-
-    $ echo
+  .. image:: https://placehold.co/600x400?text=Show+timestamped+properties
diff --git a/docs/intro/quickstart/working.rst b/docs/intro/quickstart/working.rst
