# Understending window.Twitch.ext.configuration.set

**URL:** <https://staging-discuss.dev.twitch.com/t/understending-window-twitch-ext-configuration-set/39128>\
**Category:** Extensions\
**Created:** [June 24, 2022, 8:50pm UTC](https://staging-discuss.dev.twitch.com/t/understending-window-twitch-ext-configuration-set/39128 "2022-06-24T20:50:25Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![pagep](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/pagep/32/17047_2.png) [@pagep](https://staging-discuss.dev.twitch.com/u/pagep)\
**Post date:** [June 24, 2022, 8:50pm UTC](https://staging-discuss.dev.twitch.com/t/understending-window-twitch-ext-configuration-set/39128/1 "2022-06-24T20:50:25Z")

</div>

Hi guys

We decided to update our extension which was written in a haste. And we want to have proper code.

But I struggle to understand `window.Twitch.ext.configuration.set` this function returns void. But obviously it has to do some network request to the Twitch BE to save the data. So is this function async or sync?

> **[Extensions Reference](https://dev.twitch.tv/docs/extensions/reference/)**
>
> Extensions Reference

Because during our testing - when we run the following code quickly multiple times - it results in malformed config.

```auto
 const currentConfig = window.Twitch.ext.configuration.broadcaster
 const newConfig = { ...currentConfig, ...config };
 window.Twitch.ext.configuration.set("broadcaster", version, JSON.stringify(newConfig));

```

So we thought that solution is to write promise with onChanged but following code doesn’t work for us, any ideas? Or does anyone have link / example how they are using configuration set?

```auto
  const setConfig = (config: Record<string, any>) => {

     return new Promise<void>((resolve, reject) => {
       try{
         window.Twitch.ext.configuration.onChanged(() => {
           resolve();
         });

         const currentConfig = getConfig();
         const newConfig = { ...currentConfig, ...config };
         window.Twitch.ext.configuration.set("broadcaster", version, JSON.stringify(newConfig));

       } catch (e) {
         reject();
         window.Twitch.ext.rig.log("Error saving the new config");
       }
     });
  }

```

I guess I am just missing something.  
Thanks a lot!

🙂

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://staging-discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [June 24, 2022, 11:51pm UTC](https://staging-discuss.dev.twitch.com/t/understending-window-twitch-ext-configuration-set/39128/2 "2022-06-24T23:51:30Z")

</div>

onChanged can only run _once_ per page load.  
It is used to trigger the config to be loaded from Twitch into JS

If you do a set (via EBS call or JS called) `onChanged` is not called _again_

config `set` is not a promise. It’s a sync call to store the config into Twitch.  
That config is not sent to running instances of an extension.

See also: [https://github.com/BarryCarlyon/twitch\_misc/tree/main/extensions/config\_service](https://github.com/BarryCarlyon/twitch_misc/tree/main/extensions/config_service)  
When I do a config set via an EBS/API call, I also push out the same config over pubsub so running instances of extension recv the new configuration.

So to test what you are doing.

- page loads
- wait for onAuthorised
- load config via `onChanged`
- hit a button to trigger a save event with the new config
- reload the page

If you are running the JS call to set _multiple times very quickly_ then you will cause weirdness to occur. The API only has a 12 per minute rate limit iirc

So your HTML/JS needs to be something along the lines of, (some psudecode here)

```javascript
window.Twitch.ext.onAuthorized(auth => {
    // the page has loaded and is ready
    loadConfig();
});

function loadConfig() {
    window.Twitch.ext.configuration.onChanged(() => {
        var broadcaster_config = window.Twitch.ext.configuration.broadcaster;
        if (broadcaster_config && broadcaster_config.content) {
            try{
                broadcaster_config.content = JSON.parse(broadcaster_config.content);
                // we have broadcaster config loaded and parsed it to JSON
            } catch (e) {
            }
        }
        buildConfigForm();
        enableConfigForm();
    });
}

function enableConfigForm() {
    mySaveButton remove disabled
    mySaveButton.addEventListener('click', () => {
        serialise form/collect config from form
        window.Twitch.ext.configuration.set("broadcaster", '1', JSON.strinfigy(theconfig));
    });
}

```

(Note that .set accepts a string, so it doesn’t have to be JSON in theory)

That in some JS and some pseudo code will do the trick

> [@pagep](#):
>
> But I struggle to understand `window.Twitch.ext.configuration.set` this function returns void. But obviously it has to do some network request to the Twitch BE to save the data. So is this function async or sync?

Sync.

It doesn’t return anything, you cannot catch a succeed of a fail from it. It is fire and forget.

a [`window.Twitch.ext.onError`](https://dev.twitch.tv/docs/extensions/reference#onerror) might catch something but might not (I don’t use `set` in the front end too much myself I prefer the EBS/api calls)

> [@pagep](#):
>
> So we thought that solution is to write promise with onChanged but following code doesn’t work for us, any ideas?

You did enable the config service in the developer console for this version of the extension?

It’s under “capabilities”

 ![image](https://d2spem0quai2ol.cloudfront.net/original/3X/e/a/ea36d97721ca7be374e3fcb60f0c1129a9831d44.png)

With it disabled, you won’t get errors to the `set` request (or API request). It just won’t load in the front end and the API is _unpredicatble_ as the service is “disabled”

> [@pagep](#):
>
> Or does anyone have link / example how they are using configuration set?

I have samples for processing config from onChanged but not `set` it is JUST fire and forget (I don’t tend to use set)

My “debug all the things” Twitch Extension [https://github.com/BarryCarlyon/twitch\_extension\_debug/blob/main/extension/panel/config\_service.js](https://github.com/BarryCarlyon/twitch_extension_debug/blob/main/extension/panel/config_service.js) has the config “parse” logic I tend to use.

**TLDR**

- It’s not a promise,
- you cannot catch success/fail with the config set calls persae but onError might report one.

It seems you tried to over engineer the config setting stuff but it doesn’t support it since it returns nothing.

**EDIT**

I had a spare two mintues to throw in a config tester into my _TEST ALL THE THINGS_

 ![image](https://d2spem0quai2ol.cloudfront.net/original/3X/1/a/1acc632d6be45af28433a4290fd98f01b02f72eb.png)

With [https://github.com/BarryCarlyon/twitch\_extension\_debug/blob/main/extension/panel/config\_service.js#L56](https://github.com/BarryCarlyon/twitch_extension_debug/blob/main/extension/panel/config_service.js#L56) being the _set from the form_ logic.

So if I do

 ![image](https://d2spem0quai2ol.cloudfront.net/original/3X/c/d/cdd0fba0270c4188bd9f98315641fc8d7557e930.png)

And hit “Save Broadcaster Config”  
Then the “running config” is still `{"cat":"dog"}` and will remain that till until I reload the page.

Unless, I use PubSub (or something else) to forward the same config to running instances.

after reloading the page

 ![image](https://d2spem0quai2ol.cloudfront.net/original/3X/0/2/02b0a38f274ccf10d3f5f3d37686fc397e06aa51.png)

---

<div class="post-metadata">

**Author:** ![pagep](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/pagep/32/17047_2.png) [@pagep](https://staging-discuss.dev.twitch.com/u/pagep)\
**Post date:** [June 26, 2022, 9:30pm UTC](https://staging-discuss.dev.twitch.com/t/understending-window-twitch-ext-configuration-set/39128/3 "2022-06-26T21:30:08Z")

</div>

Thank you very much for the explanation. Now everything makes sense 🙂