Hello API Endpoint
GET endpoint using useQuery
Text API Endpoint
POST endpoint using Mutation
TS Rest Contracts (Shared)
Use the @ts-rest/core package to define a contract. Nesting routers can help organize your resources. For example, /users/:id/posts could have a nested router contract.users.posts. This is the path that you'd use on the client to query the API
import { initContract } from "
@ts-rest / core";
import { z } from "zod";
const c = initContract();
export const helloContract = c.router({
getHello: {
method: "GET",
path: "/hello",
responses: {
200: z.object({
response: z.string(),
}),
500: z.object({
response: z.string(),
}),
},
summary: "Echo Hello",
},
});
TS React Query (Frontend)
This is a client using @ts-rest/react-query, using @tanstack/react-query under the hood.
const { data: helloData, isLoading: isHelloLoading, error, refetch: refetchHello, isRefetching: isHelloRefetching } = client.hello.getHello.useQuery([
"hello"
], {
})