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

Technical Questions
1

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

2

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
3

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

1 Like
4

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?

5

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?

6

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

7

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

8

Hey @TimG
My issue is to get the apiKey to Initialize my builder plugin.
Your solution works well locally, but it fails on PROD with the following error:

ReferenceError: Cannot access ‘appState’ before initialization

My code looks like this:

  const pluginContext = appState as ApplicationContext;
  const apiKey = pluginContext.user.apiKey;

  // Initialize Builder with the dynamic API key
  try {
    builder.init(apiKey);
  } catch (error) {
    console.error("[builderio-reach-plugin] Error of initializing builder:", error);
  }

Any suggestion on how to fix the ReferenceError, please?

9

hey @konstantin_WS without seeing the code or exactly where the issue issue, I would guess this is trying to run server side somewhere? Plugins can only run on the browser, I would recommend wrapping the logic in

if (Builder.isBrowser) { 
     ... code logic
}
10

Hey TimG
Thanks for your fast reply.
Your solution works like a charm. :+1: