> For the complete documentation index, see [llms.txt](https://aaron-mota.gitbook.io/aarons-style-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aaron-mota.gitbook.io/aarons-style-guide/frontend/our-systems/data-fetching-and-api/api-object.md).

# "api object"

{% hint style="info" %}
🎥 Watch the "api" object section of the ["Server Global State (TanStack/React Query)"](https://youtu.be/f-UX9pu7u9Y) style guide video here.
{% endhint %}

***

We use a [custom-built **"api" object**](https://youtu.be/lux6vB4GyWk?si=YPnseIcBPZUjkZxy), which is essentially a wrapper over [React Query](https://tanstack.com/query/v3/)[ (v3)](https://tanstack.com/query/v3/), and is [tRPC-like](https://create.t3.gg/en/usage/trpc) in terms of usage.

The frontend routes line up with our backend routes according to our [(v2) API schema](broken://pages/msmb2lTEOzuLmZugjacu).\
\
*(in the comments in the second image below, you can see which backend/Rails controller actions are related to each frontend route)*

***

### Overview

* [**Configuration**](#configuration)
* [**Usage**](#usage)

***

### Configuration

**"api" object** (holds "router" objects)

<figure><img src="broken://files/LPBX8oeWv0t7DzoTOVG8" alt=""><figcaption></figcaption></figure>

**"router" objects** (hold **"procedures"** -- e.g. getSingle, getMany, etc.)

<figure><img src="broken://files/y6PM26yx5F4FF9NIxzxZ" alt=""><figcaption></figcaption></figure>

***

### Usage

* **Queries (e.g. getSingle, getMany) (useQuery-wrapped procedures)**

<figure><img src="broken://files/ddiviT5JraPhwJCiehfP" alt=""><figcaption></figcaption></figure>

* **Mutations (e.g. create, update, delete) (useMutation-wrapped procedures)**

<figure><img src="broken://files/gqc9ZT4GONHae6bkBaJ7" alt=""><figcaption></figcaption></figure>

**-- Top-level resource (e.g. projects):**

<figure><img src="broken://files/UaSCHGksM5Yg75YGIpLQ" alt=""><figcaption></figcaption></figure>

```jsx
mutationProjectUpdate.mutate({
  id: doc.id,
  payload: {
    production_goal: requestData.production_goal,
  },
});
```

**-- Nested resource (e.g. production goals -- projects/production\_goals)**

<figure><img src="broken://files/KCOUOtuVap59gJ7VZMS1" alt=""><figcaption></figcaption></figure>

```jsx
mutationProductionUpdate.mutate({
  parentResource: 'projects',
  parentId: doc.id,
  id: production.id,
  payload: {
    date: production.date,
    goal: production.goal,
    actual: production.actual,
  },
});
```