I want to add a API reference in my ServiceStack react template?

Clients Add ServiceStack Reference
1

I have created a service stack template for the react project. I have added a reference of the API using link it creates a DTO’s.

Now when I am trying to call the API using a the DTO I need specify the BASE URL and the End point even though the endpoint is specified in the DTO. You can see the code snippet below.

DTO Code


// @Route("/api/Top10", "GET")
export class TopTen implements IReturn<TopTenResponse[]>, IGet
{
    /**
    * This will be the int value as 0 for Product & 1 For Service.
    */
    // @ApiMember(Description="This will be the int value as 0 for Product & 1 For Service.", IsRequired=true)
    public Type: Category;

    /**
    * How many records you want in return default value of this is 10
    */
    // @ApiMember(Description="How many records you want in return default value of this is 10")
    public Count: number;

    public constructor(init?: Partial<TopTen>) { (Object as any).assign(this, init); }
    public createResponse() { return new Array<TopTenResponse>(); }
    public getTypeName() { return 'TopTen'; }
}

API Call


const BASE_URL = "https://myapiapp.azurewebsites.net";
const ssClient = new JsonServiceClient(BASE_URL);

useEffect(() => {
    (async () => {
        const api = await ssClient.get<dtos.TopTenResponse[]>("/api/Top10",
            new dtos.TopTen({ Type: dtos.Category.Product, Count: 10 }))
        console.log(api)        
    })()
}, [])

Can I use the DTO directly without specifying the endpoint like we do in the service stack?

public TopTenResponse Any(TopTen request)

2

You only need the Base URL and the Typed Request DTOs, e.g. your API calls would look something like:

import { TopTen } from "dtos.ts"

const response = await ssClient.send(new TopTen({ ... }))

const api = await ssClient.api(new TopTen({ ... }))
console.log(api.response)

You could also use the explicit method like get but the HTTP Method to use is embedded in the Request DTO so I’d recommend using send or api as the same source code will work after changing the APIs HTTP Method to a POST.

You can find typed API examples in the template, e.g in Edit.tsx.

3

This is not taking the end point specified on top in the DTO. It is creating an URL in the below format
{BASE_URL}/api/{dto_name} instead of {BASE_URL}/{end_point_from_dto}

4

Which is the predefined routes that all non-.NET Service Clients use. If you want to use custom routes you’d need to specify it at each call site.

5

OK, Thanks for your help @mythz appreciated.