Mocking unfinished endpoints

You have agreed to an API schema with a backend engineer who will implement it; but they are starting to code the same time as you. It would be nice to easily mock the endpoint and use it in a way such that when the endpoint is done you won't need to make major changes to your code.

▶api/Rating

import { Entity, createResource } from '@data-client/rest';

export class Rating extends Entity {
  id = '';
  rating = 4.6;
  author = '';
  date = Temporal.Instant.fromEpochSeconds(0);

  pk() {
    return this.id;
  }
  static key = 'Rating';

  static schema = {
    date: Temporal.Instant.from,
  };
}

export const RatingResource = createResource({
  path: '/ratings/:id',
  schema: Rating,
}).extend({
  getList: {
    dataExpiryLength: Infinity,
    fetch() {
      return Promise.resolve(
        ['Morningstar', 'Seekingalpha', 'Morningstar', 'CNBC'].map(author => ({
          id: `${Math.random()}`,
          rating: randomFloatInRange(2, 5).toFixed(1),
          author,
          date: '1990-01-01T00:00:00Z',
        })),
      );
    },
  },
});

▶Demo

import { RatingResource } from './api/Rating';

function Demo() {
  const ratings = useSuspense(RatingResource.getList);
  return (
    <div>
      {ratings.map(rating => (
        <div key={rating.pk()}>
          {rating.author}: {rating.rating}{' '}
          <time>
            {DateTimeFormat('en-US', { dateStyle: 'medium' }).format(
              rating.date,
            )}
          </time>
        </div>
      ))}
    </div>
  );
}
render(<Demo />);

🔴 Live Preview

Store▶

By mocking the RestEndpoint we can easily fake the data the server will return. Doing this allows free use of the strongly typed RatingResource as normal throughout the codebase.

Once the API is implemented you can simply remove the custom fetch (and the entire list() override if that's all it's doing).

In this example we also set the dataExpiryLength to a longer time so the random values generated persist longer. This makes for a more realistic demo.