Calling API

Overview

Ship uses TanStack Query with our own axios library wrapper. All queries are located in the /resources folder, organized into sub-folders for each resource.

TanStack Query helps easily fetch, cache, and update data. Each API endpoint has a related React hook using TanStack Query.

When getting data with apiService in services/api.service.ts, no need to add the full endpoint URL. The axios instance already has the base URL set.

If you need to make a request to a new endpoint, for example, for a project resource, you need to add a new hook to /resources/project/project.api.ts

Examples

resources/account/account.api.ts

export function useUpdate<T>() {
  const update = (data: T) => apiService.put("/account", data);

  return useMutation<User, unknown, T>(update);
}

resources/user/user.api.ts

export function useList<T>(params: T) {
  const list = () => apiService.get("/users", params);

  interface UserListResponse {
    count: number;
    items: User[];
    totalPages: number;
  }

  return useQuery<UserListResponse>(["users", params], list);
}

pages/profile/index.page.tsx

type UpdateParams = z.infer<typeof accountUpdateSchema>;

const { mutate: update, isLoading: isUpdateLoading } = accountApi.useUpdate<UpdateParams>();

pages/home/index.tsx

const { data: users, isLoading: isUsersLoading } = userApi.useList(params);