Extracting Success Type from Union Type in TypeScript for useState

[yuuri111]

Hello,

I have a question regarding the example.client.ts generated by generate-client.ts found here:

https://github.com/RobinTail/express-zod-api/blob/master/example/generate-client.ts

Let's say we define the output as follows:

output: z.object({
  id: z.string(),
  nickname: z.string().optional()
}),

This would generate an example.client.ts like:

type GetCustomerResponse = {
  status: "success";
  data: {
    id: string;
    nickname?: string | undefined;
  }
} | {
  status: "error";
  error: {
    message: string;
  };
};

When using the generated example.client.ts to call the API and setting the value using useState, is there a way to extract only the type for success?

Is this the only way to do it?

type SuccessResponse = Extract<
  GetCustomerResponse,
  { status: "success" }
>;
const [customers, setCustomers] = useState<SuccessResponse["data"] | null>(
  null
);

Thank you.

[RobinTail]

Hello @yuuri111 ,

The thing you asked for: splitResponse option in the Integration::constructor() argument (added in v16.0.0).

The thing you didn't ask for:

const client = new ExpressZodAPIClient(async (method, path, params) => {
  // ... shortened
  return response.json();
});

export const getSomething = async () => {
  const response = await client.provide("get", "/v1/something", {});
  if (response.status === "error") {
    throw new Error(response.error.message);
  }
  return response.data.thatThing;
};

In this case, getSomething() only returns the positive response and there is no need to Extract it.
So that in your React App you can do

useState<ReturnType<typeof getSomething> | null>(null)

I hope that helps.

[yuuri111]

This works great! Thank you.