A
arktype•3w ago
El Barto

Advices for this use case?

Hi, any advice for improving these schemas? I'm pretty new to Arktype. 
{
  "data": [
    {
      "page": {
        "entry_id": null,
        "id": "844d0940-3ba7f02abec7",
        "permalink": "#",
        "title": "Internet",
        "title_only": true,
        "uri": "#",
        "url": "#"
      },
      "depth": 1,
      "children": [
        {
          "page": {
            "entry_id": null,
            "icon": "arrow-trending-up",
            "icon_style": {
              "value": "solid",
              "label": "Solid",
              "key": "solid"
            },
            "id": "cad5e0a6-b415-c1c1b5223628",
            "permalink": "http://url/exray",
            "title": "Exray",
            "uri": "/exray",
            "url": "/exray"
          },
          "depth": 2,
          "children": []
        },
      ]
    },
    {
      "page": {
        "entry_id": null,
        "id": "abde300e-b8aa-1d4e0f1f1f2d",
        "permalink": "#",
        "title": "Mobile",
        "title_only": true,
        "uri": "#",
        "url": "#"
      },
      "depth": 1,
      "children": [
        {
          "page": {
            "entry_id": null,
            "icon": "globe-asia",
            "icon_style": {
              "value": "solid",
              "label": "Solid",
              "key": "solid"
            },
            "id": "c15bbff9-1f-9689b73948d1",
            "permalink": "http://url/mobilephone/coverage",
            "title": "Coverage",
            "uri": "/mobilephone/coverage",
            "url": "/mobilephone/coverage"
          },
          "depth": 2,
          "children": []
        }
      ]
    },
    
      
}
{
  "data": [
    {
      "page": {
        "entry_id": null,
        "id": "844d0940-3ba7f02abec7",
        "permalink": "#",
        "title": "Internet",
        "title_only": true,
        "uri": "#",
        "url": "#"
      },
      "depth": 1,
      "children": [
        {
          "page": {
            "entry_id": null,
            "icon": "arrow-trending-up",
            "icon_style": {
              "value": "solid",
              "label": "Solid",
              "key": "solid"
            },
            "id": "cad5e0a6-b415-c1c1b5223628",
            "permalink": "http://url/exray",
            "title": "Exray",
            "uri": "/exray",
            "url": "/exray"
          },
          "depth": 2,
          "children": []
        },
      ]
    },
    {
      "page": {
        "entry_id": null,
        "id": "abde300e-b8aa-1d4e0f1f1f2d",
        "permalink": "#",
        "title": "Mobile",
        "title_only": true,
        "uri": "#",
        "url": "#"
      },
      "depth": 1,
      "children": [
        {
          "page": {
            "entry_id": null,
            "icon": "globe-asia",
            "icon_style": {
              "value": "solid",
              "label": "Solid",
              "key": "solid"
            },
            "id": "c15bbff9-1f-9689b73948d1",
            "permalink": "http://url/mobilephone/coverage",
            "title": "Coverage",
            "uri": "/mobilephone/coverage",
            "url": "/mobilephone/coverage"
          },
          "depth": 2,
          "children": []
        }
      ]
    },
    
      
}
4 Replies
El Barto
El BartoOP•3w ago
This is my schema so far 
 export const cmsSharedScopex = scope({
  icon_style: {
    key: "'solid' | 'outline' = 'outline'",
  },
  'wrappedWithArrayData<T>': {
    data: 'T[]',
  },
}).export();
// 2. Create our navigation scope
const navigationScopex = scope({
  ...cmsSharedScopex,
  page: {
    '+': 'delete',
    id: 'string',
    title: 'string',
    url: 'string',
    new_window: 'boolean = false',
    'icon?': 'string | null',
    'icon_style?': 'icon_style',
  },
  navigationItem: {
    page: 'page',
    depth: '0 < number.integer < 3', // we support max depth of 2
    children: 'navigationItem[]',
  },
  // Wrapper type
  navigation: 'wrappedWithArrayData<navigationItem>',
}).export();
// Types
export type IconStylex = typeof cmsSharedScopex.icon_style.infer;
export type PrimaryNavigationPagex = typeof navigationScopex.page.infer;
export type PrimaryNavigationItemx =
  typeof navigationScopex.navigationItem.infer;
export type PrimaryNavigationResponsex =
  typeof navigationScopex.navigation.infer;
// 4. Schema needed just for API validation, types will be inferred in components
export const PrimaryNavigationSchemax = navigationScopex.navigation;
 export const cmsSharedScopex = scope({
  icon_style: {
    key: "'solid' | 'outline' = 'outline'",
  },
  'wrappedWithArrayData<T>': {
    data: 'T[]',
  },
}).export();
// 2. Create our navigation scope
const navigationScopex = scope({
  ...cmsSharedScopex,
  page: {
    '+': 'delete',
    id: 'string',
    title: 'string',
    url: 'string',
    new_window: 'boolean = false',
    'icon?': 'string | null',
    'icon_style?': 'icon_style',
  },
  navigationItem: {
    page: 'page',
    depth: '0 < number.integer < 3', // we support max depth of 2
    children: 'navigationItem[]',
  },
  // Wrapper type
  navigation: 'wrappedWithArrayData<navigationItem>',
}).export();
// Types
export type IconStylex = typeof cmsSharedScopex.icon_style.infer;
export type PrimaryNavigationPagex = typeof navigationScopex.page.infer;
export type PrimaryNavigationItemx =
  typeof navigationScopex.navigationItem.infer;
export type PrimaryNavigationResponsex =
  typeof navigationScopex.navigation.infer;
// 4. Schema needed just for API validation, types will be inferred in components
export const PrimaryNavigationSchemax = navigationScopex.navigation;
Things I'd like to improve: - be able to define in other file my cmsSharedScope. And just pick the "properties" I want in others scopes. For example buttonVariant, cardVariant, etc - Make my Schema smart enough to explicitly define max depth 2 - If the prop icon is present, then icon_style should be present too
Dimava
Dimava•3w ago
Make depth 0|1|2 instead maybe I don't think wrapper is useful because it's too simple Why not just : { data: 'navitem[]' ? I don't remember if there is scope().scope() but ik for sure there's scope().type()
El Barto
El BartoOP•3w ago
I did it because all the cms api responses has that data attribute and I dont really need it, I just need it to validad the API response at service layer/level. then react-query will infer the type and I'll need the actual naveItem type somewhere depth on my component tree, but you're right. I'll try to remove it and see how it goes
Dimava
Dimava•3w ago
If you don't care you may just unknown it

Did you find this page helpful?