Get "Switch" field allowed values via API

1

I’m using a ‘Switch’ data type for a field in one of my tables, and want to reflect this in a dropdown on the frontend.

How can I access the accepted values from the backend via API? Not super keen to enter the different potential values in app.8base and also in frontend code.

Rating the system by the way, has been so easy to use so far!

2

Thanks @samwoolertonLW ! Glad to hear your having fun while slaying dragons.

For this example, I made an IceCreams table with a flavor field of type SWITCH with three flavors.

So the best way to do this would be to query the table field to then populate a list. I personally don’t find my solution that pretty, but it totally works!

This is how it would look if I were to query the whole table, and get back its fields and field data.

Query

query {
  table(name: "IceCreams") {
    fields {
      id
      fieldType
      fieldTypeAttributes {
        ...switchFrag
      }
    }
  }
}

fragment switchFrag on SwitchFieldTypeAttributes {
  listOptions
}

Results

{
  "data": {
    "table": {
      "fields": [
        {
          "id": "5d69e7b3b3cf3d32ab57c34e",
          "fieldType": "ID",
          "fieldTypeAttributes": null
        },
        {
          "id": "5d69e7b3b3cf3d30d757c34f",
          "fieldType": "DATE",
          "fieldTypeAttributes": {}
        },
        {
          "id": "5d69e7b3b3cf3d120a57c352",
          "fieldType": "DATE",
          "fieldTypeAttributes": {}
        },
        {
          "id": "5d69e7b3b3cf3d016057c358",
          "fieldType": "RELATION",
          "fieldTypeAttributes": null
        },
        {
          "id": "5d82495126ecb9dc3f6192bd",
          "fieldType": "SWITCH",
          "fieldTypeAttributes": {
            "listOptions": [
              "vanilla",
              "chocolate",
              "mint chip"
            ]
          }
        }
      ]
    }
  }
}

Because different fields have different fieldTypeAttributes we need to create a fragment to get used for EACH TYPE that we want to get back. In this case, we only cared about the SwitchFieldTypeAttributes type.

You could also do this by querying the actual field using its ID. This would require that you collect the ID and store it, but is the most direct way of getting what you’re looking for.

Query

{
  tableField(id: "5d82495126ecb9dc3f6192bd") {
    fieldType
    fieldTypeAttributes {
      ...switchFrag
    }
  }
}

fragment switchFrag on SwitchFieldTypeAttributes {
  format
  listOptions
}

Result

{
  "data": {
    "tableField": {
      "fieldType": "SWITCH",
      "fieldTypeAttributes": {
        "format": "CUSTOM",
        "listOptions": [
          "vanilla",
          "chocolate",
          "mint chip"
        ]
      }
    }
  }
}
3

Oh perfect, thanks for that. Not too concerned that it’s ugly, just glad I can get the data out.
The second option should work fine and is clean enough, just one GQL query and then make an API request whenever I load a page that renders a dropdown

4

Yeah that sound good. What framework are you working with? You could always make a special dropdown component that calls the api when first opened, and then saves the result.

5

I’m working in Nuxt (static rendering for Vue) - yeah could load options on first opening the component but honestly seems like a better user experience to do it on page load - can just make it part of the initial data fetch too so not even an extra query)
I’m also using Vuetify as the UI library so much easier to just use the built-ins

Great to have options though for sure

6

Nice! Couldn’t you even do it during the static build process?

7

Yeah that’s a great point - thanks for the suggestion!
Might even be able to trigger the Netlify build process with an 8base webhook too, but easy regardless

1 Like