
Backend services are the procesing blocks that empower the logic of an application served well. They do all sorts of things: talk to databases, keep things in caches, process data from message queues, serve webhooks for external systems, process images, or even send push notifications to users' mobile devices - indispensible part to a well designed software architecture, whether for a web or mobile app.

To make services more reusable and being able to change behaviour without changing code, configuration parameters are typically provided to tell the services what kind of environment it is operating in. For example:

- `NODE_ENV=production`: to inform that a service is running in production environment
- `DB_HOST, DB_PORT`: which database server to connect to
- `DB_USERNAME, DB_PASSWORD`: what user account to use when talking to database
- `JWT_SECRET`: what JWT shared secret to use
- `REQ_TIMEOUT_LIMIT=5000`: what timeout in milliseconds to use when sending requests to other services

Sometimes backend services deployment fail way past deployment because of misconfiguration. It is possible to enter the wrong `DB_HOST` hostname, missed out on setting the value for `JWT_SECRET` or even have a typo in the key or value of any configuration parameters. As services grow larger, we tend not to encounter these errors early on until the particular section of code gets executed under some specific conditions.

For example, if your database connection uses lazy loading and/or connection pooling, chances are that your backend service doesn't establish a connection to the database at start up (or shortly after deployment) until it is needed while serving some request much later.

> We end up celebrating too early at a successful deployment only to find the services failing while handling workload.

## Enter Power-on Self-test

