Block option from select from private GraphQL API?

Technical Questions
,
1

I’m trying to get just one component working the way that I want to pave the way for everything else we’re looking to use Builder.io for.

So far I have a registered component Poster that accepts a Title, Subtitle URL and Image.

CleanShot 2022-10-11 at 16.33.00
CleanShot 2022-10-11 at 16.33.001514×1027 71.5 KB

My goal is instead of typing in these values you select a “Course” from a dropdown. Ideally this would be a map so that the associated course ID was passed into the prop.

For example the dropdown might contain:

<option value="1">Storytelling</option>
<option value="2">Cooking</option>
<option value="3">Music Production</option>

The list should be populated from data from our private GraphQL API:

{
  "data": {
    "courses": {
      "nodes": [
        {
          "id": "1",
          "title": "Storytelling"
        },
        {
          "id": "2",
          "title": "Cooking"
        },
        {
          "id": "3",
          "title": "Music Production"
        }
      }
    ]
  }
}

I’ve seen docs on things like remote data bit this seems to relate more to if you want to repeat a component n times for a given API response. This isn’t what I’m looking for but rather adding a new dropdown in the Block Options (or somewhere similar) that allows me to select from a course utilising data from my own API.

Can anybody point me in the right direction? Is this possible with buider.io?

2

Hi @adambutler welcome to the forum! I think what you are looking for is adding the enum option to your custom component. You can read about it here. For “text” input type, specifying an enum will show a dropdown of options instead.

3

@ancheetah Thanks for your help but I’m not quite sure that helps me in this case.

I am looking to apply Builder.io to a new Next.js site. At the time of registering the component provide a static list of items using the enum field but I really need this list to come from a separate GraphQL API. I’ve seen some Shopify demos that allow you to pick a product, it appears to be fully dynamic and API driven, that’s the sort of thing I’m after.

4

For a dynamic product picker you can create a custom plugin and submit a PR to our OSS repo to publish it publicly. You can take a look at our open source plugins for examples or get started with our example-data-plugin starter.

Contributing Plugins to Builder.io
Plugins Overview