Example of usage of Response interface

[egithinji]

Hi I'm new to express-zod and was wanting to make use of the Response interface in the front end, when fetching data. Does anyone have a snippet they can share of example usage? I'm talking about this interface in the api-client.ts file:

export interface Response extends Record<MethodPath, any> {
  "get /v1/user/retrieve": GetV1UserRetrieveResponse;
  "post /v1/user/:id": PostV1UserIdResponse;
  "get /v1/avatar/send": GetV1AvatarSendResponse;
  "get /v1/avatar/stream": GetV1AvatarStreamResponse;
  "post /v1/avatar/upload": PostV1AvatarUploadResponse;
}

When I make a fetch, I want to set the type of the variable holding the result to one of the types above. I'm kinda new to TypeScript so it's not very clear to me how I would go around doing this. Thanks

[egithinji]

I've figured it out thanks.

[RobinTail]

Hello @egithinji .

There is a client class in that file, that you need to instantiate with your implementation of the actual fetching.
https://github.com/RobinTail/express-zod-api/blob/master/example/example.client.ts#L146

The example implementation using standard fetch method is in the same file, commented out above the client.
You can use it or make your own, using Axios library or anything at your choice.

The client just performs the fetching operation using your implementation and assigns a type to the response according to the Response types dictionary you mentioned.

It's the same as using as keyword in Typescript, but being a generic solution.

In case you found out something I forget to mention or can describe it better, feel free to share your knowledge with others.

[RobinTail]

Here is an example instantiation with the implementation:
https://github.com/RobinTail/incaseofmydeath/blob/master/frontend/src/api.ts#L4

[egithinji]

Hey thanks a lot for getting back. I'm doing something like this and so far it's okay:

interface Props {
    data: {
        response: Response['get /v1/myroute']
    }

const MyComponent = ({data}: Props) => {
...
}

So I now have access to the specific Response type in my component.