Updating bodySerializer Documentation to handle nested objects correctly

[lemonadern]

The current bodySerializer documentation provides the following code example:

const { data, error } = await client.PUT("/submit", {
  body: {
    name: "",
    query: { version: 2 },
  },
  bodySerializer(body) {
    const fd = new FormData();
    for (const name in body) {
      fd.append(name, body[name]);
    }
    return fd;
  },
});

However, this code fails to serialize nested objects (in this case, {version: 2}) as FormData. Consequently, when executed, the data received by the API server appears as follows:

{ name: "", query: "[object Object]" }

To address this, I propose several suggestions for revising the documentation:

Suggestions

1. remove nested object:

const { data, error } = await client.PUT("/submit", {
  body: {
    name: "",
    query: "typescript", // Changed here
  },
  bodySerializer(body) {
    const fd = new FormData();
    for (const name in body) {
      fd.append(name, body[name]);
    }
    return fd;
  },
});

Resulting API server data:

{ name: "", query: "typescript" }

2. serialize nested object using JSON.stringify:

const { data, error } = await client.POST("/submit", {
  body: {
    name: "",
    query: { version: 2 },
  },
  bodySerializer(body) {
    const fd = new FormData();
    for (const name in body) {
      const value = body[name as keyof typeof body];
      if (typeof value === "object") {
        fd.append(name, JSON.stringify(value)); // stringify object
      } else {
        fd.append(name, value);
      }
    }
    return fd;
  },
});

Resulting API server data:

{ name: "", query: '{"version":2}' }

3. Flatten nested objects using dot notation concatenation:

const { data, error } = await client.POST("/submit", {
  body: {
    name: "",
    query: { version: 2 },
  },

  bodySerializer: (body) => {
    const fd = new FormData();

    const appendFormData = (fd: FormData, data: unknown, parentKey = "") => {
      if (data !== null && typeof data === "object") {
        for (const key in data) {
          appendFormData(
            fd,
            data[key as keyof typeof data],
            parentKey ? `${parentKey}.${key}` : key,
          );
        }
      } else {
        fd.append(parentKey, data);
      }
    };

    appendFormData(fd, body);

    return fd;
  },
});

Resulting API server data:

{ name: "", "query.version": "2" }

4. A generalized version of No.2 (JSON.stringify):

const { data, error } = await client.POST("/upload", {
  body: {
    name: "",
    query: { version: 2 },
  },
  bodySerializer: (body) => {
    const fd = new FormData();
    for (const name in body) {
      const value = body[name as keyof typeof body];
      if (
        typeof value === "object" && value !== null &&
        !(value instanceof File) && !(value instanceof Blob)
      ) {
        fd.append(name, JSON.stringify(value));
      } else {
        fd.append(name, value);
      }
    }
    return fd;
  },
});

Resulting API server data:

{ name: "", query: '{"version":2}' } 

5. A generalized version of No.3 (dot notaion):

const { data, error } = await client.POST("/submit", {
  body: {
    name: "",
    query: {
      version: 2,
    },
  },

  bodySerializer: (body) => {
    const fd = new FormData();

    const appendFormData = (fd: FormData, data: unknown, parentKey = "") => {
      if (
        data && typeof data === "object" && !Array.isArray(data) &&
        !(data instanceof File) && !(data instanceof Blob)
      ) {
        for (const key in data) {
          appendFormData(
            fd,
            data[key as keyof typeof data],
            parentKey ? `${parentKey}.${key}` : key,
          );
        }
      } else if (Array.isArray(data)) {
        for (const e of data) {
          appendFormData(fd, e, parentKey);
        }
      } else {
        fd.append(parentKey, data as string | Blob | File);
      }
    };

    appendFormData(fd, body);

    return fd;
  },
});

Resulting API server data:

{ name: "", "query.version": "2" }

---

What do you think of these suggestions?