I have added some custom code and want to run code on the client side. I have followed the information at Adding custom code in the Builder.io visual editor - Builder.io. However, When I run my code I get the error “Builder is not defined”.
script>
const TokenQuery = '{ token { Token } }';
function fetchGqToken() {
const token = sessionStorage.getItem('gql_jwt');
if (token !== undefined) {
fetch('https://******.com/graphql', {
method: 'POST',
body: JSON.stringify(TokenQuery),
headers: { Authorization: 'Bearer ${token}' }
})
.then((response) => { response.json(); })
.then((data) => { console.log('Success:', data); })
.catch((error) => { console.error('Error:', error); });
}
return token;
}
const getToken = async() => {
const Token = await fetchGqlToken();
console.log(Token);
};
if (Builder.isServer) {
console.log("builder is server side")
}
if (Builder.isBrowser) {
console.log("builder is browser side")
}
Hi Richard, could you please share the content link (should start with https://builder.io/content) to the page so we can take a closer look?
@Richard_at_the_pools the documentation you mentioned above is intended for custom JS/CSS in the Data tab while it looks like rather you are using a custom code block for this snippet. If you click on the Advanced Options for the code block there is a toggle for running scripts client-side.
1 Like
Cheers! As I’m creating new exportable variables then I think I should be using custom JS in the data tab then?
Hi Richard, yes with the data tab you’ll also have access to Builder state. If for example you need to use the token later in data bindings then in custom JS you can do something like state.token = token to make it available.
so, if I have a block that has a link URL, and I wanted to substitute a ${token} in the link URL with the token, I’m guessing I could add this in the custom code for the block? How would I reference the link URL in that case? I don’t see it in the state inspector for the block
BTW - I have moved the code to a data tab but main doesn’t seem to run at all
Arcade | Visual Editor | Builder.io
Since the fetch snippet is outside of Builder.isBrowser it is running server-side by default. Try moving it into isBrowser since you need it to run client-side. Instead of exporting your variables, you can add them to state (also inside isBrowser).
Then to create a link with the token use a text block instead of custom code. Add a data binding to the text block and set “Link URL” to your desired link with token (e.g. https://example.com/${state.token}). If you need to add a CSS class you can add the class name in the Style tab under Advanced > CSS Classes. Then define the CSS class in custom CSS in the Data tab.
Here’s a fiddle that demonstrates this. Hope this helps!
The fetch is in a function. That function is called from within the isBrowser check, so should be run client side. However, none of the console.log are running either, which make me wonder if the main() function is running at all
edit : also, most frustratingly, I have set up the linked URL in data but it doesn’t fire ;(.
Hey @Richard_at_the_pools thanks for that clarification! This is difficult for me to check because your page isn’t loading for me (is it behind a VPN or firewall?). Would it be possible for you to reproduce this somewhere where I can see content and check the console, etc.?
For the link, try wrapping it in quotes.
Sorry for the delay in answering. Working on the assumption that you guys know what you are doing, I went back and checked all my code and discovered crappy software. Once fixed I was able to have the system work as expected.
Thank you so much for your help.
1 Like
You’re welcome Richard! Glad you were able to get it figured out.
