Block option from select from private GraphQL API?

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 for.

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

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

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.

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

I am looking to apply 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.

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
Plugins Overview