React-hook-form fields based on API call.

I hit an API to get fields for a product. The field properties usually get defined before with Zod. The problem is if the API got changed it won't be in sync.
Example of the res data:

{
  "id": 766,
  "name": "Kapak & Kılıf",
  "displayName": "Kapak & Kılıf",
  "categoryAttributes": [
    {
      "allowCustom": true,
      "attribute": { "id": 47, "name": "Renk" },
      "attributeValues": [],
      "categoryId": 766,
      "required": true,
      "varianter": false,
      "slicer": true
    },
    {
      "allowCustom": false,
      "attribute": { "id": 14, "name": "Materyal" },
      "attributeValues": [
        { "id": 99, "name": "Polyester" },
        { "id": 85, "name": "Hakiki Deri" },
        { "id": 103, "name": "Silikon" },
        { "id": 105, "name": "Suni Deri" },
        { "id": 96, "name": "Plastik" }
      ],
      "categoryId": 766,
      "required": false,
      "varianter": false,
      "slicer": false
    },
    {
      "allowCustom": false,
      "attribute": { "id": 32, "name": "Model" },
      "attributeValues": [
        { "id": 865, "name": "Arka Kapak" },
        { "id": 866, "name": "Cüzdan Kılıf" },
        { "id": 867, "name": "Çerçeve" }
      ],
      "categoryId": 766,
      "required": false,
      "varianter": false,
      "slicer": false
    }
  ]
}

{
  "id": 766,
  "name": "Kapak & Kılıf",
  "displayName": "Kapak & Kılıf",
  "categoryAttributes": [
    {
      "allowCustom": true,
      "attribute": { "id": 47, "name": "Renk" },
      "attributeValues": [],
      "categoryId": 766,
      "required": true,
      "varianter": false,
      "slicer": true
    },
    {
      "allowCustom": false,
      "attribute": { "id": 14, "name": "Materyal" },
      "attributeValues": [
        { "id": 99, "name": "Polyester" },
        { "id": 85, "name": "Hakiki Deri" },
        { "id": 103, "name": "Silikon" },
        { "id": 105, "name": "Suni Deri" },
        { "id": 96, "name": "Plastik" }
      ],
      "categoryId": 766,
      "required": false,
      "varianter": false,
      "slicer": false
    },
    {
      "allowCustom": false,
      "attribute": { "id": 32, "name": "Model" },
      "attributeValues": [
        { "id": 865, "name": "Arka Kapak" },
        { "id": 866, "name": "Cüzdan Kılıf" },
        { "id": 867, "name": "Çerçeve" }
      ],
      "categoryId": 766,
      "required": false,
      "varianter": false,
      "slicer": false
    }
  ]
}

categoryAttributes.index.attribute.name should be the field name I suppose but how can I assign it to react-hook-form. I can't tell the name or if it required so I can make it as required in the form since it is an API call. I know the shape of the response only.
Is there a way around or I need to hard type them in the zod scheme and react-hook-form?

I hit an API to get fields for a product. The field properties usually get defined before with Zod. The problem is if the API got changed it won't be in sync.
Example of the res data:

{
  "id": 766,
  "name": "Kapak & Kılıf",
  "displayName": "Kapak & Kılıf",
  "categoryAttributes": [
    {
      "allowCustom": true,
      "attribute": { "id": 47, "name": "Renk" },
      "attributeValues": [],
      "categoryId": 766,
      "required": true,
      "varianter": false,
      "slicer": true
    },
    {
      "allowCustom": false,
      "attribute": { "id": 14, "name": "Materyal" },
      "attributeValues": [
        { "id": 99, "name": "Polyester" },
        { "id": 85, "name": "Hakiki Deri" },
        { "id": 103, "name": "Silikon" },
        { "id": 105, "name": "Suni Deri" },
        { "id": 96, "name": "Plastik" }
      ],
      "categoryId": 766,
      "required": false,
      "varianter": false,
      "slicer": false
    },
    {
      "allowCustom": false,
      "attribute": { "id": 32, "name": "Model" },
      "attributeValues": [
        { "id": 865, "name": "Arka Kapak" },
        { "id": 866, "name": "Cüzdan Kılıf" },
        { "id": 867, "name": "Çerçeve" }
      ],
      "categoryId": 766,
      "required": false,
      "varianter": false,
      "slicer": false
    }
  ]
}

{
  "id": 766,
  "name": "Kapak & Kılıf",
  "displayName": "Kapak & Kılıf",
  "categoryAttributes": [
    {
      "allowCustom": true,
      "attribute": { "id": 47, "name": "Renk" },
      "attributeValues": [],
      "categoryId": 766,
      "required": true,
      "varianter": false,
      "slicer": true
    },
    {
      "allowCustom": false,
      "attribute": { "id": 14, "name": "Materyal" },
      "attributeValues": [
        { "id": 99, "name": "Polyester" },
        { "id": 85, "name": "Hakiki Deri" },
        { "id": 103, "name": "Silikon" },
        { "id": 105, "name": "Suni Deri" },
        { "id": 96, "name": "Plastik" }
      ],
      "categoryId": 766,
      "required": false,
      "varianter": false,
      "slicer": false
    },
    {
      "allowCustom": false,
      "attribute": { "id": 32, "name": "Model" },
      "attributeValues": [
        { "id": 865, "name": "Arka Kapak" },
        { "id": 866, "name": "Cüzdan Kılıf" },
        { "id": 867, "name": "Çerçeve" }
      ],
      "categoryId": 766,
      "required": false,
      "varianter": false,
      "slicer": false
    }
  ]
}

React-hook-form fields based on API call.

Similar Threads

React-hook-form fields based on API call.

Similar Threads

Similar Threads

Similar Threads