In the world of hardware and embedded systems, it is typical for engineers to embed a set of self-testing routines called [Power-on Self-test](https://en.wikipedia.org/wiki/Power-on_self-test) (POST). Simply put, when the system starts up

Power-on Self-test is much more common than we know it. They are commonly found in

- airplanes
- medical equipment
- computers
- phones
- gaming consoles
- TVs

> Can you imagine yourself in a plane up in the air, only to find the plane stalling mid-air because of fuel amount was in reserves during take-off?

Could the plane's software system checked on the amount of fuel remaining before allowing the pilot to start the engine?

Likewise, to build resilient backend services, it's important to include some form of POST routine at service pre-initialization. By allowing backend services to fail early on shortly after deployment, services wouldn't fail while serving requests or processing important data.

In an Express.js HTTP API service, I'd write a POST routine like this:

```typescript
// post.ts

/// .... imports goes here

const { JWT_SECRET } = process.env;

export async function powerOnSelfTest() {
  // check if JWT secret was configured and can be used to sign and verify payload
  assert(JWT_SECRET);
  const token = jwt.sign("testData", JWT_SECRET);
  const payload = jwt.verify(token, JWT_SECRET);
  assert(payload === "testData");

  // check if database connection and credentials are OK
  const dbConn = createDbConnection();
  try {
    await dbConn.authenticate();
  } catch (e) {
    console.error("Error connecting to DB", e);
    throw e;
  }
}
```

Before starting up the HTTP listener, I'd run the POST routine:

```typescript
// index.ts

/// .... other imports
import { powerOnSelfTest } from "./post";

async function startApp() {
  const app = express();

  const db = await initDbModels(createDbConnection());
  app.locals.db = db;

  /// ... setup routes

  const port = process.env.PORT || 3333;
  const server = app.listen(port, () => {
    console.log(`Listening at port ${port}`);
  });
}

// start up the application
powerOnSelfTest()
  .then(startApp)
  // catch POST and startup errors here
  .catch((err) => console.error(err));
```

Even if all the environment variables provided to the application were correct, the POST routine would at least check for connectivity between the service and dependent servers like the database. Problems like version incompatibility, network connectivity or incorrect infrastructure setup, can also be caught in the POST - _at very little cost_.

Having POST routines in place, I can be _slightly more_ confident that my backend services would work beyond post-deployment.

POST routines work as well as they are written. As [Edsger W. Dijkstra](https://en.wikipedia.org/wiki/Edsger_W._Dijkstra) puts it, POST routines - like any other tests - can only prove the presence, **not** the absence of bugs. You can instead embrace POST routines as another hammer in your toolbox in catching catch potential failures early on.



I've found [react-query](https://react-query.tanstack.com/) to be pleasantly straightforward and easy to use in managing server-side state on React and React Native apps, with plenty of support and resources from the likes of [TkDodo's blog](https://tkdodo.eu/blog/practical-react-query) and [online courses](https://ui.dev/react-query?coupon_code=aQcnd).

React Query deals with, you guessed it, [queries](https://react-query.tanstack.com/guides/queries). As you build up your React application, you will find yourself facing some of these scenarios:

- you have queries that execute depending on the data returned from an earlier query: you can run conditional queries like in the guide on [Dependent Queries](https://react-query.tanstack.com/guides/dependent-queries).
- you have queries that can run in parallel: [`useQueries()`](https://react-query.tanstack.com/guides/parallel-queries) is there to solve parallel queries
- you have the same query that will be requested by multiple components in the same render cycle: It's more favourable to request for the same query multiple times than to perform [props drilling](https://blogs.perficient.com/2021/12/03/understanding-react-context-and-property-prop-drilling/), as you can configure [`staleTime`](https://react-query.tanstack.com/guides/important-defaults) to your needs

TkDodo has written about [creating custom hooks](https://tkdodo.eu/blog/practical-react-query#create-custom-hooks). Using custom hooks makes reading a component's code a breeze, because `useQuery` and how data is fetched gets colocated together in a custom hook. For example, a custom hook to fetch the list of todo items:

```typescript
export const useTodoListQuery = (filter: Filter = {}) => useQuery(['todos', filter], () => fetchTodoList(filter));
```

As I encountered more of those scenarios I described earlier, I found the need to reuse queries written in `useQuery` to also be used in `useQueries` for parallel execution. To make things more manageable, I decided to write utility function for constructing query options:

```typescript
export const buildTodoListQueryOptions = (filter: Filter) => ({
  queryKey: ['todos', filter],
  queryFn: () => fetchTodoList(filter),
});

export const useTodoListQuery = (filter: Filter = {}) => useQuery(buildTodoListQueryOptions(filter));
```

In the event that I need to build a portion of User Interface that needed to run the `useTodoListQuery` in parallel with something else, say loading calendar items, I can do this:

```typescript
export const buildTodoListQueryOptions = (filter: Filter) => ({
  // ...
});

export const useTodoListQuery = // ...

export const buildCalendarItemsQueryOptions = (dateRange: DateRange) => ({
  queryKey: ["calendar", dateRange],
  queryFn: () => fetchCalendarItems(dateRange),
});

export const useCalendarItemsQuery = // ...

export const useLandingInfoQuery = (
  dateRange: DateRange,
  filter: Filter = {}
) =>
  useQueries([
    buildCalendarItemsQueryOptions(dateRange),
    buildTodoListQueryOptions(filter),
  ]);
```

This makes it easier to build composable queries. That said, I don't think everyone should start going around and pick out their query options from whereever `useQuery` appeared. The abstraction should only occur when there is a good enough reason to do so, like when a particular query needs to be used in multiple instances of `useQuery` and `useQueries` to enhance user experience and loading time.

What do you think?



Last week, I integrated [Utterances](https://utteranc.es) to my blog over a couple of hours and shortly after integration, I found out about [Giscus](https://giscus.app/) and [laymonage](https://github.com/laymonage) came over to tell me that Giscus comes "with a ready-to-use [component library](https://github.com/giscus/giscus-component)".

Being "heavily inspired by utterances", Giscus is similar in many aspects (client-side integration, custom themes, reactions etc.) leveraged on [GitHub Discussions](https://docs.github.com/en/discussions) to host comments rather than GitHub Issues. Since I was familiar with how Utterances worked by then, I was able to quickly switch over to Giscus in an hour or so. Additionally, Giscus allows you to:

- add reactions to the page itself - these are stored on the discussion original post and can be disabled by option
- replies to comments, nesting - this is a feature I understand to be not supported by GitHub Issues
- sorting of comments by oldest/newest
- configuring if the comment box should be placed above all comments - I preferred not to scroll through the long list of comments before adding my comment, though this is purely the user's preference.

One thing I was facinated about, was that the comments widget did not reload fully when themes changed. I dug into the component library's source code and found that Giscus's component library leverages on [message passing to the iframe](https://github.com/giscus/giscus-component/blob/main/web/src/giscus.ts#L202) to update changes occurred in the component props. When using Utterances, any change in the props would result in a full reload of the script and iframe.

<img src="/assets/d3c0caadbf.gif" />

Giscus worked nicely, and I guess it's here to stay on my blog. Kudos to the Giscus team for building on the goodness that Utterances brought about.


Sam's Blog

React-Query: abstracting query options