---
# System prepended metadata

title: Stuff

---

# Stuff

First, we have a centralized place where we define all the endpoints.

(We first determine the origin based on the environment.)

![](https://i.imgur.com/qf1uMVS.png)

In a different file, related to the actual service calls, themselves:

![](https://i.imgur.com/9i5tHyv.png)

*(createRequest basically just structures and invokes a fetch(), using the provided urlRootName as a lookup for the full url for the request, i.e SERVICE_URL_ROOTS[urlRootName])*

Then, in a component, it would import and use a function like that one^ like so:

![](https://i.imgur.com/00LGeHP.png)

Assume that the component looks like this:

```jsx=
const MyComponent = (props) => {
    const store = useStore(props)
    return <p>whatever</p>
}
```
