Make MSW/Data more type compatible with FakerJS functions

[SalahAdDin]

Right now we have a complex article model:

export type TArticle = {
  /** article's thumbnail */
  thumbnail: TImage;
  /** article's title */
  title: string;
  /** article's category */
  category: TCategory;
  /** article's publication date */
  publishedDate: Date;
  /** article's creation date */
  createdDate: Date;
  /** article's slug for url path */
  slug: string;
  /** article's introduction (used also as meta) */
  introduction: string;
  /** article's author */
  author?: Array<TAuthor>;
  /** article's hero */
  hero: TArticleHero;
  /** article's content */
  content: TRichText;
  /** article's source */
  source?: string;
  /** article's tags */
  tags: Array<string>;
  /** article's continue reading article */
  continue: TContinueReadingArticle;
  /** article's related articles */
  related?: Array<TRelatedArticle>;
};

It has many relations and complex children, specially content:

content: {
root: {
  type: "root";
  indent: number;
  version: number;
  direction: TDirection;
  children: Array<TRichTextParent>;
};
}

We mock the article like this:

const db = factory({
  article: {
    id: primaryKey(() => _articleId++),
    title: () => title,
    slug: () => faker.helpers.slugify(title),
    author: nullable(manyOf("author")),
    thumbnail: oneOf("image"),
    category: oneOf("category"),
    createdDate: () => faker.date.anytime(),
    publishedDate: () => faker.date.anytime(),
    introduction: () => faker.lorem.text(),
    content: { root: () => mockRichText() }, // issue here
    hero: {
      url: () => faker.image.url({ width, height }),
      alt: () => faker.lorem.text(),
      width: () => width,
      height: () => height,
      caption: {
        source: () => faker.lorem.word(),
        description: () => faker.lorem.text(),
      },
    },
    // content: () => ({ root: () => mockRichText() }),
    source: nullable(() => faker.lorem.word()),
    tags: () => mockArray(6, () => faker.lorem.word()),
    continue: oneOf("relatedArticle"),
    related: nullable(manyOf("relatedArticle")),
  },
})

We opted for using our custom content mock instead of manually assigning any value because, cause really, the functions are extensive:

export function mockRichText(): TRichTextRoot {
  return {
    type: "root",
    direction: "ltr",
    indent: 0,
    version: 0,
    children: [
      ...mockParagraphNodeArray(3),
      {
        ...mockHeaderNode(),
        tag: "h2",
        direction: "ltr",
        indent: 0,
        version: 0,
      },
      ...mockParagraphNodeArray(4),
      { ...mockQuoteNode(), direction: "ltr", indent: 0, version: 0 },
      ...mockParagraphNodeArray(2),
      { type: "readmore", children: mockRelatedArticle() },
      ...mockParagraphNodeArray(2),
      {
        ...mockHeaderNode(),
        tag: "h2",
        direction: "ltr",
        indent: 0,
        version: 0,
      },
      ...mockParagraphNodeArray(2),
      { ...mockListNode(), direction: "ltr", indent: 0, start: 0 },
      ...mockParagraphNodeArray(2),
      {
        ...mockHeaderNode(),
        tag: "h2",
        direction: "ltr",
        indent: 0,
        version: 0,
      },
      ...mockParagraphNodeArray(2),
      {
        type: "upload",
        version: 0,
        value: {
          ...mockUploadNode(),
          id: faker.string.uuid(),
          filename: faker.system.fileName(),
          filesize: faker.number.int(),
          createdAt: faker.date.anytime().toDateString(),
          updatedAt: faker.date.anytime().toDateString(),
        },
      },
      ...mockParagraphNodeArray(2),
      mockTwitterNode(),
    ],
  };
}

We don't want to do it again.

Anyway, we have the following issue:

Type 'TRichTextRoot' is not assignable to type 'ModelValueType'.

How can we solve this issue without implementing the whole functionality?

As you can see, we had to implement it twice since using any custom mock function always gives that error.

Wouldn't it be easy for msw/data could also infer the type from the mock functions' return types?

Thank you

[SalahAdDin]

My issue seems to be a duplicate of this one.

[citrahtac]

I may have a pure typescript solution.

#282 (comment)