Allow adding a default response body encoding when extending ky

[abubakriz]

Example:

const api = ky.extend({
responseBodyEncoding: "json"
})

Now any time a request is made with ky, it will be as if you called .json() after it

api.get("example.com").json() -> api.get("example.com")

[sholladay]

I agree this would be a nice feature. We would call it responseType for consistency with got.

Any thoughts on the implementation or TS types?

[abubakriz]

Sure! I tried spinning up a concept real quick, tell me what you think:

type ResponseType<T = unknown> = {
  json: T;
  text: string;
  arrayBuffer: ArrayBuffer;
  blob: Blob;
};

const responseType: keyof ResponseType = "json";

export const decodeBody = <T>(response: Response) => {
  type Handlers = {
    [K in keyof ResponseType<T>]: () => Promise<ResponseType<T>[K]>;
  };

  const handlers: Handlers = {
    json: response.json,
    text: response.text,
    arrayBuffer: response.arrayBuffer,
    blob: response.blob,
  };

  const handler = handlers[responseType];
  return handler();
};

const body = decodeBody<{ status: string }>(await fetch("example.com"));

[sholladay]

Nice! Looks good to me. Next step is integrating it with the internals.

We can put that in utils/body.ts and then I think we would want to call it somewhere around here, probably between where function_ gets called and the loop immediately after it which adds the body method shortcuts to result. Reason being that it wouldn't make sense to add the body method shortcuts if responseType is being used, so maybe we do an early return there. What do you think?

[abubakriz]

Sounds good!
I started working on it, but ran into a problem when trying to make the decodeBody function take the responseType as a parameter, the types no longer work and I couldn't figure out why. Any ideas?

export const decodeBody = async <T>(
	response: Response,
	responseType: keyof ResponseType<T> = "json",
) => {
	type Handlers<T> = {
		[K in keyof ResponseType<T>]: () => Promise<ResponseType<T>[K]>;
	};

	const handlers: Handlers<T> = {
		json: response.json,
		text: response.text,
		arrayBuffer: response.arrayBuffer,
		blob: response.blob,
		formData: response.formData,
	};

	const handler = handlers[responseType];
	return handler();
};

[abubakriz]

I found a solution that seems to work.

type ResponseType<T = unknown> = {
  json: () => Promise<T>;
  text: () => Promise<string>;
  arrayBuffer: () => Promise<ArrayBuffer>;
  formData: () => Promise<FormData>;
  blob: () => Promise<Blob>;
};

export const decodeBody = <T, K extends keyof ResponseType<T> = "json">(
  response: Response,
  responseType: K
) => {
  const handlers: ResponseType<T> = {
    json: response.json,
    text: response.text,
    arrayBuffer: response.arrayBuffer,
    formData: response.formData,
    blob: response.blob,
  };

  const handler = handlers[responseType];
  return handler() as ReturnType<ResponseType<T>[K]>;
};

[sholladay]

I think TypeScript is getting confused because the handler is not bound to the response when you call handler(). In fact, that call will fail when you run it because internally the handlers rely on this being the response.

You can see what I mean if you run this:

const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
const { json } = response;
const data = await json();
console.log(data);

You might be able to fix the problem by doing this:

const handlers: ResponseType<T> = {
    json: response.json.bind(response),
    text: response.text.bind(response),
    arrayBuffer: response.arrayBuffer.bind(response),
    formData: response.formData.bind(response),
    blob: response.blob.bind(response),
};

But is that handlers object even necessary? Couldn't we just return response[responseType]() at the end?