How to get an API_KEY of the builder space from a custom plugin?

Hi :grinning:
Thanks for building the builder.io. :+1:

Builder content link

Builder public api key
fa665fa46d0f4b6bad52d214bed1cec9

What are you trying to accomplish
We created our own custom plugin to fetch data from other sources. I’m working on a validation of items of our Structured data model. I need to validate that an asset from the other source is used only in one published item within our builder space. For that purpose I fetch all published item of the data model via SDK ‘builder.getAll’ request. It works fine, but I need to supply the API_KEY of the builder space which is a context of our plugin. I have hardcoded our API_KEY in our plugin, but it is not good as there are Dev, QA and Prod environments.
How can I get the API_KEY from the plugin context?

Code stack you are integrating Builder with
JS, webpack

To dynamically obtain the API key within your custom plugin context, you can use the builder.getContext method to access the Builder Context, which includes the API key for the current space.

Here’s a step-by-step example on how you can achieve this:

  1. Retrieve the API Key from the Plugin Context:

    • Use the builder.getContext method to obtain the current context, which contains the API key. You can then use this API key to make your builder.getAll request.
  2. Example Implementation:

    Here’s an example implementation in JavaScript on how you could set this up in your custom plugin:

    import { builder } from '@builder.io/sdk';
    
    // Function to get all published items of a particular data model
    async function getAllPublishedItems(modelName) {
        // Get the context
        const context = await builder.getContext();
    
        // Extract the API key from the context
        const apiKey = context.apiKey;
    
        // Initialize Builder with the dynamic API key
        builder.init(apiKey);
    
        // Fetch all published items of the data model
        const publishedItems = await builder.getAll(modelName, { limit: 100, status: 'published' });
    
        return publishedItems;
    }
    
    // Example usage
    getAllPublishedItems('your-data-model')
        .then(items => {
            console.log('Published items:', items);
        })
        .catch(error => {
            console.error('Error fetching published items:', error);
        });
    
    
  3. Context in Builder Plugins:

    Builder provides a context within plugins that contains various useful details including the API key. You can access the current context in your plugin using the builder.getContext() method as shown above.

  4. Additional References:

    For more details on how to work with context in Builder plugins and further customize their behavior, refer to:

This approach ensures that your API key is dynamically fetched based on the environment, eliminating the need for hardcoding and making your solution adaptable across Dev, QA, and Prod environments.

1 Like

Thanks for sharing this data, Stephane :+1:
That is really cool!
I’ll implement this in our plugin.

1 Like

Hi Stephane

I’ve started to implement the proposed solution above, but I get the following error:

TypeError: builder.getContext is not a function

It seems to be not implemented. :neutral_face:
And it seems I’m using the latest version of ‘@builder.io/sdk’ (v.2.0.8).

Could you please advise how to resolve it?

Hi Stephane

I cannot find the function getContext in the code of your official repo: GitHub - BuilderIO/builder: Drag and drop headless CMS for React, Vue, Svelte, Qwik, and more.
:face_with_diagonal_mouth:

Could you please advise how to resolve it?

Hey @konstantin_WS I think the best way to get the apiKey is actually through appState, try something like

const apiKey = fastClone (appState?.user?.apiKey)

you can see a similar example in our smartling plugin: builder/plugins/smartling/src/smartling.ts at 4a0a19fb8cb49842258fd7a4727e542a23092d75 · BuilderIO/builder · GitHub

Hey @TimG
Your solution works well for our case.
Thanks for your suggestion. :+1: