DatabasesWebCloud

Completely confused about appwrite types, zod validation and html forms

Nov 30, 2025, 19:00Last activity 9 months ago

View on Discord

Votes

Replies

Participants

Messages

OliOriginal post

Rank 1: Thread

Nov 30, 2025, 18:08

I used the appwrite cli to get types such as:

JavaScript

export type Events = Models.Row & {
  title: string;
  description: string | null;
  startDate: string;
  endDate: string;
  location: string;

I then derived the zod schema like this:

JavaScript

export const eventFormSchema = z.object({
  title: z.string().min(1, "Event Titel ist erforderlich"),
  description: z.string().nullish(),
  startDate: z.string().min(1, "Startdatum ist erforderlich"),
  endDate: z.string().min(1, "Enddatum ist erforderlich"),
  location: z.string().min(1, "Ort ist erforderlich")
});

so that I can do:

JavaScript

// ... some imports
type EventFormData = z.infer<typeof eventFormSchema>;

export function EventForm({ event, eventId, type = "create" }: EventFormProps) {
  const eventFn = useServerFn(
    type === "create" ? eventsService.createEvent : eventsService.updateEvent
  );
 // ... other code
  const form = useForm({
    defaultValues: {
      title: event?.title || "",
      description: event?.description || undefined,
      startDate: event?.startDate
        ? new Date(event.startDate).toISOString().split("T")[0]
        : "",
      endDate: event?.endDate
        ? new Date(event.endDate).toISOString().split("T")[0]
        : "",
      location: event?.location || "",
      status: event?.status || "draft",
      bookingLink: event?.bookingLink || undefined,
      imageUrl: event?.imageUrl || undefined,
    } as EventFormData
// ...other code
   return (
// ... form elements
     <form.Field
        name="description"
// ... some other code
              <Textarea
                id={field.name}
                name={field.name}
                value={field.state.value} // shows   Type 'null' is not assignable to type // 'string | number | readonly string[] | undefined'.ts(2322)
             
              />
 //... other code
)
}

I am really a bit lost how to properly set this up. This null value is killing me.

Summary

User is struggling with understanding and implementing appwrite types, zod validation, and HTML forms. They are facing issues with creating rows with relationships and inconsistencies in the documentation. The user provided solutions for updating zod schemas and form default values. There's a discussion about correcting types and creating rows successfully. They also sought advice on improving the process for managing relationships and types with appwrite. Further research and improvements on appwrite types are suggested.

Devika

Nov 30, 2025, 18:55

Try replacing value={field.state.value} with value={field.state.value ?? ""} first. See whether it works

Oli

Rank 1: Thread

Nov 30, 2025, 19:14

that works, thank you 🙂
However it doesn't feel clean.
As you @Devika seem to be very knowledable working with appwrite, how would you do this?

Devika

Nov 30, 2025, 19:20

No, I am not very knowledgeable 😅. I am still learning things. And yes, I can surely help you set up the flow. For that, can you please share the complete code for the types, zod schema & component in which you are using zod validation?

Devika

Nov 30, 2025, 19:21

Here I see most of your code includes //...some imports etc.

Oli

Rank 1: Thread

Nov 30, 2025, 19:51

Sure, here is the link to the appwrite types:
https://github.com/Olgoetz/troubelshooting/blob/main/types/appwrite.d.ts

Derived schemas:
https://github.com/Olgoetz/troubelshooting/blob/main/src/types/forms.ts

EventForm:
https://github.com/Olgoetz/troubelshooting/blob/main/src/components/forms/EventForm.tsx

Devika

Dec 1, 2025, 05:26

Firstly, fix your eventFormSchema like this: ```
export const eventFormSchema = z.object({
title: z.string().min(1, "Event Titel ist erforderlich"),
description: z.string().nullable(),
startDate: z.string().min(1, "Startdatum ist erforderlich"),
endDate: z.string().min(1, "Enddatum ist erforderlich"),
location: z.string().min(1, "Ort ist erforderlich"),
status: z.nativeEnum(EventsStatus),
bookingLink: z.string().url("Ungültige URL").nullable(),
imageUrl: z.string().url("Ungültige URL").nullable(),
});

Devika

Dec 1, 2025, 05:27

It's not nullish

Devika

Dec 1, 2025, 05:29

Change the defaultValues in EventForm.tsx like this: ```defaultValues: {
title: event?.title ?? "",
description: event?.description ?? null,
startDate: event?.startDate
? new Date(event.startDate).toISOString().split("T")[0]
: "",
endDate: event?.endDate
? new Date(event.endDate).toISOString().split("T")[0]
: "",
location: event?.location ?? "",
status: event?.status ?? "draft",
bookingLink: event?.bookingLink ?? null,
imageUrl: event?.imageUrl ?? null,
} as EventFormData,

Devika

Dec 1, 2025, 05:37

And replace the code inside the <form> tag like this:

Devika

Dec 1, 2025, 05:47

Check if it works and let me know the results

Oli

Rank 1: Thread

Dec 1, 2025, 18:33

Sorry for coming back late... had bigger incident today at work that prevents production deployments ^^
That indeed works, thank you 🙂

However, I discovered a new issue respectively inconsistencies in the docs:
Creating rows us described here https://appwrite.io/docs/products/databases/relationships#create-rows does not work

JavaScript

const createEvent = createServerFn({ method: "POST" })
  .middleware([authAdminMiddleware])
  .inputValidator(eventFormSchema)
  .handler(async ({ data, context }) => {
    devLog("SERVER", "eventsService.ts", `Creating event ${data.title}...`);
    const { session, user } = context;
    const { tablesDB } = createSessionClient(session);

    // Convert nullish fields to null for Appwrite
    data.description = data.description ?? null;
    data.bookingLink = data.bookingLink ?? null;
    data.imageUrl = data.imageUrl ?? null;
    try {
      const event = await tablesDB.createRow<Events>({
        databaseId: serverConfig.appWrite.database.id,
        tableId: serverConfig.appWrite.database.eventsTableId,
        data: {
          ...data,
          status: data.status as EventsStatus,
          userId: user.userId, // Type 'string' is not assignable to type 'Users'. Type 'string' is not assignable to type 'Row'.
// appwrite.d.ts(21, 3): The expected type comes from property 'userId' which is declared here on type 'Partial<Row> & Omit<Events, keyof Row>'
        },
      });
    } catch (error) {
      prodError("SERVER", "eventsService.ts", "Error creating event", error);
    }
  });

as the type through the appwrite cli is

JavaScript

export type Users = Models.Row & {
  authId: string;
  events: Events[];
};

I really miss some real world examples on the appwrite docs.

Chirag Aggarwal

Dec 2, 2025, 00:44

cc @Aditya Oberai

Devika

Dec 2, 2025, 04:34

Hey! I think this is happening because you've defined userId as type Row i.e. Users (as I can see here in your code: https://github.com/Olgoetz/troubelshooting/blob/main/types/appwrite.d.ts ) and then you're trying to assign a string value to it, which is why you're getting this error

Oli

Rank 1: Thread

Dec 2, 2025, 07:50

Exactly. And this happening as I have setup a one to many relationship between the users and events table.
So the docs are not clear how to create a row with relationship

Devika

Dec 2, 2025, 08:21

Don't worry, since they've noticed your post, they'll update it

Oli

Rank 1: Thread

Dec 2, 2025, 16:20

Cool 🙂

Creating of a new works though with

JavaScript


const createEvent = createServerFn({ method: "POST" })
  .middleware([authAdminMiddleware])
  .inputValidator(eventFormSchema)
  .handler(async ({ data, context }) => {
    devLog("SERVER", "eventsService.ts", `Creating event ${data.title}...`);
    const { session, user } = context;
    const { tablesDB } = createSessionClient(session);

    try {
      const event = await tablesDB.createRow<Events>({
        databaseId: serverConfig.appWrite.database.id,
        tableId: serverConfig.appWrite.database.eventsTableId,
        rowId: ID.unique(),
        data: {
          ...data,
          status: data.status as EventsStatus,
          userId: user.$id,
        },
      });
    } catch (error) {
      prodError("SERVER", "eventsService.ts", "Error creating event", error);
    }
  });

Aditya Oberai

Dec 2, 2025, 17:38

@Oli Once the child table is set, you need to add the data object of the new row to be created in the set field

Taking the example shared in the docs:

const { Client, ID, TablesDB } = require('node-appwrite');

const client = new Client()
    .setEndpoint('https://<REGION>.cloud.appwrite.io/v1') // Your API Endpoint
    .setProject('<PROJECT_ID>');               // Your project ID

const tablesDB = new TablesDB(client);

await tablesDB.createRow({
    databaseId: 'marvel',
    tableId: 'movies',
    rowId: ID.unique(),
    data: {
        title: 'Spiderman',
        year: 2002,
        reviews: [
            { author: 'Bob', text: 'Great movie!' },
            { author: 'Alice', text: 'Loved it!' }
        ]
    }
});

In the set field for the child table reviews, we directly add the data that needs to be added

In your case, this merely seems to be a mismatch in the type since the user.userId would be a string and not the row object

Oli

Rank 1: Thread

Dec 2, 2025, 18:45

@Aditya Oberai Thanks for coming back.
Ok, then the appwrite types command generates the wrong type for this relationship.

However, I can successfully create a row the related column in users table is also correctly updated.

Interesting behavior which I don’t understand xD

Aditya Oberai

Dec 2, 2025, 18:49

I don't think that model is incorrect since it expects userId: user instead of userId: user.userId (which would be correct as per the docs too), but it's interesting that user: user.$id worked for you 👀

Oli

Rank 1: Thread

Dec 3, 2025, 19:31

So spend hours to get this right with types, but still no success.
This is an excerpt of my appwrite config (shortened!):

JSON

       {
            "$id": "users",
            "columns": [
                {
                    "key": "events",
                    "type": "relationship",
                    "required": false,
                    "array": false,
                    "relatedTable": "events",
                    "relationType": "oneToMany",
                    "twoWay": true,
                    "twoWayKey": "userId",
                    "onDelete": "cascade",
                    "side": "parent"
                }
            ],
            "indexes": []
        },
    {
            "$id": "events",
            "columns": [
                {
                    "key": "userId",
                    "type": "relationship",
                    "required": false,
                    "array": false,
                    "relatedTable": "users",
                    "relationType": "oneToMany",
                    "twoWay": true,
                    "twoWayKey": "events",
                    "onDelete": "cascade",
                    "side": "child"
                }
            ],
            "indexes": []
        }

this generates those types:

JavaScript

export type Events = Models.Row & {
  title: string;
  description: string | null;
  startDate: string;
  endDate: string;
  location: string;
  status: EventsStatus;
  bookingLink: string | null;
  imageUrl: string | null;
  userId: Users;
};
export type Users = Models.Row & {
  events: Events[];
};

creating a new row in events works:

JavaScript

   await tablesDB.createRow<Events>({
        databaseId: serverConfig.appWrite.database.id,
        tableId: serverConfig.appWrite.database.eventsTableId,
        rowId: ID.unique(),
        data: {
          ...data,
          status: data.status as EventsStatus,
          userId: user.$id, // typescript error here
        },
      });

Oli

Rank 1: Thread

Dec 4, 2025, 15:25

when changing the type to

JavaScript

export type Events = Models.Row & {
  title: string;
  description: string | null;
  startDate: string;
  endDate: string;
  location: string;
  status: EventsStatus;
  bookingLink: string | null;
  imageUrl: string | null;
  userId: string;   // <-- manual adjustment
};
export type Users = Models.Row & {
  events: Events[];
};

the typescript error is gone and creating rows works.

However, this is pretty inconsistent with the database schema

Oli

Rank 1: Thread

Dec 4, 2025, 21:19

Any ideas how to fix this?

Chirag Aggarwal

Dec 5, 2025, 00:23

there is an inconsistency with type generation where it doesnt take in account that while creating rows that have a relationship that you can pass in the related collection’s id instead of the entire model

so in ur case if the manual adjustment to string works well i would say go with it

i am still open to ideas on how you would like to see this being tacked by the cli itself. probably the best route is just allowing both model and string? seems a bit hacky to me as its not true to the schema and just to the method

Oli

Rank 1: Thread

Dec 5, 2025, 11:39

The hacky way works, but it is not clean.

I run appwrite types in my CI/CD pipeline to make sure that the types always much up with my database definition. This part of the pipeline breaks and it is difficult to ship something to production with a broken pipeline.

What is the appwrite way to model (in both one-way and two-way relationship)

A user can have many events
Events can belong to exactly one user

where users and events are tables
in order to fully leverage typescript features (types derived from appwrite cli) and creating as well as updating rows?

This https://appwrite.io/docs/products/databases/relationships#create-rows shows the idea, but it would be enormously helpful to have a real world example with next.js or tanstack start.
I searched a lot for videos on youtube, but did not find an example implementation (all of them use other solutions, but I like and want to stick with appwrite 😃 ).

Completely confused about appwrite types, zod validation and html forms

Need support?_