How to define nested structures in @msw/data with TypeScript?

[psbanka]

Hello! Thanks for this amazing project. I love mswjs and @msw/data

I am trying to define a factory with nested structures, as follows:

  event: {
    id: primaryKey(() => fakerEN.string.uuid()),
    metadata: () =>
      ({
        versionNumber: fakerEN.number.int({ min: 1, max: 100 }),
      }) as { versionNumber: number },
  },

I did this according to this guidance in the msw/data docs.. However, this is causing typescript errors, namely:

Type '() => { versionNumber: number; }' is not assignable to type 'ModelDefinitionValue'.
  Type '() => { versionNumber: number; }' is not assignable to type 'ModelValueTypeGetter'.
    Type '{ versionNumber: number; }' is not assignable to type 'ModelValueType'.ts(2322)
glossary.d.ts(28, 65): The expected type comes from property 'metadata' which is declared here on type 'Limit<ModelDefinition>'

The only way I can seem to get around this is by doing the as unknown as any typecast for this nested value. I couldn't find any documentation around nested structures in the how to do typescript docs.

Is this the only supported way to do nested values for msw/data objects using typescript?

[sunnypatell]

@psbanka this is a known TypeScript limitation in @msw/data. nested object factories work at runtime but the types don't support them cleanly.

the cleanest workaround is a type assertion at the property level:

import { factory, primaryKey } from '@mswjs/data';
import type { ModelDefinitionValue } from '@mswjs/data/lib/glossary';

const db = factory({
  event: {
    id: primaryKey(() => fakerEN.string.uuid()),
    metadata: (() => ({
      versionNumber: fakerEN.number.int({ min: 1, max: 100 }),
    })) as unknown as ModelDefinitionValue,
  },
});

the as unknown as ModelDefinitionValue cast is the sanctioned workaround for now. your instinct about as unknown as any was on the right track, but ModelDefinitionValue is slightly more type-safe.

alternatively, if you can flatten the structure, that avoids the typing issue entirely:

const db = factory({
  event: {
    id: primaryKey(() => fakerEN.string.uuid()),
    metadataVersionNumber: () => fakerEN.number.int({ min: 1, max: 100 }),
  },
});

this gap is tracked in mswjs/data#36 and should improve in a future release.